Difference between revisions of "CSS Primer"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) m (→Block versus inline display) |
Foxfirefey (Talk | contribs) m (→CSS Basics) |
||
| Line 3: | Line 3: | ||
= CSS Basics = | = CSS Basics = | ||
| − | = | + | [http://www.slideshare.net/maxdesign/css-cascade-1658158?from=ss_embed CSS Cascade] -- a slideshow that explains how the browser decides which rules to apply. |
| − | + | Use this tutorial to get a good handle on CSS selectors: [http://css.maxdesign.com.au/selectutorial/ Selectutorial: CSS selectors]. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
== Backgrounds == | == Backgrounds == | ||
| + | |||
| + | These properties | ||
* [http://www.w3schools.com/css/pr_background-color.asp background-color] | * [http://www.w3schools.com/css/pr_background-color.asp background-color] | ||
| Line 19: | Line 17: | ||
* [http://www.w3schools.com/css/pr_background-position.asp background-position] | * [http://www.w3schools.com/css/pr_background-position.asp background-position] | ||
* [http://www.w3schools.com/css/css_background.asp background] (all in one shortcut) | * [http://www.w3schools.com/css/css_background.asp background] (all in one shortcut) | ||
| + | |||
| + | Modern browsers support multiple background image declarations: | ||
| + | |||
| + | * [http://www.zenelements.com/blog/css3-background-images/ CSS3 Background Images] | ||
== Borders == | == Borders == | ||
| Line 36: | Line 38: | ||
* [http://www.w3schools.com/css/tryit.asp?filename=trycss_float5 Creating a horizontal menu] | * [http://www.w3schools.com/css/tryit.asp?filename=trycss_float5 Creating a horizontal menu] | ||
| + | * [http://css.maxdesign.com.au/listutorial/index.htm Listutorial] | ||
| + | * [http://css.maxdesign.com.au/listamatic/index.htm Listamatic] and [http://css.maxdesign.com.au/listamatic2/index.htm Listamatic2] | ||
== Positioning == | == Positioning == | ||
| Line 50: | Line 54: | ||
=== References === | === References === | ||
| + | * [http://www.alistapart.com/articles/css-positioning-101/ CSS Positioning 101] | ||
| + | * [http://www.alistapart.com/articles/css-floats-101/ CSS Floats 101] | ||
| + | * [http://www.w3schools.com/css/css_positioning.asp CSS Positioning] | ||
* [http://css.maxdesign.com.au/floatutorial/ Step by step tutorial on floats] | * [http://css.maxdesign.com.au/floatutorial/ Step by step tutorial on floats] | ||
* [http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ CSS Float Theory: Things You Should Know] | * [http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ CSS Float Theory: Things You Should Know] | ||
Revision as of 21:47, 23 April 2011
You might also want to look at the HTML Primer. This is not a complete list of CSS rules and effects.
Contents
CSS Basics
CSS Cascade -- a slideshow that explains how the browser decides which rules to apply.
Use this tutorial to get a good handle on CSS selectors: Selectutorial: CSS selectors.
Backgrounds
These properties
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (all in one shortcut)
Modern browsers support multiple background image declarations:
Borders
- border-width
- border-style
- border-color
- border (all in one shorthand)
Lists
References
Positioning
Absolute, Relative, Fixed
Floats
References
- CSS Positioning 101
- CSS Floats 101
- CSS Positioning
- Step by step tutorial on floats
- CSS Float Theory: Things You Should Know
- Absolute vs. Relative - Explaining CSS Positioning
- Absolute positioning inside relative positioning
- CSS Layout
Block versus inline display
- display -- You can make a span display like a block element, or a div display like an inline element, with this rule.
References
- CSS3 Litmus -- which browsers support what CSS3 attributes (note: does not include FF4)
