Difference between revisions of "Cascading Style Sheets"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) (→External links) |
Karl Jones (Talk | contribs) |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
CSS is fundamental to [[web page layout]]. | CSS is fundamental to [[web page layout]]. | ||
| + | |||
| + | == CSS box model == | ||
| + | |||
| + | The [[CSS box model]] defines how [[HTML elements]] fills space in a web page. | ||
== Separation of concerns == | == Separation of concerns == | ||
| Line 34: | Line 38: | ||
* [[Cascade (CSS)]] | * [[Cascade (CSS)]] | ||
* [[Cascade weight (CSS)]] | * [[Cascade weight (CSS)]] | ||
| + | * [[Centering (CSS)]] | ||
* [[Class selector (CSS)]] | * [[Class selector (CSS)]] | ||
| + | * [[Compass (stylesheet framework)]] - an open-source CSS authoring framework which works with [[Sass (stylesheet language)]]. | ||
* [[Conditional stylesheets]] | * [[Conditional stylesheets]] | ||
* [[CSS hacks]] | * [[CSS hacks]] | ||
* [[Declaration (CSS)]] | * [[Declaration (CSS)]] | ||
| + | * [[Email and HTML]] | ||
* [[External style sheet]] | * [[External style sheet]] | ||
* [[HTML element selector (CSS)]] | * [[HTML element selector (CSS)]] | ||
| Line 43: | Line 50: | ||
* [[Less (stylesheet language)]] | * [[Less (stylesheet language)]] | ||
* [[Responsive web design]] | * [[Responsive web design]] | ||
| − | * [[Sass (stylesheet language)]] | + | * [[Sass (stylesheet language)]] - a scripting language that is interpreted into [[Cascading Style Sheets]] (CSS). |
* [[Selector]] | * [[Selector]] | ||
* [[Separation of concerns]] | * [[Separation of concerns]] | ||
| Line 64: | Line 71: | ||
* [http://nefariousdesigns.co.uk/on-html-element-identifiers.html On HTML Element Identifiers] | * [http://nefariousdesigns.co.uk/on-html-element-identifiers.html On HTML Element Identifiers] | ||
* [http://www.smashingmagazine.com/2012/04/decoupling-html-from-css/ Decoupling HTML From CSS] | * [http://www.smashingmagazine.com/2012/04/decoupling-html-from-css/ Decoupling HTML From CSS] | ||
| + | * [https://csscreator.com/ CSS Creator] - online CSS generator | ||
| + | * [http://cssguidelin.es CSS Guidelines] - "High-level advice and guidelines for writing sane, manageable, scalable CSS" | ||
| + | * [http://cssgridgarden.com/ CSS Grid Garden] | ||
| + | * [https://evanhahn.com/life-changing-css/ Four CSS tips that have changed me as a man] | ||
| + | * [https://purecss.io/ Pure.css] - a set of small, responsive CSS modules | ||
| + | [[Category:Cascading Style Sheets]] | ||
[[Category:Web design and development]] | [[Category:Web design and development]] | ||
Latest revision as of 08:54, 18 April 2018
Cascading Style Sheets (CSS) is a language used to define the presentation ("look and feel") of a document written in HTML or some other markup language.
Contents
Style sheet
See Style sheet (web design) for a discussion of style sheets.
Web page layout
CSS is fundamental to web page layout.
CSS box model
The CSS box model defines how HTML elements fills space in a web page.
Separation of concerns
Separation of concerns is a design principle which requires certain entities to take certain responsibilities, and other entities to take other responsibilities.
In web design, separations of concerns includes the separation of:
- Style sheet provide design, presentation, layout, color
- Markup tags (HTML or XHTML) provides semantic content and structure
This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup (HTML) defined both style and structure. (For example, the font element.)
Selectors
Selectors specify which HTML elements will be selected -- and thus affected -- by a style rule.
Fundamental selectors
See also
- Cascade (CSS)
- Cascade weight (CSS)
- Centering (CSS)
- Class selector (CSS)
- Compass (stylesheet framework) - an open-source CSS authoring framework which works with Sass (stylesheet language).
- Conditional stylesheets
- CSS hacks
- Declaration (CSS)
- Email and HTML
- External style sheet
- HTML element selector (CSS)
- ID selector (CSS)
- Less (stylesheet language)
- Responsive web design
- Sass (stylesheet language) - a scripting language that is interpreted into Cascading Style Sheets (CSS).
- Selector
- Separation of concerns
- Style sheet (web design)
- Web page layout
External links
- Cascading Style Sheets @ Wikipedia
- Introduction to CSS 2.1 @ W3C
- Mastering CSS Principles: A Comprehensive Guide @ Smashing Magazine
- 10 Principles of the CSS Masters @ tuts+
- CSS Architectures: Principles of Code Cleanup @ SitePoint
- CSS Best Practices for Team-Based Development @ Microsoft
- Don’t use IDs in CSS selectors?
- How To Develop Scalable And Maintainable CSS @ Vanseo Design
- DRY CSS - "A don't-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets"
- Principles of writing consistent, idiomatic CSS
- Style Sheets Guide: The Cascade
- On HTML Element Identifiers
- Decoupling HTML From CSS
- CSS Creator - online CSS generator
- CSS Guidelines - "High-level advice and guidelines for writing sane, manageable, scalable CSS"
- CSS Grid Garden
- Four CSS tips that have changed me as a man
- Pure.css - a set of small, responsive CSS modules
