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>

The "closer" the style is to the element, the more importance it carries:
linked -> imported -> embedded -> inline -> HTML [element]

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 late 1996)
  • CSS2 (released in May 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.

  • The Power of CSS: A "CSS Styling" contest http://www.mezzoblue.com/zengarden/

Rule = Selector {Declaration}

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

 

Inheritance

The DOC Tree and how your browser reads the box model of nearly every object on a web page document
SELECTORS ~ A way of joining styles to a specific element or a group of element

CSS1 introduced 7 distinct kinds of selector ...

  1. HTML element selectors ~ block, inline, list
  2. .class selectors
  3. #ID selectors
  4. contextual selectors (in CSS2 these are now referred to as Descendent Selectors)
  5. link pseudo class selectors
  6. pseudo element selectors
  7. selector group

... CSS2 amended some of these a little, adding these selectors

  1. dynamic pseudo class selectors
  2. language pseudo class selectors
  3. child selectors
  4. first child selectors
  5. adjacent selectors
  6. attribute selectors
  7. row and column selector

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;}

SHORTHAND Terms:

Text style
Text layout
Background
Border
Margin
Padding
Page layout
Element type
User interface
The Cascading Style Sheets recommendation divides properties into a number of categories. StyleMaster [SM] won't follow these categories rigorously, but rather groups the properties in similar, but differently named categories. The categories of property SM uses are linked and listed to the right,
shorthand term included property
background

background-attachment
backgrond-color
background-image
background-position
background-repeat

border border-color
border-style
border-width
font

font-family
font-size
font-style
font-weight
font-variant
line-height

list-style list-style-image
list-style-position
list-style-type
margin margin-top
margin-right
margin-bottom
margin-left
outline outline-color
outline-style
outline-width
padding padding-top
padding-right
padding-bottom
padding-left
<class> versus <id> <div> versus <span>

the differenct syntax used: a period (.) for class and (#) symbol for id

class is used to define a related group of xHTML elements on a document and means they have the same "rules" applied to them.

  • To create a class you have to give it a name. It must be one word and it's best to use letters and numbers. Do not use periods, underlines & other non-alphanumeric characters when naming classes.
  • A descriptive name is good. One that desribes function rather than presentation: class="detail" rather than class="bluetext"
  • Don't set more than one class per element

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. Why would use use an id over a class? To identify a unique item within a page - for example the navigation, or layout elements.

  • 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>

 

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element.

<SPAN> may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes, at least one of which must be used for the tag to have any affect. You must also include the closing tag </SPAN>, as one would with any inline element.

The DIV element is similar to the SPAN element in function, with the main difference being that <DIV> (short for 'division') is a block-level element.

DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different sections of the page, such as chapters, abstracts, or notes. As with SPAN, the section of the page is defined using the <DIV></DIV> tags with a STYLE, CLASS, or ID attribute.

The following example demonstrates how to change the background colour of a heading and paragraph section in a document.

<P>This paragraph has the normal background colour.</P>
< DIV STYLE="background-color:wheat">
< H3>This heading has a wheat-coloured background.</H3>
< P>So does this paragraph, <SPAN STYLE="background-color:aqua">apart from this bit which is aqua</SPAN>.</P>
< /DIV>
< P>Now we're back to normal.</P>

This paragraph has the normal background colour.

This heading has a wheat-coloured background.
So does this paragraph, apart from this bit which is aqua.

Now we're back to normal.

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

Resources

LINKS I frequently reference:

CSS BOOKS I recommend
  1. Cascading Style Sheets "Designing for the Web" [2nd Edition] by Håkon Wium Lie and Bert Bos
  2. Eric Meyer on CSS "Mastering the Language of Web Design" by Eric A. Meyer
  3. Cascading Style Sheets: Seperating Content from Presentation by O. Briggs, S. Champeon, E. Costello and M Patterson
  4. Cascading Style Sheets - The Designers Edge by Molly E. Holzschlag
  5. Designing CSS Web Pages by Christopher Schmitt

AVOID these CSS1 properties or selectors in NN4x

  • background-attachment
  • background-position
  • border-top, border-left, border-bottom, border-right (use the shorthand border or nothing)
  • display (except display:none)
  • font-variant
  • letter-spacing
  • list-style-image, list-style-position
  • vertical-align
  • word-spacing
  • white-space:nowrap
  • the !important declaration
  • the @import statement (used to implenent complex CSS you want NN4x to avoid)
  • :first-line and :first-letter pseudo-elements.

Checking your CSS

http://www.westciv.com.au/style_master/academy/links.html#checking
:: back to top ::