Difference between revisions of "CSS Primer"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) |
(→Font and Text: more useful props) |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 8: | Line 8: | ||
This is a summary on the types of units available when you're trying to say what size something is: [http://www.w3schools.com/css/css_units.asp CSS Units] | This is a summary on the types of units available when you're trying to say what size something is: [http://www.w3schools.com/css/css_units.asp CSS Units] | ||
| + | |||
| + | == Reset == | ||
| + | |||
| + | A lot of the time you want to "reset" browser defaults to the same, so that there will be less variation from browser to browser and your rules will be more robust. | ||
| + | |||
| + | * [http://meyerweb.com/eric/tools/css/reset/ Meyer's Reset CSS] | ||
== Dimensions == | == Dimensions == | ||
| Line 19: | Line 25: | ||
== Margins and Padding == | == Margins and Padding == | ||
| + | |||
| + | These are mainly used with block elements. | ||
* [http://www.w3schools.com/css/css_margin.asp margin] | * [http://www.w3schools.com/css/css_margin.asp margin] | ||
| Line 28: | Line 36: | ||
* [http://www.w3schools.com/css/pr_font_font-size.asp font-size] | * [http://www.w3schools.com/css/pr_font_font-size.asp font-size] | ||
* [http://www.w3schools.com/css/pr_font_font-style.asp font-style] | * [http://www.w3schools.com/css/pr_font_font-style.asp font-style] | ||
| + | * [http://www.w3schools.com/css/pr_font_font-variant.asp font-variant] | ||
* [http://www.w3schools.com/css/pr_font_weight.asp font-weight] | * [http://www.w3schools.com/css/pr_font_weight.asp font-weight] | ||
* [http://www.w3schools.com/css/pr_font_font.asp font] (shorthand) | * [http://www.w3schools.com/css/pr_font_font.asp font] (shorthand) | ||
| Line 34: | Line 43: | ||
* [http://www.w3schools.com/css/pr_dim_line-height.asp line-height] | * [http://www.w3schools.com/css/pr_dim_line-height.asp line-height] | ||
* [http://www.w3schools.com/css/pr_text_letter-spacing.asp letter-spacing] | * [http://www.w3schools.com/css/pr_text_letter-spacing.asp letter-spacing] | ||
| + | * [http://www.w3schools.com/css/pr_text_word-spacing.asp word-spacing] | ||
* [http://www.w3schools.com/css/pr_text_color.asp color] | * [http://www.w3schools.com/css/pr_text_color.asp color] | ||
* [http://www.w3schools.com/css/pr_text_text-transform.asp text-transform] | * [http://www.w3schools.com/css/pr_text_text-transform.asp text-transform] | ||
Latest revision as of 10:05, 24 April 2011
You might also want to look at the HTML Primer. This is not a complete list of CSS rules and effects--it's mostly organized links to better references.
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.
This is a summary on the types of units available when you're trying to say what size something is: CSS Units
Reset
A lot of the time you want to "reset" browser defaults to the same, so that there will be less variation from browser to browser and your rules will be more robust.
Dimensions
Margins and Padding
These are mainly used with block elements.
Font and Text
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font (shorthand)
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)
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
Lists
Tables
References
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)
