Chapter 2. CSS
CSS is a language for defining how the content of a Web page should
appear. Originally, a Web designer would define the appearance of
a Web page within HTML, but this broke down as page designs grew
more complex. For example, if you want all the anchors (hyperlinks)
of a page to be displayed using red text, the HTML would need to
nest inside every <a> tag an element saying to display the
contents in red. By contrast, CSS provides a way to say just once
that every <a> element should be drawn in red.
2.1. A simple CSS rule
To say in CSS that every <a> element should be drawn in red,
we would create a CSS file containing the following rule.
a { color: red; }A rule consists first of a
selector identifying the elements to which the rule
applies following by
a set of braces containing properties and the respective
values. In this example, the rule's selector chooses every
<a> element; the color property is set to red
for each such element.
To make this work, we need to include a link to the CSS file
within the HTML file. We do this by including a <link>
element within the <head> element, as illustrated in
the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple example</title>
<link rel="stylesheet" href="ex-style.css" type="text/css">
</head>
<body>
<p>These links to <a href="http://www.wikipedia.org/">Wikipedia</a>
and to <a href="http://www.google.com">Google</a> will now be
drawn in red.</p>
</body>
</html>
The <link> element tells the browser to load the
file “ex-style.css” and apply the CSS rules
provided within.
2.2. More complex selectors
We won't need to learn the full spectrum of properties one can use in CSS, but we will have reason to know more about what one can use for the selectors.
We already saw one simple selector — “a”
— that selects all elements of a particular type.
But what if we want to select a particular element?
In this case, we can give the element an identifier in the HTML
code, and then our CSS can indicate a rule that is associated
just with that identifier.
To have a selector based on an identifier, we use the sharp symbol
‘#’:
p#ident-defn { color: blue }Or we can select all elements with a particular class by using a period to separate the element type from the class name.
em.dfn { font-weight: bold; color: green }We can omit the element type if we want to select any element with that particular ID or class (regardless of tag type).
#ident-defn { color: blue }
.dfn { font-weight: bold; color: green }
Finally, you'll sometimes want to select elements nested within others. You can do this by simply listing one selector after another; this will say to find all instances of the first selector, and find each subinstance of the second anywhere within the first (even if it's a great-grandchild), and apply the rule to each of those subinstances.
#ident-defn em { font-weight: bold }In this case, we're saying to find the element whose
identifier is ident-defn, and then to make any
<em> element nested within it be displayed in
boldface.
CSS is a very rich language, allowing a very broad range of selectors and a rich set of properties for configuring how each element is positioned and formatted. But this is all we'll need for our studies.