CSS Tutorial
Introduction to CSS
Properties Table
A quick reference table for the css properties!
Using the Style Attribute
Use the style attribute inside an HTML tag to define styles.
Styles in the Head Section
Use the style tag in the head section to define styles.
Classes and IDs
Use classes to define styles.
External Style Sheets
Use style sheets to add the same styles to multiple pages.
Cascading style sheets are a new way of formatting your page layout, text, fonts, images, and almost anything you put on the page. They allow you to position things on your page down to the exact pixel. Also, if a style is declared in the head section of a page, a change to the style changes the style on the entire page. We’ll get to the details in later tutorials, but here is the general idea: Let’s say you created a style for a heading tag, <H3>
In your style, you set the color of your H3 tags to red. Now if you have 10 H3 tags on the page, and decide you would rather have your headings be blue, you would no longer need to go back and change the font color for each heading. All you have to do is change the style of your H3 tags from the color red to blue.
Changing the style once will adjust all of your H3 tags and they will now be all blue instead of red, with a lot less work. This gets even better if you use an external style sheet for more than one page. Changing the style properties in the external style sheet will now adjust every page that uses that style sheet, so you can avoid editing each page individually to change it! In a later tutorial, I’ll show you how to create and use an external style sheet, but for now we’ll stick to learning the basic use of styles on a page. Well, I guess that’s all I have for an introduction. So let’s get started with the first section, which shows you how to add a style as an attribute to an existing tag. It is called Using the Style Attribute.
Text Properties
| Property | What it Does | Possible Values |
|---|---|---|
| letter-spacing | Controls the amount of space between each letter in a section of text. | normal (default) number of pixels |
| line-height | Controls the amount of vertical space between lines of text | normal (default) number of pixels percentage |
| text-align | Controls the alignment for a section of text | browser decides (default) left right center |
| text-decoration | Controls what the text looks like | none (default) underline overline line-through blink |
| text-indent | Controls the indentation of the first line in a section of text | 0 (default) number of pixels percentage |
| text-transform | Changes the case of a section of text | none (default) uppercase lowercase capitalize |
| vertical-alignment | Controls the vertical alignment of a section of text | baseline (default) sub super top text-top middle bottom text-bottom |
| word-spacing | Controls the amount of space between words (doesn’t work as of yet) | normal (default) number of pixels |
Font Properties
| Property | What it Does | Possible Values |
|---|---|---|
| font-family | Controls the type of font shown on the page | browser decides (default) font family name |
| font-size | Controls the size of the font |
medium (default) number of pixels percentage |
| font-style | Controls the style of the font | normal (default) italic oblique |
| font-size | Controls the size of the font | medium (default) number of pixels percentage |
| font-variant | Controls the variant of the font | normal (default) small-caps |
| font-weight | Controls the boldness of the font | normal (default) lighter bold bolder 100 200 300 400 500 600 700 800 900 |
Color/Background Properties
| Property | What it Does | Possible Values |
|---|---|---|
| color | Controls the color of the text | browser decides (default) color name |
| background-attachment | Controls the scrolling of the background | scroll (default) fixed |
| background-color | Controls the color of the background | transparent (default) color name |
| background-image | Allows you to set a background image | none (default) image url |
| background-repeat | Allows different patterns of background repetition | repeat (default) repeat-x repeat-y no-repeat |
| background-position | Controls the position of the background on the page | 0% 0% (default) postion in pixels ie {20,20} percentage ie {5%,7%} top bottom left right center |
Box Properties
| Property | What it Does | Possible Values |
|---|---|---|
| width | Controls the width of a section | auto (default) number of pixels percentage |
| height | Controls the height of a section | auto (default) number of pixels percentage |
| border-color | Controls the border color of a section | default text color (default) color name |
| border-style | Controls the style of a border |
none (default) solid double |
| border-width | Controls the width of a border | undefined (default) number of pixels thin medium thick |
| border-top-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-left-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-right-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| border-bottom-width | Controls the width of a border side | medium (default) number of pixels thin thick |
| margin-top | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-left | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-right | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| margin-bottom | Controls the width of a margin from the specified side | 0 (default) number of pixels percentage |
| padding-top | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-left | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-right | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| padding-bottom | Controls the amount of padding from the specified side | 0 (default) number of pixels percentage |
| float | Controls the floating of a section | none (default) left right |
| clear | Defines whether a section disallows other sections on its sides | none (default) left right |
Classification Properties
| Property | What it Does | Possible Values |
|---|---|---|
| white-space | Controls the white space formatting of a section | normal (default) pre nowrap |
| display | Controls the display of a section | block (default) inline list-item none |
| visiblity | Controls the visibility of an element | inherit (default) visible hidden |
| z-index | Controls the layering of an element | auto (default) number |
The first way to add a style to you page is to simply declare it inside an HTML tag. The way to do this is to add the style=” ” attribute to an html tag. The general form to add one style property looks like this:
style=”property:value”
To help clarify this, let’s look at an example. If you want the color of some text to look red, the style attribute would look like this:
style=”color:red”
The style sheet property is “color”. The value of the color is “red”. Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks.
Now, you just insert this into an HTML tag, such as the <DIV> tag. DIV is just a division on a page. Remember to close the tag when you are through or you will have more red text than you bargained for! Here is the sample code:
<DIV style=”color:red”>Wow, I am totally red!</DIV>
This will give you the following:
You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So if we want the text to be red and to be italic, we would do the following:
<DIV style=”color:red; font-style:italic”>I’m some red-hot italic text!</DIV>
Now we will have text that is both red and italic:
In this way, you can add any number of properties to the section of text. Just separate them with semicolons:
<DIV style=”color:red; font-style:italic; font-weight:bold; font-family:Arial”>
Now I’m also bold and have an Arial font!
</DIV>
Now you would get this:
Don’t worry about learning all of these properties right now, we’ll get to examples of all of the css properties in later tutorials. This is just showing you how to use the style attribute for now. If you want to see a page with a listing of the css properties, check out the CSS Properties Tables and browse through the listings. You can even use the style attribute now to test some of them out if you’d like.
Well, if you want to move on to the next section, you can see how to add the style properties to tags by using the <STYLE></STYLE> tags in the head section of your page.
Well, the style attribute was okay, but you may have noticed it did not make anything much easier than it was to use several html tags. Well, now we are going to see a method of using style sheets that will begin to make life a little easier because you won’t have to write the same thing numerous times on one page to get the effect you desire.
To do this, we are going to declare a style inside the head section of the page. A style in the head section must begin with the <STYLE> tag and end with the </STYLE> tag. Below is an example that declares the style for the <SPAN> tag in the head of the document. (The SPAN tag is a division in a page. It won’t break to the next line after you close the tag, like the DIV tag does) :
<HEAD>
<STYLE>
<!–
SPAN { color:red; font-style:italic }
–>
</STYLE>
</HEAD>
The whole thing begins with the <STYLE> tag. Right after the STYLE tag you will notice that we begin an html comment. This hides the contents of the STYLE tag from browsers that do not recognize it, so it won’t be printed on your page.
Now you see this line:
SPAN { color:red; font-style:italic }
This line declares that every time you use the <SPAN></SPAN> tags in your page, the text between the tags will be red and italic. Notice you do not use the less-than “<” or greater-than “>” signs around the SPAN declaration. Also, rather than using equal signs or quote marks, we place the style properties inside two curly brackets { } to declare the style properties. The properties are each separated with a semicolon. For more on the style properties and values, see the previous section for more on the syntax for declaring a style property and its value.
Now that you have that in your head section, you can just use the <SPAN></SPAN> tags to make yur text red and italic, rather than writng out two tags for it each time you need the effect:
<SPAN>I am red and italic,</SPAN> but I am not. <BR>
<SPAN>I am red and italic too!</SPAN>
This will give you the following:
I am red and italic, but I am not.
I am red and italic too!
Now if you were using Netscape, you probaly did not see the red and italic text above. Netscape doesn’t seem to support this feature yet, so here is what it will look like when Netscape puts out a new browser supporting this feature:
I am red and italic, but I am not.
I am red and italic too!
You can declare a style this way for almost any tag, but sooner or later you’ll run out of tags, or you will not want EVERY instance of a certain tag to do the same thing. In the next section, we will see a way to get around this problem u
sing classes and IDs rather than declaring a style for the tag itself.
Now that you know how to use styles in the head section, you may like to use a method besides defining a tag to have the same style each time you use it. What if you want to have a section of text with a red font and another with a green font, but do not want to use up all the tags you have for a section of text? Well, using a class allows you to change the style of something without the need to use up a tag each time you wish to have a new style.
To define a class, go to the head section of your document, and then go inside the <STYLE> and </STYLE> tags. A style definition would look like this:
<HEAD>
<STYLE type=”text/css”>
<!–
.redfont { color:red }
–>
</STYLE>
</HEAD>
The name of our class is “redfont”. Notice the dot that comes right before the name of the class. This notifies the browser that this is a class definition and not a tag definition. After that, we define the style the same way we did before.
So, if you want to declare one class that gives you a red font, and another that gives you a green font, you would type the following:
<HEAD>
<STYLE type=”text/css”>
<!–
.redfont { color:red }
.greenfont { color:green }
–>
</STYLE>
</HEAD>
Okay, now that we have our classes set up, we need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=” ” attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be red, you could add the class attribute to a <DIV> tag, like this:
<DIV class=”redfont”>I am red, so I’m important.</DIV>
Now you will get the text in a red font:
Now, if you would like to have a section with a red font and a section with a green font, but wish to use the DIV tag for both, you can!
<DIV class=”redfont”>I am red, so I’m important.</DIV>
<DIV class=”greenfont”>I am green, so there.</DIV>
And now you have what you wanted:
Now that you know about classes, you may want to see an ID. These are used in the same way, but rather than using a dot before the name, you use a number sign (#).
<HEAD>
<STYLE type=”text/css”>
<!–
#redfont { color:red }
#greenfont { color:green }
–>
</STYLE>
</HEAD>
And when you wish to use the ID later, use the ID=” ” attribute:
<DIV ID=”redfont”>I am red, so I’m important.</DIV>
<DIV ID=”greenfont”>I am green, so there.</DIV>
And you get the same thing we got with the class definition:
Using classes and ids, you can begin to see what style sheets can do for you. If you had a bunch of text sections in green and wanted them all to be light green instead, you would only need to change the style definition of the class “greenfont” in your head section, rather than changing 5 or 6 <FONT> tags.
If you would like this effect to work accross multiple pages, then you will want to use an external style sheet. This will enable you to use a set of styles in each page that is linked to the style sheet.
Well, suppose you would like to be able to use one group of styles- but you want to use them on many pages at once. This can be done through the use of external style sheets.
To begin, open your text editor and create a new blank document. Now, type in just the following information:
DIV { font-family:Arial }
.redfont { color:red }
Now, save the file as “style1.css” (You can use any name you wish, just be sure you have the .css extention at the end).
To link to a style sheet, you need to add the <LINK> tag inside the head section of your html document. Here is the general form:
<LINK rel=”stylesheet” type=”text/css” name=”anyname” href=”url”>
The rel=”stylesheet” attribute just says to look for a stylesheet. The type=”text/css” tells the browser the mime type of the document, which is a cascading style sheet. The name=” ” attribute allows you to give the style sheet a name if you wish. The href=” ” attribute is where you place the url of the style sheet. You can use an absolute or relative url, as long as you point the browser to the .css file you wish to use.
Now, open up an HTML file you would like to add these styles to. Go to the HEAD section of that page (between the <HEAD> </HEAD tags). Now, type in the following HTML to link to the style sheet you created a minute ago: (Be sure both files are in the same directory)
<HEAD>
<LINK rel=”stylesheet” type=”text/css” name=”style1″ href=”style1.css”>
</HEAD>
You must add the LINK tag to every page that you want to use the style sheet on. If you don’t, some of your pages will not work correctly, and that messes up what you wanted to do.
Now, any time you use the DIV tag in one of your pages linking to the style sheet, you will get an Arial font:
<DIV>I am Arial!</DIV>
And….
And when you use the “redfont” class, you will get a red font:
This line is <SPAN class=”redfont”>really</SPAN> important!
And….
This line is really important!
