CSS Tutorials and References

These CSS Tutorials at sitepoint  are an excellent starting point for those who want to learn and use CSS in web development. CSS is a presentation language used to describe the presentation and layout of elements in HTML and XHTML pages. CSS can also be applied to any kind of XML document. These CSS tutorials and references provide users with information on CSS properties, CSS selectors, CSS At-rules, CSS concepts and live examples of using CSS elements.


CSS Properties
These tutorials discusses properties of CSS elements such as boxes, list, table, layout, typographical, user interface and color and backgrounds. Each of these properties is explained in detail, though most of them are self explanatory.

 - Box Properties
 - Layout Properties
 - List Properties
 - Table Properties
 - Color and Backgrounds
 - Typographical Properties
 - Generated Content
 - User Interface Properties
 - Paged Media Properties
 - Vendor-specific Properties
 - Alphabetic Property Index


CSS Selectors
Strictly speaking, a selector is a pattern and is used to match a set of elements in an HTML or XHTML document. This section explains how selectors are used in CSS to create simple patterns

 - Universal Selector
 - Element Type Selector
 - Class Selector
 - ID Selector
 - Attribute Selector
 - Selector Grouping
 - Combinators
 - Pseudo-classes
 - Pseudo-elements


CSS At-rules
This CSSf tutorial provides information on At-rules that provide instructions and directives to the CSS parser. The At-rules elements are explained with their respective examples.

 - @charset
 - @import
 - @media
 - @page
 - @font-face
 - @namespace


CSS Concepts
These tutorials explains some key concepts in CSS such as syntax and nomenclature, inheritance, layout and formatting, filters and hacks and the basic differences between HTML and XHTML.

 - What Is CSS?
 - General Syntax and Nomenclature
 - The Cascade, Specificity, and Inheritance
 - CSS Layout and Formatting
 - Workarounds, Filters, and Hacks
 - Differences Between HTML and XHTML


CSS Live Examples
This section is a quick reference point for CSS properties and live examples are provided for most of them.

  CSS Properties
    Box Properties
      Dimensions
       - height
       - min-height
       - max-height
       - width
       - min-width
       - max-width
      Margins
       - margin-top
       - margin-right
       - margin-bottom
       - margin-left
       - margin
      Padding
       - padding-top
       - padding-right
       - padding-bottom
       - padding-left
       - padding
      Borders and Outlines
       - border-top-color
       - border-top-style
       - border-top-width
       - border-top
       - border-right-color
       - border-right-style
       - border-right-width
       - border-right
       - border-bottom-color
       - border-bottom-style
       - border-bottom-width
       - border-bottom
       - border-left-color
       - border-left-style
       - border-left-width
       - border-left
       - border-color
       - border-style
       - border-width
       - border
       - outline-color
       - outline-style
       - outline-width
       - outline
    Layout Properties
     - display
     - position
     - float
     - clear
     - visibility
     - top
     - right
     - bottom
     - left
     - z-index
     - overflow
     - clip
    List Properties
     - list-style-type
     - list-style-position
     - list-style-image
     - list-style
    Table Properties
     - table-layout
     - border-collapse
     - border-spacing
     - empty-cells
     - caption-side
    Color and Backgrounds
     - background-color
     - background-image
     - background-repeat
     - background-position
     - background-attachment
     - background
     - color
    Typographical Properties
     - font-family
     - font-size
     - font-weight
     - font-style
     - font-variant
     - font
     - letter-spacing
     - word-spacing
     - line-height
     - text-align
     - text-decoration
     - text-indent
     - text-transform
     - text-shadow
     - vertical-align
     - white-space
     - direction
     - unicode-bidi
    Generated Content
     - content
     - counter-increment
     - counter-reset
     - quotes
    User Interface Properties
     - cursor
    Vendor-specific Properties
      Mozilla Extensions
       - -moz-border-radius
       - -moz-box-sizing
       - The display Property Value: -moz-inline-box
      Internet Explorer Extensions
       - zoom
       - filter
       - behavior


CSS Selectors:
 - Universal Selector
 - Element Type Selector
 - Class Selector
 - ID Selector
 - Attribute Selector
   - CSS3 Attribute Selectors
 - Selector Grouping
  Combinators
   - Descendant Selector
   - Child Selector
   - Adjacent Sibling Selector
   - General Sibling Selector
  Pseudo-classes
   - :link
   - :visited
   - :active
   - :hover
   - :focus
   - :first-child
   - :lang(C)
    CSS3 Pseudo-classes
     - :nth-child(N)
     - :nth-last-child(N)
     - :nth-of-type(N)
     - :nth-last-of-type(N)
     - :last-child
     - :first-of-type
     - :last-of-type
     - :only-child
     - :only-of-type
     - :root
     - :empty
     - :target
     - :enabled
     - :disabled
     - :checked Pseudo-class
     - :not(S)
  Pseudo-elements
   - :first-letter
   - :first-line
   - :before
   - :after
   - ::selection


CSS Concepts:
  The Cascade, Specificity, and Inheritance
   - The Cascade
   - !important Declarations
   - Specificity
   - Inheritance
     - The CSS Property Value inherit