Difference between revisions of "CSS Primer"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (Created page with "You might also want to look at the HTML Primer. This is <em>not</em> a complete list of CSS rules and effects. == Selectors == === Classes and IDs === === Chaining togeth...") |
Foxfirefey (Talk | contribs) |
||
| Line 1: | Line 1: | ||
You might also want to look at the [[HTML Primer]]. This is <em>not</em> a complete list of CSS rules and effects. | You might also want to look at the [[HTML Primer]]. This is <em>not</em> a complete list of CSS rules and effects. | ||
| + | |||
| + | = CSS Basics = | ||
== Selectors == | == Selectors == | ||
| Line 9: | Line 11: | ||
=== Direct descendants === | === Direct descendants === | ||
| − | == | + | == Backgrounds == |
| + | |||
| + | * [http://www.w3schools.com/css/pr_background-color.asp background-color] | ||
| + | * [http://www.w3schools.com/css/pr_background-image.asp background-image] | ||
| + | * [http://www.w3schools.com/css/pr_background-repeat.asp background-repeat] | ||
| + | * [http://www.w3schools.com/css/pr_background-attachment.asp background-attachment] | ||
| + | * [http://www.w3schools.com/css/pr_background-position.asp background-position] | ||
| + | * [http://www.w3schools.com/css/css_background.asp background] (all in one shortcut) | ||
| + | |||
| + | == Borders == | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_border-width.asp border-width] | ||
| + | * [http://www.w3schools.com/css/pr_border-style.asp border-style] | ||
| + | * [http://www.w3schools.com/css/pr_border-color.asp border-color] | ||
| + | * [http://www.w3schools.com/css/css_border.asp border] (all in one shorthand) | ||
| + | |||
| + | == Lists == | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_list-style-type.asp list-style-type] | ||
| + | * [http://www.w3schools.com/css/pr_list-style-position.asp list-style-position] | ||
| + | * [http://www.w3schools.com/css/pr_list-style-image.asp list-style-image] | ||
| + | |||
| + | === References === | ||
| + | |||
| + | * [http://www.w3schools.com/css/tryit.asp?filename=trycss_float5 Creating a horizontal menu] | ||
== Positioning == | == Positioning == | ||
| + | |||
| + | === Absolute, Relative, Fixed === | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_class_position.asp position] | ||
=== Floats === | === Floats === | ||
| − | + | * [http://www.w3schools.com/css/pr_class_clear.asp clear] | |
| + | * [http://www.w3schools.com/css/pr_class_float.asp float] | ||
| − | === | + | === References === |
| − | + | * [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://webdesign.about.com/od/advancedcss/a/aa061307.htm Absolute vs. Relative - Explaining CSS Positioning] | ||
| + | * [http://css-tricks.com/absolute-positioning-inside-relative-positioning/ Absolute positioning inside relative positioning] | ||
| + | * [http://www.yourhtmlsource.com/stylesheets/csslayout.html CSS Layout] | ||
| − | == | + | == Block versus inline display == |
| − | = | + | = References = |
| + | * [http://www.findmebyip.com/litmus/ CSS3 Litmus] -- which browsers support what CSS3 attributes (note: does not include FF4) | ||
[[Category: Styles]] | [[Category: Styles]] | ||
Revision as of 21:29, 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
Selectors
Classes and IDs
Chaining together
Direct descendants
Backgrounds
* background-color * background-image * background-repeat * background-attachment * background-position * background (all in one shortcut)
Borders
* border-width * border-style * border-color * border (all in one shorthand)
Lists
* list-style-type * list-style-position * list-style-image
References
Positioning
Absolute, Relative, Fixed
Floats
References
- 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
References
- CSS3 Litmus -- which browsers support what CSS3 attributes (note: does not include FF4)
