Login

What is CSS?

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

Invented in 1997, Cascading Style Sheets (CSS) are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as <FONT>, which have been deprecated in HTML 4.0.

There are three parts to CSS: the styles, their placement, and the fact that they can cascade.

The Styles

One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:

<font color=”#0000ff”><h4>a blue headline</h4></font>

Which would look like:

a blue headline

However, there was no way to ensure that all H4 headlines were blue except by typing in the font tag before and after each one. With CSS, you simply declare that all H4 headlines are blue, and for all pages that use that style sheet and all elements that use that style, they will be blue:

H4 { color: #0000ff; } <h4>another blue headline</h4>

Which would look like:

another blue headline

{mospagebreak title=CSS Syntax}

Style rules are comprised of two things, the selector and the declaration.

• selector – The HTML tag that will be affected by the rule

• declaration – The specific style calls that will affect the selector

The complete syntax for a style rule is:

selector {property : value;}

So, to set all bold text to be the color red, you would write:

b {color: red;}

One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:

b {color: red;}h1 {color: red;}h2 {color: red;}

But with grouping, you put them all on the same line:

b, h1, h2 {color: red;}

You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write:

h3 {font-family: Arial;color: blue;}

By convention, we put separate rules on separate lines, but this is not required.

{mospagebreak title=Placement of CSS Elements}

Style sheets can be place in three places in a document, in the <head>, in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the H4 tag itself. For example:

<h4 style=”color: #0000ff;”>another blue headline</h4>

Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of “text-decoration: none”. For example:

This link has the default decoration

This link, while still a link, is not underlined and has a color of black.

(Editor’s note: The above two lines are not links.)

To create a style sheet within the header of your HTML document, you enclose it in <STYLE> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:

<head><style type=”text/css”><!–H4 { color: blue; }–></style></head>

Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.

Linking a Style Sheet

The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:

<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>

Importing a Style Sheet

Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:

Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style:

Look for the style element that is created, if it is not in the document, use the default rules in the browser.

Determine if any of the style rules are marked as important and apply those to the appropriate elements.

Any style rules in the document will have precedence over the default browser settings.

The more specific the style rule, the higher the precedence it will have.

Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.

{mospagebreak title=Your First Style Sheet}

As HTML becomes more and more a description of the content of Web pages and less the look and feel, you need a tool to describe how your pages should look. That’s where Cascading Style Sheets (CSS) come in.

CSS is not hard, in some ways it’s almost easier than HTML. The trickiest part is remembering the many different choices you have to choose from. Let’s start with a simple style sheet that includes some of the more common styles.

Fonts

The most common adjustment to Web pages is to the fonts on the page. You can change the color, style, size, and face of your fonts, and you can do it all with CSS.

Creating a Style Sheet

The first key to writing a style sheet is to decide what you want your text to look like. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different tags, headings, and so on.

The first three of the above styles will be set by using the tags: <p></p>, <h1></h1>, and <h2><h2>. The final style notation is used with the class attribute. Since it is a notation, it would usually be used with the <span></span> tag. For example:

<p>This paragraph would be in the p style. <span class=”note”>Note: inheritance means that this text will have the same styles as the paragraph itself</span></p>

The styles set by the first tag will be inherited by any tag that is within it. This is why we don’t have to redefine the font color or size for the note.