CCS tutorial

CSS Introduction

It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

* Add new looks to your old HTML
* Completely restyle a web site with only a few changes to your CSS code
* Use the "style" you create on any webpage you wish!

A stylesheet can, and should be, completely separate from your HTML documents. When you have mastered CSS and HTML, you will be able to separate your web site's design and formatting (CSS) from the content (HTML).
Intended Audience

Before you begin the CSS Tutorial we suggest that you check to see you meet the following recommendations:

* You have used HTML in the past
* You know the basic HTML tags and vocabulary.
* You want to be a better web designer!

If you said no to one of the above, we recommend that you check out our HTML Tutorial before taking on CSS.

When you are ready, continue the tutorial to learn about the basic form of CSS and where you should place your CSS code.
CSS Selector

CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code and you should have a solid understanding of them when you are finished with this tutorial. Luckily for you, they are pretty simple to comprehend!
CSS Selector: Where It Fits In

In a typical CSS statement you have the following:

* SELECTOR { PROPERTY: VALUE }

"Property" is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property.
CSS Selector Name

The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look like:

* p { PROPERTY: VALUE }

The above example is a template that you can use whenever you are manipulating the paragraph HTML element. In the next lessons, we will not only teach where to place your CSS, but why and where you should use CSS as well.

Internal CSS

Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag,

Your page's content!

This doesn't actually do anything visually. The code style tag just tells the browser that we will be defining some CSS to be used on this page.
Creating Internal CSS Code

CSS code is not written the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way of manipulating existing HTML. Below is an example of some simple, yet fully functional, CSS code.
CSS Code:

White text on a black background!

Display:

White text on a black background!

You probably noticed that in our CSS code we were altering the and

HTML tags. The great thing about CSS is that it is an intuitive language. Once you understand the general format for CSS code, you are pretty much set.
General CSS Format:

* "HTML tag" { "CSS Property" : "Value" ; }

Back in our code example, we manipulated

and , both well known HTML tags. To clarify, here is a step-by-step process of what is going on in that first line of CSS code where we played around with "p".

* We chose the HTML element we wanted to manipulate. - p{ : ; }
* Then we chose the CSS attribute color. - p { color: ; }
* Next we choose the font color to be white. - p { color: white; }

Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code that altered the 's background:

* We choose the HTML element Body - body { : ; }
* Then we chose the CSS attribute. - body { background-color: ; }
* Next we chose the background color to be black. - body { background-color: black; }

Until you become accustomed to using CSS code, you will probably find your CSS code not working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you ever have issues with the correct format for CSS.
Internal CSS Gotta Knows

* Place your CSS Code between
* Be sure you know the correct format(syntax) of CSS code.
* CSS will literally save you hours of time... after you spend a few getting the hang of it.

CSS Code:

Your page's content!

This doesn't actually do anything visually. The code style tag just tells the browser that we will be defining some CSS to be used on this page.
Creating Internal CSS Code

CSS code is not written the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way of manipulating existing HTML. Below is an example of some simple, yet fully functional, CSS code.
CSS Code:

White text on a black background!

Display:

White text on a black background!

You probably noticed that in our CSS code we were altering the and

HTML tags. The great thing about CSS is that it is an intuitive language. Once you understand the general format for CSS code, you are pretty much set.
General CSS Format:

* "HTML tag" { "CSS Property" : "Value" ; }

Back in our code example, we manipulated

and , both well known HTML tags. To clarify, here is a step-by-step process of what is going on in that first line of CSS code where we played around with "p".

* We chose the HTML element we wanted to manipulate. - p{ : ; }
* Then we chose the CSS attribute color. - p { color: ; }
* Next we choose the font color to be white. - p { color: white; }

Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code that altered the 's background:

* We choose the HTML element Body - body { : ; }
* Then we chose the CSS attribute. - body { background-color: ; }
* Next we chose the background color to be black. - body { background-color: black; }

Until you become accustomed to using CSS code, you will probably find your CSS code not working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you ever have issues with the correct format for CSS.
Internal CSS Gotta Knows

* Place your CSS Code between
* Be sure you know the correct format(syntax) of CSS code.
* CSS will literally save you hours of time... after you spend a few getting the hang of it.
External CSS

When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the instead of