Understanding CSS - Part 2

by M. Douglas Wray

Click here, Press key to advance.

Defining CSS - Cascading Style Sheets

  • Cascading means that rules cascade
    from parent to child elements.
  • Styles means that we are applying a look
    to what we've defined in HTML.
  • Sheets means the styling rules are
    in a separate 'sheet' or 'style sheet' file.

Precedence

The order in which style rules apply.

  • Inline
  • Internal style sheet
  • External style sheets (in load order)

Six Concepts

  • Definition vs Display - HTML defines content, CSS defines look
  • Block vs Inline - Block elements expand, Inline elements shrink
  • CSS Box Model - padding, margins, position, border
  • Classes vs IDs - IDs are unique, Classes can reoccur
  • Page Flow - Left to right, top to bottom unless floated
  • Inheritance - contents inherit container attributes

CSS Syntax

element { attribute1: value1; }
element child { attribute1: value1; attribute2: value2; }

#topnav ul { list-style: none; color:green; }
ul li { color:green; padding: 5px; }

Spaces are okay (mostly)

body {font-family:Verdana,Arial;font-size:1em;}
body { font-family: Verdana, Arial; font-size: 1em; }

CSS Selectors

  • tag
  • ID
  • class
  • pseudo-class

CSS Selector - Tag

Any 'block' element, p, img, table, etc.

<p style="border:1px solid red; padding:4px; color:blue;">Visible text</p>

Visible text

CSS Selector - ID

This style rule: #topnav { attributes }
applies to this element - <div id="topnav">

IDs must be unique.

CSS Selector - class

This style rule: p.alert { attributes }
can only apply to paragraphs <p class="alert">

This style rule: .alert { attributes }
can only apply to any element
<p class="alert"> <li class="alert"> <td class="alert">

More on CSS Selectors

CSS Selector - pseudo-class

<a href="#">

Anchors have four pseudo-classes:
a:link | a:visited | a:hover | a:active

Define them in that order.

a:link, a:visited { attributes }
a:hover, a:active { attributes }

Float property and its use

Step by Step

JavaScript and the DOM

DOM = Document Object Model