HTML: A Guide to Hard-Coding
Cascading Style Sheets
What are Style Sheets?
If you are familiar with styles in Microsoft Word or Corel WordPerfect, then you will have an easier time comprehending Cascading Style Sheets (CSS). In the word processing programs, you can set up styles that allow you to modify different kinds of text in your document and keep it consistent. For example, you can set up a style for your headings that makes them all 18pt bold, arial font and centered. This saves you from modifying each heading individually.
CSS work the same way, but in an HTML document. CSS are not actually a part of HTML, but they work with HTML to format your page.
There are three ways to incorporate CSS into your HTML document:
- Create an external file and link your HTML document to it (linked)
- Declare your CSS style in the <head> of your HTML document (embedded)
- Write your style inline as you need it. (inline)
You can also combine the three methods to achieve the look you want. This is actually where they get their name of "cascading." The most specific style is an inline one, then an embedded one (in the <head>), then a linked style. The more specific style will always override the more general one, so you can always modify styles on the fly.
The Up Side
The biggest benefit to CSS is that you can do away with the awful and troublesome <font> tag in HTML. You can define size, color, leading, letter spacing, face and alignment only once and never have to worry about it again.
One of the great advantages to creating an external CSS file is the ease of modifying an entire site. If you originally had all your headings red, and then one day you decide you want to change the color to blue, all you have to do is change one small thing in one file, instead of changing the heading in every file in your site.
The Down Side
The only real down side to CSS is that older browsers don't support them, but anything 4.0 and above will.
Another possible down side is that CSS is quite different from HTML, so it involves learning a whole other way of manipulating text. Once you use it, however, it becomes easy, like HTML.
The Syntax of CSS
All CSS is written in the following manner:
tag name {attribute:value; attribute:value}
For example, say you want all your <H1> tags size 18, red, centered, bolded and in the Arial Font. This is what you would do:
H1 { font-family:Verdana, sans-serif;
font-style:normal;
font-weight: bold;
font-size: 18pt;
color: #990000
text-align: center;
}
- See the HTML section on Fonts for more information about font types (faces) and font families;
- Font-style is either normal or italic;
- Font-weight is normal or bold;
- You have four options for specifying color:
- As a standard color name
- As a hexadecimal value
- As an RGB percentage
- As a decimal value from 0 to 255
- Text-align is similar to that of HTML.
- This is an example of some defined styles. As you can see, this is a separate document, which will become a linked style sheet, but you define the styles the same way no matter if you link them, embed them or create them inline.
IMPORTANT: Unlike straight HTML, when you use CSS, you must close all tags, even ones that are not required to be closed in HTML, like the <P> tag.
