| Implementing
Style Sheets |
|
|
Associating Style Sheets
with HTML Documents |
|
|
Developing a Style Sheet |
|
|
Setting Font Properties |
|
|
Setting Text Properties |
|
|
Setting Box Properties |
|
|
Setting Color and Background
Properties |
|
|
Setting Classification
Properties |
| Associating
Style Sheets with HTML Documents |
A style is made up of a tag name (H1, P
etc.) and one or more definitions that determine how the elements
marked with that tag should be displayed. Each definition
contains a property , a colon, and one or more values. Some
properties can be grouped together with a special umbrella
property.
Example 1
H1 {font-size: 12 pt; color: red}
Note
| H1 |
HTML tag |
| Font-size |
first definition |
| Color |
second definition |
|
Example 2
<BODY STYLE = "background:blue">
Note
| BODY |
HTML tag |
| Style |
Attribute |
| Background |
Definition |
|
Style sheets can be created for internal
and external use. Internal style sheets set the formatting
for a particular page and external style sheets set the formatting
for all the pages of a web site. For an internal style sheet
the style definition is specified at the top of the HTML document.
For an external style sheet the definition is made in a separate
text file and saved with .css extension. This file is linked
using the Link tag to each page it should format.
Example
<! DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0//EN">
<HTML LANG= "EN">
<HEAD>
<TITLE>
cook book for Jennie</TITLE>
<STYLE
TYPE= "text/css">
H1 {border: thick solid blue}
</STYLE>
</HEAD>
<BODY>
<H1>
Jennie chuang' cookbook</H1>
<P>
This page will contain some of Jennie's
favorite recipes
</BODY>
</HTML>
Properties that affect the font are font-family(which
changes the font face), font style (either normal, italic,
or oblique), font-variant (normal or small caps), and font
-weight (which changes the boldness of a font ). Also the
font size-property can specify text size. The font property
is a shorthand property for all of these. You can specify
more than one font, in case the first is not available in
the user's system the second one is applied. One of the latest
features that are added to style sheets is the ability to
embed a font in a page and have it downloaded to the visitor's
system, just like an image.
Example
<STYLE>
H1{font-size:20 pt;
Font-weight:normal;
Font-family: "Nueva roman", "lithos regular"}
P {font-size: 10pt;
Font-family: "Myraid roman", "veranda"}
</STYLE>
Note
Style starting with H1 is for the page heading
and style starting with P is for paragraphs.
In this Exercise you will learn to set the
Font properties ina cascading style sheet.
The style specification highlighted reduces
the text size to 10 and sets the font as myraid roman and
style as bold italic.
The browser displays the paragraphs by applying
the styles specified.
Copyrights : Layout Galaxy All Rights Reserved
No part of this tutorial may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, electrostatic, magnetic tape, mechanical or otherwise, without prior permission in writing from Layout Galaxy.
|
|
|
