Cascading Style Sheets (CSS)

4 ways to apply a CSS rule or set of CSS rules to a web page
  Examples
Inline direct application to an <element> <p style="color: #666;">color this</p>
Embedded

place css code directly onto a web document between the <head> and </head> tags
(local affect)

<style type="text/css">
<!--
   p {color: #666;}
//-->
</style>

Linked reference a "linked" css document in a web document between the <head> and </head> tags
(global affect)
<link rel="stylesheet" type="text/css" href="mystylesheet.css" media="screen" />
@import reference an "@import" css document in a web document between the <head> and </head> tags
(global affect)
<style type="text/css" media="screen">@import url(notforNNx.css);</style>

History:

CSS was proposed by Håkon Wium Lie in 1994 and was incharge of its development at the World Wide Consortium (W3C) until 1999

  • CSS1 (released in 1996)
  • CSS2 (released in 1998) important improvements were made to Font Selection, Positioning, Curors and now offers many new options for accessibility and use across various user agents. Automated content allows developers to force the user agent to display specific content elements as well as the layout, look, and feel. Also there is support for special cursors in CSS2 as well as dynamic outlining.

A Rule = Selector {Declaration}

  • Selector = element
  • Declaration = {property: value;}

The Box Model

(a description of how elements/objects are rendered via CSS through many properties)

An element such as <div> can have several properties related to the box model

div {padding: 26px; margin: 55px; border: 1px solid #000000;}

  • padding deals with the inside of the element - inside the border
  • margin specifies the area around the border - outside the border

Selectors ~ A way of joining styles to a specific element or a group of elements

Selector Syntax Examples
generic
typically an html or xhtml element
a

p {font-color: #000;}
h3 {font-style: italic;}

descendant
applies style to elements that are a descendent of another element
a b c div p blockquote{font-weight: bold;}
p strong {font-weight: normal;}
universal (not well supported)
applies style rules to all elements
* * {color: #fc0;}
p * li {display: none;}
child
applies style to the element that is a direct descendent of the parent element
a > b p > blockquote {color: #666;}
div > p {font-weight: bold;}
adjacent-sibling
similar to a descendant selector, but applies only to the immediate element
a + b div p + blockquote {color: #666;}
h1 + p {font-weight: bold;}
attribute
a type of selector that uses the values of an element's attributes to associate

a[attr]
a[attr="value"]
a[attr~="value"]
a[attr!="value"]

a[link] {color: #666;}
a[link="http://www.cssbook.com/"] {font-weight: bold;}
img[title~="Chabon"] {padding: 10px;}
img[title!="Author"] {border: 10px solid #666;}

class
style that can be applied for elements that make use of the class attribute
a.class
.class
p.summary {font-weight: bold;}
.bammo {padding: 30px;}

id
applies a style to any element that makes use of the if attribute

a#id
#id
p#header {font-size: 2em;}
#footer {color: #666;}
<class> versus <id> <div> versus <span>

the syntax difference of the period (.) for <class> and (#) symbol for <id>

  • <id> is used to mark a single instance in a document, much like the name attribute. In fact, the name attribute has been deprecated in favor of the <id> element except in forms, where name is still used to build name="value" pairs for passing data to the server

  • If you use name and are planning to use XHTML, you need to include the identical markup value for the name and <id> attributes in your markup.

    For example: <a href="blah.html" name="same" id="same">Blah</a>