Choose a link to get started:

ALL NEW!!!

 Scrolling Marquees

The Basics

 The Basics
Manipulating Text
Images
Backgrounds
Links

More Advanced Topics

 The <HEAD> Tag
Tables
Forms
Frames
Lists

Advanced Topics

 Image Maps
CSS - Part 1
CSS - Part 2
CSS - Part 3
CSS - Part 4

Additional Topics

 XML Tag Formatting
XHTML - Part 1
XHTML - Part 2

CSS - Part 1

        Have you ever noticed that when you want something different to appear twice on a page, you have to type in the script twice, or as many times as you want it to appear on the page? This can become quite time consuming and quite annoying if your script is large or complex. Have you ever wanted some way to make it easier? Well my friend, you have found the place. Using CSS, or a Cascading Style Sheet, makes that all a thing of the past. Look at the CSS skeleton.

<STYLE TYPE="text/css">
<!--
CSS Scripting Goes Here
-->
</STYLE>


        The stylesheet, above, goes inside of the <HEAD> section of the script. I did not included this is the <HEAD> tutorial because of its tutorials here. Let's look at the script one more time. This time, however, we will break it down.

  • The <STYLE> tag informs the browser that there will bea stylesheet work area coming up.
  • The TYPE="text/css" tells that the following script will be affecting, for the most part, text, using css.
  • Use <!-- and --> to hide the stylesheet from browsers who do not understand it.
  • All CSS goes inside of the <!-- and --> tags above.
  • Use </STYLE> to finish off the process.



CSS with individual tags


        Before we get to the stylesheets, we will learn to use the STYLE attribute of different tags. Any tag can have STYLE attached to it. For example, say you wanted to make the page title, CSS Basics, the color blue. First, you must write the regular script. That is shown below.

<H1>CSS Basics</H1>


         Then add the STYLE attribute to the tag. We get more difficult now. The script for color in stylesheets in individual tag is

color: colorname

So, we use this

<H1 STYLE="color: blue">CSS Basics</H1>

Using that yields :

CSS Basics



        All values of the STYLE attribute will have a : in it. Now let's say we wanted the text to be underlined. Well, the script is shown below.

text-decoration: decorationtype

For underline, use underline as value :

<H1 STYLE="text-decoration: underline">CSS Basics</H1>

This yields :

CSS Basics



         Now let's say that you want to use both. You want the heading both blue and underlined. The code is shown below.

Place the color script as the value of STYLE

<H1 STYLE="color: blue">

Place a semicolon, ;, after it

<H1 STYLE="color: blue;">

Add the underline script

<H1 STYLE="color: blue; text-decoration: underline">CSS Basics</H1>

Use the script to yield :

CSS Basics



        You have just learned an important concept. To separate the modifiers from each other, use the semicolon, ;. This is used in the <STYLE> section too. We will stop here for the moment. As you progress in CSS, you will learn more about how to modify the selector, or the tag, class, or id it defines. Here is a list of what modifications we have learned.


  • color
    • any color
  • text-decoration
    • underline


        The next CSS tutorial will discuss modifying individual tags in the <STYLE> section. Good Luck!!!