Difference between revisions of "CSS tutorial"
(→What is CSS?) |
(→Firefox plugins) |
||
| Line 43: | Line 43: | ||
* CSSViewer | * CSSViewer | ||
* Firebug | * Firebug | ||
| + | |||
| + | [[Category: Styles]] | ||
Revision as of 01:11, 27 April 2009
This is a CSS tutorial for those who are just starting out with S2 CSS and need a primer.
What is CSS?
CSS (Cascading Style Sheets) are used to provide visual styling to web content. The idea is that a webpage is marked up in HTML that describes what the content *is*, while CSS describes what the content *looks like*. This means that you can provide a single webpage with exactly the same HTML code and, if it's marked up properly, different people can experience it in different ways by applying different stylesheets to it.
An example:
Your HTML code says
<h1>Welcome to my journal</h1>
Your CSS says:
h1: { color: #ff0000; }
Result: the heading "Welcome to my journal" will be displayed in red.
CSS can be used to specify any of:
- foreground and background colours
- fonts, sizes, etc
- positioning on the screen
- spacing between lines and characters
- borders, underlines
- spacing, margins
- ... and more
These can be applied to any element on the page, either by HTML tag (as in the h1 example above) or by class of element (many elements with the same role, eg. <div class="entry"> which is used for each entry on a DW journal page), or by the id of a single specific element.
The "cascading" in Cascading Style Sheets refers to the nested relationship between HTML elements. All viewable parts of the page are nested within the <body> element, and so on down through layout sections, paragraphs, right through to the very smallest elements. When you apply a CSS style to any element on the page, that styling "cascades" down through any children, allowing you to write the minimum amount of CSS necessary to style the whole page.
Learning CSS
The official source of CSS documentation is the W3C. Check out the CSS 2.0 Specification.
CSS tools
The following tools are recommended to help you explore and understand the CSS on any webpage.
Firefox plugins
- CSSViewer
- Firebug
