css

Introduction To Cascading Style Sheets (CSS)

HTML is very limited in the way it allows you to format your web pages. You have some control of where things appear on the page by putting them in tables, but they are very awkward to use. Frames are some help, but they tend to be very annoying. You can control the fonts that appear on your pages with the <FONT> tag, but they tend to require a lot of code. This is because HTML was intended to mark up a page's structure, not it appearance on the screen. This has changed with the introduction of a complementary markup system called Cascading Style Sheets (CSS). CSS allows you to define a page's appearance without affecting its HTML structure.

Style sheets are like templates. You can define the style for a specific HTML tag (i.e., <h1>) once and then use it over and over on all your Web pages. If you want to change the way a tag affects the appearance of an element on the screen, just change the style. All the elements enclosed by that tag will change throughout your Web pages. You do not have to change each occurrence of the tag throughout your pages as you did before CSS.

CSS are groups of properties that define how an HTML element appears in a Web browser (i.e., red, bold and Arial). Styles can be defined within an HTML file or in an external file. An external style sheet can affect multiple pages or even an entire Web site. This means that single pages or entire site changes are much easer to implement.

Suppose we wanted to create a Web page where every instance of <h2> was red, bold, italic and in the Arial typeface. Before css was developed, you would have to write the following code every time you used <h2>.

<FONT COLOR="red" FACE="Arial"><EM><B>
<H2>This is a red, italic, bold, Arial h2 header.
</FONT></EM></B>

CSS lets you define this style for all <H2> tags by defining what is called a selector:

H2 {font-family: Arial; font-style: italic; color: red; font-weight: bold }

In the above example, the <H2> element is the selector. What followers H2 is the style definition. Once the above style is applied to an HTML document, every <H2> element will appear red, italic, bold and Arial plus its inherent HTML characteristics.

CSS in an HTML Document

A simple way of combining styles to an HTML document is to define the styles in the head or the body of an HTML document. To place your styles in the head of an HTML document your selectors and definitions go between the tags:

<STYLE type="text/css">

</STYLE>

The comment tags () are used to prevent older browsers that do not recognize the <STYLE> code from displaying the style codes on the screen.

Below is a sample HTML page using CSS.

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
<TITLE>test1</TITLE>
</HEAD>
<BODY>
<h1>This header is red, centered and Arial </h1>
<h2>This header is gray, centered and Arial </h2>
<h3>This header is blue, not centered and Arial </h3>
<h4>This header is black, left aligned and Arial </h4>
<p> This text is black, justified, 12 point and Arial. Now is the time for all good men to come to the aid of their party.
</BODY>
</HTML>

The above document should appear on the browser as shown below:

This header is red, centered and Arial

This header is gray, centered and Arial

This header is blue, not centered and Arial

This header is black, left aligned and Arial

This text is black, justified, 12 point and Arial. Now is the time for all good men to come to the aid of their party.

External Style Sheets

Defining styles in the head of an HTML document is helpful if you only want to affect one Web page. However, if you want to affect several pages or an entire Web site then you should create an external style sheet and link to it from your HTML documents. For example, we will create a file called mystyle.css that contains this text:

H3 {font-family: Comic Sans MS; font-weight: bold; color: red }

Next, create a new HTML document named mystyle.html. We will add a <LINK> element that calls our style sheet (mystyle.css) in the document's head:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="mystyle.css" title="style1">
</LINK>
</HEAD>

The code in the <LINK> tag tells the browser to find an external style sheet that is a css file and the name of the file is mystyle.css (assuming its in the same directory as the HTML file.). The title attribute is only used to give the style sheet a name to reference. The file mystyle.css defines the styles in mystyles.html. This means that every <H3> element you use in the HTML document will have the red, bold, Comic Sans MS style defined in mystyle.css.

Another way to link to an external style sheet is with the following code:

<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>

The @import statement works similar to the <LINK> element. However, the @import statement is a little buggy in the 4.0 versions of Navigator and Internet Explorer. So you might be better off using the <LINK> statement.

Whether you use an external style sheet or list your styles in the head of an HTML document, you define them similarly. Each selector is given a style definition using the following format:

H3 {font-family: Arial }

In this example, H3 is the selector (in this case an HTML element), and font-family: Arial is its defined style. This definition is a combination of a property and its value, seprated by a colon. Properties are characteristics an element can assume, such as, font type, font size, and color. Values are specific traits those properties can have, such as, Arial, 18 point, or red. Multiple properties in the same definition are separated with semicolons. For example:

H2 {font-family: Arial, Helvetica; font-style: italic; font-weight: normal; color: red }

In the above example, Arial is the preferred type face. Helvetica is the second choice. This is done in case the user's system does not have Arial the second choice will be used. If a browser can't match any of the choices, it will use its default font.

Create a file called style1.css and enter the following text:

H1, H2, H3, H4, H5 { color: red }
BODY { background-color: pink; font-family: Comic Sans MS, Arial, Helvetica, sans-serif }
P {text-align: justify; text-size: 18pt }

Now create an HTML file as shown below and name it style1.html:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style1.css" title="stylexxx">
<LINK>
</HEAD>
<BODY>
<H1>This is heading H1</H1>
<H2>This is heading H2</H2>
<H3>This is heading H3</H3>
<H4>This is heading H4</H4>
<H5>This is heading H5</H5>
<P>Now is the time for all good men to come to the aid of their party. If your system contains the Comic Sans MS font, that is what type style you will see.
</BODY>
</HTML>

Now run test1.html in your browser.

Click here to see an HTML file (test2.html) using css.

If you can, look at the above using Netscape and then using MS Explorer. You will find that there is some differences in the way the file appears in Netscape and Explorer. At present this is one draw back to using styles. Not all browsers interpret the codes the same. While you are displaying the file (test2.html) in the browser, click on "view" and then "page source" (Netscape) or "source" (Explorer) to see the HTML codes. We have introduced a new attribute which has been added to HTML: "CLASS." All elements inside the "BODY" element can be classed and be addressed in a style sheet. Look at the source code for test2.html to see how the "CLASS" statement can be used. Also note the difference in the interpretation by Explorer and Netscape. Note what happens when you point to "TEST LINK" while using Netscape and using Explorer. Also note the line "What is my name" is green when you use Explorer, but black when you use Netscape.