CSS Rules!
Home > Build > Programming
> CSS
by
Don Herion
(1) (2)
CSS (Cascading Style Sheets) are all the rage these days.
The reason for their growing popularity is obvious. They offer Web designers the
power and flexibility to manage the design of their Web site in a way not possible
using standard HTML. As a matter of fact, this Web site uses CSS. CSS offers the
same capability as templates: the ability to alter the style elements of a large
Web sites by editing one document.
Browser Support
The current downside of using CSS is the buggy support by mainstream browsers.
Although Microsoft added CSS support to Internet Explorer 3.0, the integration
was not without problems. Netscape added CSS to Netscape 4.0 but bugs exist there
as well. On the plus side if a browser does not support CSS it simply ignores
it and uses existing code to render Web pages. In my opinion CSS is here to stay
and offers Web designers enormous flexibility in creating and controlling type,
color, margins, and other style elements.
Types of Style
Sheets
CSS can be applied to HTML pages using three methods. Each has
advantages and disadvantages. You can also combine these three methods in a number
of ways.
External CSS
This is the most powerful
way to apply styles throughout an entire Web site. You create a CSS document in
a text editor and save the file with a .css extension. Any page that links to
that .css document takes on the styles within it. Here is a sample of a .css document.
I call it - style1.css.
| <style>
<! - -
body {
background:
#CCCCFF;
}
p {
font-family: arial;
font-size: 12pt;
}
- - >
</style> |
To apply this
CSS document to an HTML document add one line of code within the <head>
tags. There are no close tags with this syntax.
| <head>
<link
rel=stylesheet href="style1.css" type="text/css">
</head>
|
Like a template, one Web page or
ten thousand can be controlled by this one document.
Embedded
CSS
This type of CSS style is applied to a single Web page. These style
tags are placed within the <head> tags of an HTML page. This is an example
of an 'embedded CSS':
| <html>
<head>
<title>Example of Embedded CSS</title>
<style>
<! - -
body {
background: #CCCCFF;
}
p {
font-family: times;
font-size: 14pt;
}
- - >
</style>
</head>
<body>
This is an example of embedded CSS.
</body>
</html>
|
This CSS will create a light
purple background color for the Web page and apply 14 point 'times' font to everything
inside paragraph <p> </p> tags.
