CSS allows you to define the appearance and layout of your web pages. In this assignment, you will learn how to create an external style sheet, create and apply CSS rules to your content, and validate your CSS rules.
Where to specify style properties
You specify the appearance of your CSS by specifying rules that contains various properties. You can either specify the rules:
-
within the <style> element within the <head> element of your document
<head>
<meta charset="utf-8">
<title>My page</title>
<style>
h1, h2 {color: red;}
p {font-family: arial;}
</style>
</head>
-
by linking to an external file that contains all of your style rules in a <link> element
<head>
<meta charset="utf-8">
<title>My page</title>
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
</head>
If you are creating styles that you want to use for more than one web page, you should create an external style sheet file.
Selectors
Each CSS rule contains a selector and one or more declaration:
- The selector identifies the HTML element to which the CSS rule is applied.
- The declarations specify the CSS properties to use and the values for that properties. Each declaration is separated by a semi-colon (;). The set of properties are included within a starting and closing curly brace.
The following example shows includes a selector that identifies the <body> element. The rule contains declarations that specify the font-family (arial) and font-size (20px) for all text that appear within that paragraph.
Examples of selectors
A few simple examples of selectors include:
-
A simple property to change the color of paragraphs to red would be as follows:
p {color:red;)
-
You can also apply a style rule to multiple elements if separate the names of the elements in the selector with a comma:
h1, h2 {color:red;}
Doing so would specify that both <h1> and <h2> elements would be red.
-
If you want to format a single occurrence of an element, you can attach an ID to that element and then specify the ID within the rule. For example, if you wanted the first paragraph in a topic to be blue, you could add an id attribute to that paragraph (<p id="first">This is the first paragraph</p>). Then in the styles, you would have a rule as follows:
#first {color;blue;}
-
If you want to format multiple occurrence of elements but not all of them, you can attach a class value to the occurrences of the element that you want to format. You then then specify that class value within the selector of a rule. For example, if you wanted to flag any paragraph that had the class of warning in red text, you would add the class statement to every warning paragraph (<p class="warning">This is a warning.</p>). You would then specify the following style:
p.warning {color:red;}
Validating CSS
Because CSS is also a standard, you can validate your CSS against the W3C standard by using a CSS validator that is available at:http://jigsaw.w3.org/css-validator/. This validator is very simliar to the one for HTML.
For more information, see Chapter 7 of the Head First HTML and CSS book. |