HTML was never intended to contain tags for formatting a document. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
Styles can be written in the <head> of your HTML document or saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
<html>
<body>
<head>
/* comment area including css information */
body {
background-color: #d0e4fe;
}
h1{ color: #993366;
text-align: center;
}
</head>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <head> element
To link to an external style sheet, add this code: <link href="/styles.css" type="text/css" rel="stylesheet"> to the <head> of your document.
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, for example: <base>, <link>, <meta>, <script>, <style>, and<title>.
It looks like this:
<html>
<body>
<head>
<link href="/styles.css" type="text/css" rel="stylesheet">
</head>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>CSS styles
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces ({, }). Each declaration itself consists of a property, followed by a colon (:), and a value, followed by a semi-colon (;).
Like this:
/* comment area including css information */
body {
background-color: #d0e4fe;
}
h1{ color: #993366;
text-align: center;
}
p {
font-family: “Times New Roman”;
font-size: 20px;
}
In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements that match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.
selector [, selector2, ...][:pseudo-class] {
property: value;
[property2: value2;
...]
}
For more on this topic, read:
Beginning HTML, XHTML, CSS, and Javascript
Author: Jon Dockett
Chapter: 7 Cascading Style Sheets
pages: 244-272