Cascading Style Sheets

CSS Selectors

• p - specifies any p element
• p, h1 - specifies any p element or any h1 element
• p i b - specifies a b element within an i element with a p element
• * - specifies any element
• div > p - specifies a p element that's a child of a div element
• p + b - specifies a b element that is an adjacent sibling of a p element
• .classname - specifies an element using style="classname"
• #idname - specifies an element using id="idname"

Selectors: Named and Contextual Styles

• named styles
  • add the following to the style1.css file

    #yellow1 {color: yellow}

  • add the following to your test file

    <p class="BOLDBLUE" id="yellow1">This is my test
    sheet<b> for </b> my external style.</p>

• contextual styles
  • p {color:green;} sets paragraphs to green
  • p em {color:magenta;} sets emphasized text within paragraphs to magenta
  • you can also use contextual selection criteria for divisions, classes, etc.
    • div p.magentaclass b {font-size:18pt;}
    • all bold items within magentaclass paragraphs within a division will be set to 18 point font

CSS Pseudo-classes

• :link
• :visit
• :hover
• :active
• :focus
• :lang()
• :left
• :right
• :first
• :first-child

CSS Pseudo-elements

• :first-letter
• :first-line
• :before
• :after

Specificity

• simple selector = 1
• class selector = 10
• ID selector = 100
• inherited values = 0
• !important has highest value
• Examples:

  p                1
  p.blue          11
  p b              2
  p.blue b.pink   22
  #yellow        100

Additional Notes

• sometimes you want to specify a particular style for an arbitrary piece of content that is not marked by tags
  • <span></span> takes care of that
• formatting block-level elements
  • block-level elements are those that start on a new line
  • left margin takes precedence over right margin, which takes precedence over width
  • float works like alignment to right or left margin
• width, margins, border characteristics, padding are not inherited by child elements
• comments can be placed in style sheets with C-style comments
• float is for aligning child elements within parents
• align-text is for aligning text within an element
• background-image:url(picture.gif)
  • interpreted relative to style sheet, not document
• color names:
  • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Links to CSS samples

• Embedded CSS Demonstration
• Inline CSS Demonstration
• Linked CSS Demonstration Using a Class
• Linked CSS Demonstration Using a Named Style
• Contextual CSS and Span Tag
• CSS Positioning Demonstration
• Another CSS Positioning Demonstration

Previous: CSS Properties

Next: Introductory JavaScript