Introduction to CSS

CSS Building Blocks
Working With Stylesheets
Defining Selectors

CSS Building Blocks

Working With Stylesheets

Defining Selectors

Constructing a style rule
Constructing selectors
A Catalogue of style selectors

Constructing a style rule

  Single property:

h1 { color: red; }

  Multiple properties:

h1 { color: red; background: yellow; }

Selector

  Selector: name of an element h1

Declaration

  Declaration: ends in semicolon

h1 { decaration; }

Property

  Property: e.g. color

Value

  Value: separated from property by a colon: color: red

Constructing selectors

  A selector can define up to five different criteria for choosing the elements that should be formatted:
      The type or name of an element
      The context in which the element is found
      The class or id of an element
      The pseudo-class of an element or the pseudo-element itself
      Whether an element has certain attributes and values.
  A selector can include any combination of these criteria.
  In addition you can apply the same declaration to a group of selectors.

Another Example

To illustrate the various style selectors, and how the work, we apply the simple style declaration color: red, to various selections of an example document.

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title>Antoni Gaud&iacute; - Introduction</title>
	<link rel="stylesheet" type="text/css" media="screen" href="nostyle.css" />
</head>
<body>
<h1>Antoni Gaud&iacute;</h1>
<div id="gaudi">
<p>Many tourists are drawn to Barcelona to see Antoni Gaud&iacute's incredible architecture. </p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/flash/home/GO.htm">celebrated</a> the 150th anniversary of Gaud&iacute;'s birth in 2002.</p>
 
<div class="works">
<h2>La Casa Mil&agrave;</h2>
<p>Gaud&iacute;'s work was essentially useful. La Casa Mil&agrave; is an apartment building and <em>real people</em> live there.</p>
</div>
 
<div class="works">
<h2>La Sagrada Fam&iacute;lia</h2>
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona. </p>
</div>
 
</div>
 
</body>
</html>
 
<note>
It is important to note that only the style declaration is changing!
</note>

A Catalogue of style selectors

Selecting elements by name

This selector will choose all of the h2 elements in the document:

h2 { color: red; }

Result

Selecting elements by id

This selector will choose the div element with an id equal to “gaudi”:

div#gaudi { color: red; }

Result

===== Selecting elements by class This selector will choose all of the div elements which have a class attribute equal to “works”:

div.works { color: red; }

Result

Selecting the descendants of an element

This space between div#gaudi and p means that this selector will find any p element that is a descendent of the gaudi div, regardless of its generation. This is an ancestor selector:

div#gaudi p { color: red; }

Result

Selecting elements by parent

This descendent selector will only choose those p elements that are children of the gaudi div. In order to qualify, they may not be contained within any other element:

div#gaudi > p { color: red; }

Result Explanation

Selecting the first child element

This selector chooses only the p element that is the first child of the gaudi div:

div#gaudi p:first-child { color: red; }

Result

Selecting sibling elements

This selector chooses only those p elements which directly follow a sibling p element:

div#gaudi p+p { color: red; }

Result

Pseudo-elements: first line of an element This selector will choose the first line of each p element:

p:first-line { color: red; }

Result

===== Pseudo-elements: first letter of an element This selector will choose the first letter of each p element:

p:first-letter { color: red; }

Result

Pseudo-elements: based on state

You can't specify in code what state a link (a element) will have, it is controlled by you visitors. You can however give visual feedback based on the state by use of the following pseudo-elements:

a:link { color: red; } a:visited { color: yellow; } a:focus { color: olive; } a:hover { color: green; } a:active { color: blue; }

Result

Explanation

Selecting elements based on attributes

This selector will choose the div elements which have a class attribute equal to works:

div[class='works'] { color: red; }

Result

  Note this selector is equivalent to div.works.

Groups of elements

You can select any number of individual selectors, as long as you separate each with a comma:

h1, h2 { color: red; }

Result

Combining selectors

You can also combine selectors each you need to be particularly precise:

div.works p em:first-letter { color: red }

Result

Explanation This selector chooses the first letter of any em element that is within any p elements that are part of a div that is of class works. It doesn't seem to work!

ICCT Wiki

Table of Contents

Introduction to CSS