CSS Tutorial
Defining CSS rules
Web pages have two sections:
- The HEAD section that is read by the computers, and is not displayed on the web page
- The BODY section with all the content that you want users to be able to see over the Internet
Since styles tell the computer how to display a web page, and not what to display, you type your style instructions or link to your stylesheet in the head of the document. The body with your content will mostly stay the same.
You need to tell the browser that you are including style information within the web page. You do this by using <style> tags, and specifying style rules you are using within the style tags. The head of a document styled in the same page will look something like:
<head>
<title>My first styled page</title>
<style type="text/css">
... style information goes here ...
</style>
</head>
You can either
- embed styles within one page as above, and those styles will only apply to that page, or
- you can put the HTML and the CSS in separate files
If you use separate files, you can use the styles in many web pages. Styles embedded in one page are easier to understand while you are learning CSS. After you have finished your embedded styles, you can put the stylesheet in a separate file and add a link to that file in the head of the document.
CSS rules
Each CSS rule has three components:
- The selector, which selects the part
of the page that will be affected by the rule. For example, if you want your style to
affect all of the displayed web page (ie the contents of the body),
body is an appropriate selector. The following rule
<head>
<title>My first styled page</title>
<style type="text/css">
body {
background-color: blue; {
}
</style>
</head>changes the background colour of the web page body to navy.
- The property of the selector to which the style is being applied. In the above example, background-color (Note the spelling) is a property of the body selector.
- The value of the property that is being applied. In the previous example, the background-color property has the value blue. Thus the web page background will be blue.
You end each different style rule with a semicolon (;).
Rules can also be combined if they have the same selector. Therefore you can enter several property - value pairs within the same body selector, as below:
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: navy; {
background-color: blue; {
}
</style>
</head>
This sets text to navy and background colour to blue.
The Web Design Group web site has lists of the available style properties and their values.