Web Programming/CSS

Objectives:

style common properties of HTML elements using basic CSS rules
identify the order in which CSS rules are applied
resolve conflicts in the rules
draw web pages by tracing HTML and CSS source code

Resources:

slides for chapter 3
Tutorials on w3schools
CSS reference on w3schools
198.209.19.99/~blu/book_examples/ch03-css-files/index.html

CSS Syntax

CSS stands for Cascading Style Sheet. A CSS file is an external/additional file attached to an HTML file for styling the web page. Note that the syntax for CSS files is different from the HTML syntax. A CSS file consists of a set of rules, when applied, will affect the look and feel of the page it associates with. Each rule starts with a selector that will select a number of elements on the page and the body of the rule specifies which property should have what value. The general format of a CSS rule is as follows:

selector {
  property: value;
  property: value;
  ...
  property: value;
}

The following example rule selects all paragraph elements and set the text color to red and center align the text in the paragraphs.

p {
     color: red;
     text-align: center;
}

You can see a running example at [1].

As shown in the example, the body of a rule can have a number of statements/declarations terminated by ";". Each statement is a property name and value pair (delimited by a ":").

There are three ways of attaching a style sheet to a file:

external style sheet file (pointed to by a <link> element in the <head>)
internal style sheet (as a <style> element in the <head> )
inline style (as attributes of elements)

The following example shows how an external CSS file is linked to an HTML. For other examples visit CSS Howtos.

...
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
...

Commonly Used Properties

color

See different way to set font color in this example.

font

You can use this site to find all supported font families in your browser.

Style Text

font

position

decoration and transformation

CSS3 shadow

text-shadow

float image

float

Cascading Rule

CSS rules can also be embedded into HTML code as the "style" attribute (inline style) for tags or as a script element in the head element. What happens if we have multiple rules specified in different places but all of them affecting the same element on the page? This is where the cascading (precedence) rule comes play. The following are CSS locations in a descending order in terms of their priorities:

rules in the style attribute of a tag
rules in the script elements in the head
rules in an external CSS file
rules inherited to from parent elements
rules known to the browser as default

For example, the inline styles will always take precedence over other styles. If there is no inline style set for an element the browser will attempt to use CSS rules in the script element.

When two rules from the same location set the same property to different values it is a conflict, which is resolved by letting a more specific (tightly matching) rule override a more general (or inherited) rule and if the two rules match equally tightly the one appears last in the source to take effect.

rules set by id selectors are most specific.
rules set by class selectors, attribute selectors, or pseudo-class selectors are less specific.
rules set by tag selectors or pseudo-element selectors are the lest specific.

CSS Pseudo-classes

Pseduo-classes allow us to apply styles to elements at a particular state, for instance the following rule only takes effect on the selected elements when they are moused over. Check out this reference for details.

a:hover {
  background-color: red;
}

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element. The following two examples are in CSS2 and CSS3 syntax respectively. Check out this reference for details.

p:first-line {
    color: #ff0000;
}

p::first-line {
    color: #ff0000;
}

CSS3

CSS2 added new selectors, such as nth-child, inline-block, :not, +, and the ability to embed fonts in a page. It also provides built-in support for multi-column layouts, transparency/opacity, color gradients, shadows, rounded corners/borders, border-radius, animations/transitions, and affine transformations (scaling, rotation, perspective).

CSS3 Colors

CSS3 provides three new ways to specify colors. Check out this reference for details.

rgba(red%, green%, blue%, opacity-value)
hsl(hue-degrees, saturation%, lightness%)
hsla(hue-degrees, saturation%, lightness%, opacity-value)