Cascading Style Sheets (CSS) are a way of effecting how the HTML tags work on your page. Although it works with HTML it is an entirely different code.

For example, the <B> & ;</B> tags would normally change the text they contain to a bold font. Using CSS we can assign the <B> tags to give the bold font a white, italic text, navy background and a number of other values.

CSS also gives us more control over where content is placed on a page using positioning properties. For example you can have pictures overlapping or decide whether you want the image to be visible or hidden.

 Rules

A CSS rule defines how the HTML tags should look and behave on a webpage. You can set a rule to a specific HTML tag (A.1.) or create generic rules (B-C) which can be added to an HTML tag anywhere in the page.

A rule consists of three parts. The selector, property and value. There are dozens of properties but the WebTV Plus only supports a small handful of them. Most values are supported however.

Here's the basic syntax of a rule selector {property: value;}



  1. Selectors

    1. HTML selectors are the text portion of an HTML tag. For example, B is the selector for the <B> tag. HTML selectors define how that particular HTML tag will appear throughout the page.
      Basic syntax B {property: value;}

      1. The <P> tag can be used in regular HTML without it's closing </P> tag but in CSS the closing tag must be included.

      2. <BR> <FRAMESET> and <FRAME> tags cannot be used as selectors.

      3. Contextual - When a tag is surrounded by another tag, one inside another, we call the tags nested. In a nested set, the outer tag is called the parent and the inner tag the child. We can use CSS to create a rule for a tag if it is the child of another particular tag or tags.
        Basic syntax P B {property: value;}

      4. Grouping - If you have two or more HTML selectors that you want to have the same definitions, just list the selectors seperated by commas.
        Basic syntax B, I, TT {property: value;}



    2. Class selectors can be given any name you choose containing letters or numbers. They can be applied to an HTML tag anywhere in the page.
      Basic syntax .3cats {property: value;}



    3. ID selectors work the same as class selectors.
      Basic syntax #4dogs {property: value;}



  2. Properties

    1. A property is what you use to change the selector's behavior or appearance.
      B {background-color: value;}



  3. Values

    1. A value defines the property. A property and value together are called the selectors "definition".
      B {background-color: pink;}

Creating Rules

CSS Rule For An HTML Selector

<HTML>
<HEAD>
<STYLE>
B {background-color: yellow; color: green; font-size: 20pt; text-decoration: underline;}
</STYLE>
</HEAD>
<BODY>
I had a <B>wonderful</B> day!
</BODY>
</HTML>

I had a wonderful day!



CSS Rule For A Class Selector

<HTML>
<HEAD>
<STYLE>
.moveit {margin-left: 30pc; color: purple; text-decoration: line-through;}
</STYLE>
</HEAD>
<BODY>
<P>The day started out nice and sunny. The day started...</P>
<P CLASS="moveit">I had a wonderful day! I had a...</P>
<P>Then it began to rain. Then it began...</P>
</BODY>
</HTML>

The day started out nice and sunny. The day started out nice and sunny. The day started out nice and sunny. The day started out nice and sunny. The day started out nice and sunny.

I had a wonderful day! I had a wonderful day! I had a wonderful day! I had a wonderful day! I had a wonderful day!

Then it began to rain. Then it began to rain. Then it began to rain. Then it began to rain. Then it began to rain. Then it began to rain. Then it began to rain.



CSS Rule For An ID Selector

<HTML>
<HEAD>
<STYLE>
#bean {background-color: green; font: bold italic; color: white; font-size: 30pt;}
</STYLE>
</HEAD>
<BODY>
I love <SPAN ID="bean">green</SPAN> beans with vinegar.
</BODY>
</HTML>

I love green beans with vinegar.



Contextual Selectors

<HTML>
<HEAD>
<STYLE>
P B {background-color: green; font: italic; color: white;}
</STYLE>
</HEAD>
<BODY>
<P>We pulled up to a red light and waited patiently for it to turn <B>green.</B> It seemed like forever before it finally did turn <B>green.</B></P>
</BODY>
</HTML>

We pulled up to a red light and waited patiently for it to turn green. It seemed like forever before it finally did turn green.



Grouping Selectors

<HTML>
<HEAD>
<STYLE>
H1, H2, H4 {background-color: red; font: italic; color: white;}
</STYLE>
</HEAD>
<BODY>
<H1>Header 1</H1><BR>
<H2>Header 2</H2><BR>
<H3>Header 3</H3><BR>
<H4>Header 4</H4>
</BODY>
</HTML>

Header 1


Header 2


Header 3


Header 4



Inline Selectors

<HTML>
<BODY>
My favorite color is <B STYLE="background-color: blue; color: white;">blue
</BODY>
</HTML>

My favorite color is blue