Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, , <table>, and so on. The layout of the document was supposed to be taken care of by the browser without using any formatting tags.

As the two major browsers – Netscape and Internet Explorer – continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document’s presentation layout. To solve this problem, the World Wide Web Consortium (W3C) – the non profit, standard setting consortium responsible for standardizing HTML – created STYLES in addition to HTML 4.0.

Both Netscape 4.0 and above and Internet Explorer 4.0 and above support Cascading Style Sheets.

Ok, now it’s time to show you.

To start off you have to put the CSS tag in the part of the HTML Page:

<style>
/* CSS Code here */
</style>

The CSS syntax (how you type it) is made up of three parts: a selector, a property and a value:

<style>
selector {property: value;}
</style>

The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

<style>
body {color: black;}
</style>

So in this example, I want to change the background color of the tag to black. This makes the background of the page black.

You can also use CSS to use more than one property in an Element:

<style>
P {color: white; text-decoration: underline;}
</style>

This says: Change whatever is between the tags to white and make then underlined.

This would give us WHITE UNDERLINED text.

As you can see, everytime you want to define a new property onto a tag, you have to use ; to tell the browser that your going to give the TAG another element.

In CSS, you can also do something called Grouping. Grouping is like defining multiple properties for an element, except it’s a little different, because you set a guideline for elements. So rather than doing this:

<style>
P {color: white;}
B {color: white;}
I {color white;}
</style>

You can do this and save your lazy self from doing all that hard work :)

<style>
P, B, I {color: white;}
</style>

This says: I want All TAGS TAGS and TAGS to have white text.

Ok, that’s all well and good, but what if i don’t want all the text on the page to be WHITE?

This is when you use something called ID’s

ID’s in CSS are used to make a TAG unique from all the other ones. For example, Say I was making a webpage and I had a tag that had the words “I love fluffy”

I only want those words to be blue, nothing else.

Here’s how I would do it:

<style>
#fluffy {color: blue;}
P {color: white;}
</style>

<p id="fluffy">I love fluffy</P>
<p>fluffy is my friend</p>

Now study this for a moment.

See what I did?

Notice how I set up an ID attribute for only that tag and i gave it the ID of fluffy. After I did that, I went back to the CSS area and declared that whatever tag had the fluffy ID, must have blue text.

The Result: Now only tags with the fluffy ID will have blue text. Any other tags without the ID will be white.

Ok, what if I have multiple pages? will I have to copy and paste the same CSS tag and CODE over and over again in different pages?

No.

CSS can be externally used. This means that I can be used outside of a webpage.

Say I want to use the same following CSS code for 3 HTML pages:

<style>
P {color: white; text-decoration: none; font-family: Arial;}
</style>

Ok, Just for the record, this will have white text no text decoration and will have Arial Font.

Ok, Now As lazy as im, I don’t wanna paste the same code over and over again on different pages. So what I do is make another file out of a simple text editor (Notepad and whatever Macs have for Notepad).

Then I add the CSS code into that file (without the TAG) You should just have this in your file:

P {color: white; text-decoration: none; font-family: Arial;}

Once I’ve typed up the code, I save the file with the .css extension.

I’ll save mines as ghetto.css

Now you have the CSS file with your code in it, now time to get it on the webpage.

First, place the CSS file in the same directory as the webpage you want the CSS on. Second, open up the HTML page and within the <head> and </head> put this TAG:

<link rel="stylesheet" href="ghetto.css" tyle="text/css">

Now the CSS file with your code in it is linked to the webpage.

Well, I hope you know the basics of the CSS language by now.

In this tutorial: