Using Style Sheets

The term "Cascading" Style Sheets is used because more than one Style Sheet can be used for the same page. For example, if you're using a Style Sheet on the actual webpage, called an "in-line style sheet", and an external style sheet that is being used by multiple pages, both can have an effect on the items within the webpage. If both the in-line and the external Style Sheet are attempting to affect the same item, like an <H1> tag, the closest to the <H1>tag wins. That would be the in-line in this instance.

In case you're curious, if two external Style Sheets are attempting to affect the same <H1> command, the one listed second in the actual webpage wins. It's closest to the tag going from the top of the document.

Implementing the Style Sheet
You can do this one of two ways:

  • You can put a separate style sheet on each page.
    ~or~
     
  • You can create one external style sheet and link all your pages to it.
    (Much more efficient, in my opinion)
    To link to an external style sheet,
    put the following code between the <head></head> tags:
    <link rel="stylesheet" href="style.css" type="text/css">

In-line Style Sheets
Technically this isn't a style sheet, it's actually an in-line style block. But, no sense worrying about that.

Just follow these rules to put a Style Block on your page:

  • It must be between the <HEAD> and </HEAD> tags.
  • The block must be surrounded by <STYLE TYPE="text/css"> and </STYLE>
  • The style sheet is text so if you just type it on the page, it will show up, so, in addition to the the style tags above, surround the text with <!-- and --> (comment tags) These tags make the text invisible.

When you're finished, the format will look like this:
<html>
<head>
<style type="text/css">
<!--

Style Sheet information goes here...

-->
</
style type>
</head>
<body></body>
</html>