- Forward


Cascading Stylesheets (CSS)
An Introduction


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu

Print

Getting Started
Back SMYC Forward
  • The Purpose of a Document Description Language (e.g., HTML):
    • A way to describe the (usually hierarchical) parts of a document
  • The Purpose of a Stylesheet:
    • Define the form/appearance of a document
Who Is In Control?
Back SMYC Forward
  • The Document:
    • The author
  • The Stylesheet:
    • Agents (e.g., browsers) have a default stylesheet for some documents (e.g., HTML documents)
    • The author may want to define some aspects of the form/appearance of a document
    • The user of a document may want to apply their own stylesheet (e.g., people with vision problems might want to use a large font)
Resolving Potential Conflicts
Back SMYC Forward
  • Precedence:
    • Some kind of precedence/weight must be given to the different stylesheets
  • The Cascade Process in CSS:
    • The Sort Order (in Increasing Precedence)
      • Agent declarations
      • User "normal" declarations
      • Author "normal" declarations
      • Author "important" declarations
      • User "important" declarations
    • Resolving Ties
      • If there are ties, more specific selectors (see below) override less specific selectors
      • If there are still ties, the last declaration is used
Associating a Stylesheet with a Document
Back SMYC Forward
  • HTML:
    • Use a link element with rel="stylesheet", type="text/css", and an appropriate href
    • The media attribute (which can take values like handheld, print, and screen; can include operators like and and or; and can use properties like height and width) can be used to choose between different stylesheets (e.g., media="screen and (max-width:600px)" indicates that this stylesheet should only be loaded for screens with a width of 600px or less)
  • XML:
    • Use a <?xml-stylesheet type="text/css" ?> processing instruction that has an appropriate href
Rules
Back SMYC Forward
  • Parts of a Rule:
    • Selector
    • Declaration
  • Parts of a Declaration:
    • Property Name
    • Property Value
  • Syntax: Click here for information.
    • selector { name:value[;name:value]... }
    • Important rules are denoted by ! important
  • An Example:
    • em {color: red; font-style: italic}
Data Types for Property Values
Back SMYC Forward
  • Numbers:
    • Integers, Real Numbers
  • Lengths:
    • A number followed by a unit identifier (e.g., 12.5pt)
    • Valid unit identifiers include in, cm, mm, pt (1/72 of an inch), pc (12pt), px (0.75pt), vh (1% of the viewport height) and vw (1% of the viewport width).
  • Percentages:
    • A number followed by the percent sign (e.g., 120%)
  • Colors:
    • A color is either a keyword (e.g., red, Background) or an RGB value
    • RGB values can be specified as #RGB (e.g., #f00), #RRGGBB (e.g., #ff0000), or rgb(R,G,B) (e.g., rgb(255,0,0) or rgb(100%,0%,0%))
  • Strings:
    • Can be enclosed in single or double quotes
A Note about Property Values
Back SMYC Forward
  • Result of the Cascade:
    • The cascade need not assign a value to every property
  • Inherited Values:
    • If the cascade does not result in a value being assigned to a property then the value may be inherited from the containing element
    • Each property definition (in the CSS specification) indicates whether or not it is inherited
  • Initial Values:
    • If neither the cascade nor inheritance results in a value being assigned to a property then that property will remain at its initial value
    • Each property definition (in the CSS specification) specifies the initial value
Some Properties
Back SMYC Forward
  • Backgrounds:
    • background-color, background-image
  • Fonts:
    • font-family, font-size, font-style, font-weight
  • Text:
    • text-align, text-decoration, text-indent, text-transform
Some Selectors
Back SMYC Forward
  • Universal:
    • Purpose - Match any element
    • Pattern - *
    • Example - * {color: black}
  • Type:
    • Purpose - Match an element of a particular type
    • Pattern - E
    • Example - em {font-style: italic}
  • Placement:
    • Purpose - Match an element based on the order of the elements (e.g., immediately after, preceded by)
    • Pattern - B+A selects all A elements that are placed immediately after a B element
    • Pattern - B~A selects all A elements that are preceeded by a B element
    • Example - input+label {color: red}
