| |
| Overview |
| |
In this chapter you will learn
- How to create a style sheet
- Meaning of external style sheets
- Meaning of internal style sheets
- How to link a style sheet with an XHTML document
- An introduction to JavaScript
|
| |
| Introduction |
| |
This chapter acquaints the reader with the concept of style sheets. Style sheets are an application to style HTML and XHTML documents. As most of the formatting in XHTML is done through style sheets, it can be said to be the backbone of XHTML.
Style sheets are also known as CSS that stand for Cascading Style Sheets. The most significant characteristic of style sheets is that it enables the designer to manage a large number of web pages. They give web developers specific control over their design and content layout. A standard set of commands can be created to control the style of all the subsequent pages.
Through style sheets, style can be added to web documents like font, color, spacing, size, etc. Style sheets also control the layout of the web page independently without using tables.
To put it shortly, style sheets are a single file that has all the values of the attributes that were previously defined in the tag itself. All the web pages check this file and the formatting is done accordingly.
|
Benefits of Style Sheets
With the introduction of style sheets, standards are being set for the present and future of web design. Style sheets assist designers to have control over their web site design and appearance over different platforms and browsers.
When the texture of all the web pages has to be changed, changes have to be made in all the pages. But when the designer is using style sheets, he just has to make a change in the coding of the style sheet. This is the main benefit to designers and companies as it speeds the time of development and updating. The coding is reduced, the pages are more efficient and they require less bandwidth. Therefore, communication becomes easier among multiple developers because the work is standardized.
Rules for Style Sheets
There are a set of rules that govern the making of a style sheet. These rules have to be followed while making style sheets. These rules are the same for HTML and XHTML.
The rules for making style sheets are:
- The selector selects the element in which one is working. The elements are common tags like body, h1, pre, p, etc.
- The declaration tells the browser what to do with the selected element. It consists of two parts:
- The property, which identifies which attribute; like font type, color, size come into play.
- The value, determines how the attribute works like the value for the font.
- A declaration starts with a { (starting bracket) and ends with a } (closing bracket).
- A property is separated by a : (colon) and a declaration is ended by a ; (semicolon).
Example |
h1 { |
Color: blue; |
Font-family: Arial, sand-serif; |
| } |
| |
External Style Sheet
An external style sheet is ideal when the style has to be applied to many web pages. With an external style sheet, the look of entire website can be changed by changing a file. This is possible because; each page is linked to the style sheets using the <link> tag (which will be explained later). The <link> tag goes within the head section. An external style sheet is saved with an extension of .css. This file is used in the XHTML document.
The external Style Sheet of XHTML is same as the external Style Sheet of HTML.
Example of Style Sheet |
BODY { |
font-family: Arial, Helvetica, sans-serif; |
Color: black; |
Background-color: white; |
} |
|
P { |
font-family: Arial, Helvetica, sans-serif |
} |
|
PRE { |
font-family: "courier new", courier, monospace; |
} |
|
H2,H3,H4 |
{ color: #669999; |
font-weight: bold; |
}
A: active {
Color: #ff0000; |
} |
A: visited {
Color: #999999;
}
Table {
Border: 5px none #CCFF99;
Width: 250 px;
Background-color: #FFCCCC;
}
UL, OL {
font-family: arial, helvetica, sans-serif;
} |
|
