HTML and CSS Reference
In-Depth Information
<footer>
<hr />
Start Here! Build Windows® 8 Applications with HTML5 and JavaScript
</footer>
</body>
</html>
You have just given the page a bit of content. You have not yet done anything to link the HTML
page with any style sheet. To do so, edit the
HEAD
element of the HTML page as follows:
<head>
<title>CSS Example</title>
<link href="demo1.css" rel="stylesheet" />
</head>
Now when rendering the page, the browser will use the information contained in the style sheet to
adjust the appearance of elements.
Note
In the rest of the chapter and the topic, you'll always be using style sheets via
separate CSS files. Unless otherwise noted, you won't be using any more inline styling or
embedded styles.
Selecting elements to style
The next step is learning how to write a style sheet. A style sheet consists of a sequence of commands
defined according to the following pattern:
selector {property1: value; property2: value2; ...}
The
selector
is an expression that identifies the element (or the elements) to be styled. A selector
can identify a single element through its unique ID, all elements with a given tag (for example, all
DIV
elements), or all elements sharing the same CSS class. As you'll see in a moment, a CSS class is a
named collection of style commands.
The style commands are in the form of
property-name: value;
Each selector can refer to multiple style commands. Each style command ends with a semicolon (;).
A final command that ends without the semicolon is often forgiven by browsers and renders correctly.
Anyway, it is preferable to always use the ending semicolon for each style command. Blanks can be used
to separate consecutive style commands. Blanks do not affect the way in which browsers parse the style
sheet, but they help considerably in reading the content of the style sheet.
Search WWH ::
Custom Search