Some Selectors (cont.)
Back SMYC Forward
  • Descendant:
    • Purpose - Match an element of a particular type that is contained in (i.e., a descendant of) an "ancestor" of a particular type
    • Pattern - A D
    • Example - figure figcaption{font-size: 10pt}
  • Child:
    • Purpose - Match an element of a particular type that is immediately contained in (i.e., is a direct descendant/child of) a "parent" element of a particular type
    • Pattern - P > C
    • Example - body > p {font-family: sans-serif}
  • Attribute:
    • Purpose - Match an element of a particular type with a particular attribute value
    • Pattern - E[name op value]
    • op - = (equals), *= (contains), ~= (contains word), ^= (starts with), |= (starts with word), $= (ends with)
    • Example - p[class="opening"] {text-indent: 5ex}
Some Selectors (cont.)
Back SMYC Forward
  • Pseudo-Classes:
    • Purpose - Matches an element of a particular type that is in a particular state
    • Pattern - E:state (where state can be such things as active, enabled, focus, hover, link, valid, visited)
    • Example - a:hover {color: red}
  • Class:
    • Purpose - In HTML, matches an element of a particular type and particular class attribute
    • Pattern - E.C
    • Example - p.opening {text-indent: 0ex}
  • ID:
    • Purpose - In HTML, matches an element of a particular type and particular id attribute
    • Pattern - E#I
    • Example - p#warning {color: red}
Using Selectors Appropriately
Back SMYC Forward
  • Using an id:
    • Only when an element is unique (i.e., will be treated like no other element)
  • Using a class:
    • Only to define a set/subset of elements (i.e., when a set/subset of elements will all be treated the same way)
  • Using Containment:
    • Only when the containment hierarchy in the document determines how elements will be treated
An Example
Back SMYC Forward

An Excerpt from The Design and Implementation of Multimedia Software Click here for a demonstration.

htmlexamples/css/simple.css
 
htmlexamples/css/multimedia.html
 
Some More Properties
Back SMYC Forward
  • Box Properties:
    • Each element in the document can be thought of as a box as follows:
    • css-boxes
    • The size of all four "sides" of these areas are properties (i.e., margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, and border-left)
    • The border-width, border-color, and border-style are also properties
  • Display Properties:
    • Elements can be displayed in a variety of ways - as a block (e.g., paragraph), parts of a line (e.g., words), part of a list, part of a table, etc...
    • This is determined by the display property which can be inline, block, list-item, table-row, table-column, etc...
An Example that uses Margins, Borders, etc...
Back SMYC Forward

A Button Bar Click here for a demonstration.

htmlexamples/css/buttonbar.css
 
htmlexamples/css/buttonbar.html
 
Another Example that uses Margins, Borders, etc...
Back SMYC Forward

A Labeled Input Field Click here for a demonstration.

htmlexamples/css/LabeledInput.css
 
htmlexamples/css/LabeledInput.html
 
Properties for Positioning/Layout
Back SMYC Forward
  • The top, right, bottom and left Properties:
    • Can be used to position an object
  • Approaches:
    • Absolute - the position of the box is specified in absolute coordinates (e.g., pixels)
    • Normal Flow - the position of the box is determined by the position of its "neighbors"
  • Values of the position Property:
    • static - use the normal flow (i.e., ignore top, right, bottom and left)
    • relative - use the normal flow and then offset the box
    • absolute - top, right, bottom and left specify the position
An Example that uses Positioning
Back SMYC Forward

Sticky Notes Click here for a demonstration.

htmlexamples/css/stickynote.css
 
htmlexamples/css/stickynote.html
 
An Example that uses Pseudo-Classes and Positioning
Back SMYC Forward

An Input Field with an Internal Label Click here for a demonstration.

htmlexamples/css/InternalLabel.css
 
htmlexamples/css/InternalLabel.html
 
A Complicated Example that uses Display and Positioning
Back SMYC Forward

A Menu Bar Click here for a demonstration.

htmlexamples/css/menus/slideright.css
 
htmlexamples/css/menus/menus-pure.html
 
There's Always More to Learn
Back -