Difference between revisions of "CSS Primer"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) m (→References) |
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--it's mostly organized links to better references. |
= CSS Basics = | = CSS Basics = | ||
| Line 6: | Line 6: | ||
Use this tutorial to get a good handle on CSS selectors: [http://css.maxdesign.com.au/selectutorial/ Selectutorial: CSS selectors]. | Use this tutorial to get a good handle on CSS selectors: [http://css.maxdesign.com.au/selectutorial/ Selectutorial: CSS selectors]. | ||
| + | |||
| + | 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] | ||
| + | |||
| + | == Dimensions == | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_dim_height.asp height] | ||
| + | * [http://www.w3schools.com/css/pr_dim_max-height.asp max-height] | ||
| + | * [http://www.w3schools.com/css/pr_dim_min-height.asp min-height] | ||
| + | * [http://www.w3schools.com/css/pr_dim_width.asp width] | ||
| + | * [http://www.w3schools.com/css/pr_dim_max-width.asp max-width] | ||
| + | * [http://www.w3schools.com/css/pr_dim_min-width.asp min-width] | ||
| + | |||
| + | == Margins and Padding == | ||
| + | |||
| + | * [http://www.w3schools.com/css/css_margin.asp margin] | ||
| + | * [http://www.w3schools.com/css/css_padding.asp padding] | ||
| + | |||
| + | == Font and Text == | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_font_font-family.asp font-family] | ||
| + | * [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_weight.asp font-weight] | ||
| + | * [http://www.w3schools.com/css/pr_font_font.asp font] (shorthand) | ||
| + | |||
| + | * [http://www.w3schools.com/css/pr_text_text-align.asp text-align] | ||
| + | * [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_color.asp color] | ||
| + | * [http://www.w3schools.com/css/pr_text_text-transform.asp text-transform] | ||
| + | * [http://www.w3schools.com/css/pr_text_text-decoration.asp text-decoration] | ||
== Backgrounds == | == Backgrounds == | ||
| Line 28: | Line 59: | ||
* [http://www.w3schools.com/css/pr_border-color.asp border-color] | * [http://www.w3schools.com/css/pr_border-color.asp border-color] | ||
* [http://www.w3schools.com/css/css_border.asp border] (all in one shorthand) | * [http://www.w3schools.com/css/css_border.asp border] (all in one shorthand) | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== Positioning == | == Positioning == | ||
| Line 62: | Line 81: | ||
* [http://css-tricks.com/absolute-positioning-inside-relative-positioning/ Absolute positioning inside relative positioning] | * [http://css-tricks.com/absolute-positioning-inside-relative-positioning/ Absolute positioning inside relative positioning] | ||
* [http://www.yourhtmlsource.com/stylesheets/csslayout.html CSS Layout] | * [http://www.yourhtmlsource.com/stylesheets/csslayout.html CSS Layout] | ||
| + | |||
| + | == 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] | ||
| + | |||
| + | == Tables == | ||
| + | |||
| + | * [http://www.w3schools.com/css/css_table.asp CSS Styling Tables] | ||
| + | * [http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ Top 10 CSS Table Designs] | ||
| + | |||
| + | === References === | ||
| + | |||
| + | * [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] | ||
| + | |||
== Block versus inline display == | == Block versus inline display == | ||
| Line 74: | Line 111: | ||
* [http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices] | * [http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices] | ||
* [http://www.csszengarden.com/ CSS Zen Garden] | * [http://www.csszengarden.com/ CSS Zen Garden] | ||
| + | * [http://www.dustindiaz.com/css-shorthand/ CSS Shorthand Guide] | ||
[[Category: Styles]] | [[Category: Styles]] | ||
Revision as of 22:28, 23 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
Dimensions
Margins and Padding
Font and Text
- font-family
- font-size
- font-style
- 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)
