Difference between revisions of "CSS Primer"

From Dreamwidth Notes
Jump to: navigation, search
m
(→‎Font and Text: more useful props)
 
(7 intermediate revisions by one other user not shown)
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 =
  
−
== Selectors ==
+
[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.
  
−
=== Classes and IDs ===
+
Use this tutorial to get a good handle on CSS selectors: [http://css.maxdesign.com.au/selectutorial/ Selectutorial: CSS selectors].
  
−
=== Chaining together ===
+
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]
  
−
=== Direct descendants ===
+
== 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 ==
 +
 
 +
* [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 ==
 +
 
 +
These are mainly used with block elements.
 +
 
 +
* [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_font-variant.asp font-variant]
 +
* [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_word-spacing.asp word-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 ==
 +
 +
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 58:
 
* [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 26: Line 69:
 
* [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)
−
 
−
== 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 ==
Line 50: Line 83:
 
=== 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]
Line 55: Line 91:
 
* [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 ==
 +
 +
* [http://www.w3schools.com/css/pr_class_display.asp display] -- You can make a span display like a block element, or a div display like an inline element, with this rule.
  
 
= References =
 
= References =
  
 
* [http://www.findmebyip.com/litmus/ CSS3 Litmus] -- which browsers support what CSS3 attributes (note: does not include FF4)
 
* [http://www.findmebyip.com/litmus/ CSS3 Litmus] -- which browsers support what CSS3 attributes (note: does not include FF4)
 +
 +
* [http://www.alistapart.com/topics/topic/css/ A List Apart -- CSS]
 +
* [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.dustindiaz.com/css-shorthand/ CSS Shorthand Guide]
 +
  
 
[[Category: Styles]]
 
[[Category: Styles]]

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.

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

Backgrounds

These properties

Modern browsers support multiple background image declarations:

Borders

Positioning

Absolute, Relative, Fixed

Floats

References

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)
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=CSS_Primer&oldid=9711"