<Home> | <HTML Tutorials> | | <Color Charts> | <Practice Area>
Basic Exercises
· Introduction
· ex. 1 - Inline CSS
· ex. 2 - Embedded
· ex. 3 - External
Join our mailing list to receive tips and tricks.
CASCADING STYLE SHEETS TUTORIALS: FUNDAMENTALS AND BACKGROUND INFORMATION
Why Learn CSS:
Cascading Style Sheets, styles, or CSS, make laying out a web page much easier for us. HTML was never meant for doing page layout like Microsoft Word, or Adobe PageMaker, so CSS was created to aid in our layout desires.
CSS save time, are easy to change, and allow for greater text formatting and control. CSS is merely code that brings boring, old HTML to life.
For example, we could use the heading tag, <h1>, but what we get is a boring heading with black text. With styles we could set up a style, give the style a name, then assign the style with several "properties" to make the heading italic, change its font size, change its font face, and more.
Just like HTML, style sheets require a positive attitude and determination to master them. I have complete faith in you.
For training purposes, we have provided you with a list of CSS properties that you will be using throughout the tutorials. We suggest that you print out a copy and keep it handy. Take a look and print out our List of CSS properties (PRINT THIS OUT NOW. After printing, close the window that pops up and continue reading.)
3 WAYS TO USE CSS:
There are three ways to use CSS. As the exercise links on the left of this page indicate, we will do exercises using all three ways. I will give you an overview below. The three types of CSS usages are, Inline Styles, Embedded Styles, and External Style Sheets.
1. Inline Styles:
This form is somewhat of a paradox. CSS was created so that we did not have to specify with every tag how we want it to look. But there are times when you may want to make one word, or one letter, or one paragraph look differently than the others. Most likely, you will use this technique to "counteract" some other style that you have already specified prior.
For example suppose we created a web page that had 10 h1 sized headings but wanted to draw attention to one of them, leaving the others unaffected. We would set a style within the particular h1 tag that we wanted to change.
A typical heading looks like this:
Heading Size 1
But we could code the tag as follows:<h1 style="font-size: 12px; color:#ff0000"> Heading Size 1 </h1>
Which would give us:
Heading Size 1
As you can see, inline styles are structured just like HTML attributes. The main part of an inline style is the style="" part. Between the quotes is where we put the css property. We seperate the property from the value we assign using : (the colon). The value is whatever we want to use. When we use more than one "style definition" (a property and its value), we seperate each set with a ; (semicolon). The above example shows that I used 2 style sets.2. Embedded Styles:
Embedded styles are a bit more challanging, BUT YOU CAN DO IT! With inline styles, all we did was add the style inside of an HTML tag. Why? Because we only wanted it to work in one place.
With embedded styles,we want the whole web page to use whatever styles we set up. Therefore, not only will we have to reference the styles inside of our body tags, we will need to set up the rules inside of the <head> tags.
So, without explaining everything, to use embedded styles you would need to have the following coding within the head tags:
<style type="text/css">
<!--
-->
</style>
The above coding is the bare minimum needed to make an embedded style work. I copied this coding into a text file so I can reuse it over and over again without having to retype it each time. Don't worry about that for now.
If I wanted to set up two styles, one for the H1 tag and one for making text green, I could adjust the coding above as follows:
<style type="text/css">
<!--
h1 {font-style: italic}
.greenbeans {color:#00ff00}
-->
</style>
The style tags let the browser know that you're using an embedded style. The comment tags are unimportant. Just disregard them for now. Between the comment tags is where we specify our styles.
Above you can see that I made reference to a heading tag "<h1>". This indicates that you can use any html tag to apply a style to. Just remember, once you do, EVERY tag that you use, in my case, every "h1" tag, will be altered automatically.
For the next style I used, the ".greenbeans" style, I wanted to create a special, independent style that is independent from any html tags. When we create our own styles in this way, we are creating what is called a class. The greenbeans class doesn't effect all of the h1 tags like the h1 style does. When we create a class, we put a dot before the name. We can call our class anything we want, hence the odd name I chose.
LETS SEE THESE BABIES IN ACTION:
If I used the following coding:
<h1>Styles are cool</h1>
We would get:
Styles are cool
If we wanted a green heading we would type:<h1 class="greenbeans">Class Styles are cool</h1>
We would get:
Class Styles are cool
NOTE:Notice that our headings are very large. They get their size from the h1 specifications without our help or interference. We didn't have to do anything for this to happen. Notice that the first heading is big and italic. Notice that the second heading was green like we wanted it to be, but it was still big and italic! It got italicized from our first style, which got big from the rules of h1 tags in HTML. Hence, the properties cascade from each instance to the next? That's why they call it Cascading Style Sheets!! Cool huh? I bet your catching on now, aren't you?
3. External Style Sheets:
External Style Sheets are really neat, and exciting,and challenging all at the same time. But, why would we use them? Think? Know the answer yet?
Embedded style sheets are very efficient for use on one page. But, what if we have a web site with 40 pages? If we copied the style tag coding from within the head tags of one document, we would have to paste it into 39 other pages. Then, what happens when we change our mind on a style we set up, either text size or color for example? We'd have a lot of work on our hands!
That's where external style sheets come into play. All we have to do is create a text file with our style commands, give it a name, and reference the file in all of our documents. Then, if we have to make changes to any style, all we have to do is change the file one time. All of the pages that reference it, automatically change. IT'S TRULY WONDERFUL, TRUST ME!
The graphic here represents what a style sheet would look like. I named this style sheet "mystyle.css.
The .css extension just lets the browser know that it's a css file.
I placed this file in the same directory as the css files you're looking at now, so if I wanted to reference them, I could do so by referencing just the name of the css file name and not worry about complicated directory structures and commands.
I created a style for the body to make all of my text verdana. This is a convenient way to set the font for the entire page without having to do so repeatedly. Watch out though. This can effect everything on the page. The two other styles are self explanatory.
Notice that unlike an embedded style that uses the style tag, we don't need to include the style tags in an external style sheet. Just state your styles and you're off.
This is the command that we need to include inside of our head tags to link to the style sheet:
<link rel="stylesheet" type="text/css" href="mystyle.css">
The link tag looks complicated, but it's not. All we need to be concerned with is the href="" part. This is where we tell the browser where to find our style sheet so it can apply our rules whenever we use them.
The DIV and SPAN Tags:
The DIV and SPAN tags allow us to create styles that are free from predefined properties like HTML tags have. The DIV tag acts like the paragraph tag, sort of. It had a break before and after its use, but don't worry about that. When you see it in action, you will understand what I mean.
The SPAN tag is useful for creating what is called an "inline style". That's fancy speak for "we can apply a style to, say 3 words of a line of text.
I will demonstrate both tags in the exercises, so what are you waiting for? Go do the exercises!!!
END OF CSS FUNDAMENTALS AND BACKGROUND INFORMATION
Go to Exercise 1: Inline CSS -->
Home | HTML Tutorials | CSS Tutorials | Color Charts | Practice Area
Copyright 2003 FromThePen.com All Rights Reserved