Difference between revisions of "CSS tutorial"
(Created page with 'This is a CSS tutorial for those who are just starting out with S2 CSS and need a primer. == What is CSS? == == CSS tools == The following tools are recommended to help yo...') |
Foxfirefey (Talk | contribs) |
||
| (4 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Category: S2 CSS]] | ||
| + | |||
This is a CSS tutorial for those who are just starting out with [[S2 CSS]] and need a primer. | This is a CSS tutorial for those who are just starting out with [[S2 CSS]] and need a primer. | ||
== What is CSS? == | == 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 [http://www.w3.org/TR/CSS2/ CSS 2.0 Specification]. | ||
== CSS tools == | == CSS tools == | ||
| Line 9: | Line 43: | ||
=== Firefox plugins === | === Firefox plugins === | ||
| − | * CSSViewer | + | * [https://addons.mozilla.org/en-US/firefox/addon/2104 CSSViewer] |
| − | * Firebug | + | * [http://getfirebug.com/ Firebug] |
| + | * [https://addons.mozilla.org/en-US/firefox/addon/60 Web Developer] | ||
| + | |||
| + | [[Category: Styles]] | ||
Latest revision as of 05:08, 30 March 2011
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.
