Cascading Style Sheets (CSS) Beginner's TutorialWritten by: Livio | This article is a basic introduction to CSS and how it can be applied to your webpages.

Note: This tutorial assumes you have basic knowledge of HTML.

What is CSS and why learn it?

CSS is a programming language that is used to control the appearance of HTML elements. Its main purpose is to improve organization by allowing you to create sets of styles that can control the appearance of multiple objects-all while defining their properties only once. CSS also allows you to save coding by defining all of the properties you need in one place. For example, if you wanted make all of the text in a table cell red, bold, and center-aligned, then you'd have to write something like this:


But with CSS, you can get rid of all of those tags and define all of your properties in one place:


Now there is less clutter around your text, thus making it easier for you to write the code.

The Basic Syntax

As you can see from the example above, you define your CSS styles from inside the <style> tag. It is recommended that you define the type of your styles to text/css. These style tags belong within the <style> tags of your webpage. But one of the major things about CSS is that you can define your styles from a separate file and then include it into your pages, which we'll look more into later.

Once you have the style tags set up, you can define your styles. First, you have to specify what object(s) you are defining. In the previous example, we wanted to change the properties of the text that was inside the table cell (the <td> tag), so in the CSS style, we wrote "td" as the object were defining properties for. This was telling the page to give ALL table cells in the entire page these specific properties. Whenever you assign properties to any type of HTML tag in CSS, it affects all instances of that tag. So in this case:

All paragraph tags will have a font size of 20px, and using CSS is much more efficient than to write out <font size="4"> for every paragraph.

After you've specified what object you're referring to, you place the information within brackets { and }. Inside the brackets, you then make small strings of information consisting of the property and its value separated by a colon ( : ). For example, if you wanted to make all paragraphs center-aligned, the property is called "text-align".

Then you'd place a colon, and give the property its value, which in this case we want to be "center". The entire bit of information then needs to be ended with a semicolon ( ; ). After the semicolon, you can add more properties and effects to it.

Also note that you do not need to put almost any spaces in your CSS codes. You can use spaces to help make it easier to keep track of, or you can choose to save file size and not use any spaces at all.

Creating Classes and IDs

Most often, you will only want to define the properties of one specific paragraph rather than all paragraphs in the page. For this reason, you should create a custom class, assign attributes to that, and then assign that class to whatever you want.

To create a CSS class, you basically act like it already exists. When you specify the object that you're assigning properties to, you start the name of the object with a period ( . ), and then you write the name of the class. For example, if we wanted to create a class called "example" and then center-align it, then we'd write it like this:


Now that the style is created, we can assign it to any HTML object we choose:


You can assign this class to as many elements as you want. Using a class gives you much greater control over which objects are or aren't affected by the CSS style.
Something similar to a class is an ID. The major difference between a class and an ID is that instead of using a period, you use the pound symbol ( # ).


As you can see, IDs work very similarly to classes. However, IDs are intended to be used only once, whereas classes can be used several times. It doesn't matter which you use (because you can always just stick to using classes every time and you'll be fine), but creating IDs can be helpful in coding organization as it helps remind you that that style represents an important object on your page. (IDs are often used to identify elements for use in other scripting languages such as JavaScript.)

Defining CSS Styles From Within HTML Tags

Sometimes the objects that you want to use CSS with are so obscure and uncommon that you may not even want to define an entire class or ID for them. It may just be more convenient to attach the style information directly into the tag itself, by doing this:


Anything inside the style="..." property is identical to what would be inside the {} brackets in the <style> tag. Here you can add as many properties as you want without having to keep track of any classes. You can also use the style="" property alongside with a class or ID.


So in the end, that paragraph is 20px in size, red, and italicized. You can also use the style="" property to override any elements of the class that you may not want to be in effect for that specific object.

Defining CSS Styles From an External File

Once your website begins to grow, you'll eventually be adding more pages to it, so it would be a hassle to edit every single page in order to change one repeating CSS style in each page. In this case, it would be best to keep all of your CSS styles in an external file and then have each page link to that file. This means that you can simply edit that CSS file once, and all of the pages in your website will update automatically.

First, to create a CSS file, you must save the file as the extension ".css". You do not need any type of special program to create CSS files. Any text editing program as simple as Notepad is enough. The text that you would put into the file would basically be the same thing that you would write in between the <style> tags-you do not actually have to write <style>. . .</style> anywhere in the file. For example, the previous example's CSS file would only contain the following:


Once you've filled out your CSS file, you can insert the file into any of your pages with this code:


The code has to be placed within the <head> tags of your page, and you should specify the URL of the CSS file within the href="" property. When the page loads with this code in it, it'll work as if the CSS styles were in the page all along. The beauty of this method is that you can easily change multiple pages at once with it. This method is recommended above all other methods of defining your CSS styles.

A Quick Look at Some Tricks with CSS

The creative possibilities with CSS are endless, so to help you get an idea of what you can do with CSS, here's a quick overlook at several common practices.

Body

Defining properties for the <body> tag in CSS will allow you to assign much more effects to your page overall. For instance:


This will make the background color of the entire page blue. You can also assign a background image. . .


. . . and then you can control the way the image is displayed. Using the background-repeat property, you can control how the image tiles along the page. Set it to no-repeat to turn off tiling, repeat to turn it back on (if it was turned off in another style, for example), repeat-x to have it only repeat horizontally, or repeat-y so that it can only repeat vertically.

Along with the background-repeat property, you can use the background-position property to control the position of the background image. You can set it to either: top, middle, or bottom (vertical), left, center, or right (horizontal), or any combination of the two sets to specify which part of the screen the background will start its repeat from.

Span

The <span> tag doesn't do anything at all. It's just there for you to mess around with, letting you attach classes and IDs and other styles to it. It's a great way to attach styles to random parts of text in the middle of a sentence or paragraph or to group a series of other objects together under one class or ID.

Div

A <div> is almost like a free table cell. It automatically takes the size of 100% width with as minimum height as possible, it's automatically invisible, and when combined with CSS, its potential is limitless. There have been entire websites made using only div tags and no tables. They are very convenient because they don't use up a lot of code, other than the CSS applied to them.

One cool thing you can do with a div is to make a scrollbar appear for when its contents run out of. First you must give it a specific width and height, and then through CSS, write overflow:auto. When the div's content overflows from its set width and height, scrollbars will automatically appear.

Divs are also great for experimenting with CSS styles in general. For this next example, you should assign a div with a set width and height, along with a black background so that it's visible. Then assign it the CSS attributes of:


By setting position to absolute, the coordinates that were set by top andleft are relative to the overall page. The result is that the div basically appears with its top-left corner 20px from the top of the page and 100px from the left edge of the page, and it is not subject to any other placement of text or objects. In fact, it seems to float above the rest of the page. Making position:relative would instead make the coordinates based on where the object would have originally appeared.

Another great property for dealing with floating objects is the z-index property. This property controls the stacking of objects, and you'd set it by giving it any number. Then, objects are stacked in order based on their z-index value from highest to lowest, with the highest being on top.

Further Experimenting

There are dozens of different kinds of CSS styles and the best way to get familiar with them is to explore and experiment with them. As you can see through the floating div example, many of these properties can be tied together for interesting effects. For further experimenting, you can find an entire CSS reference page here: http://xhtml.com/en/css/reference/, with a complete list of all the current CSS properties, a brief description of what they do, and all possible values associated with them.

   

| Written by: Livio | Added: Mar 18 2009 | Last Modified: Dec 21 2009 | Views: 1,529 | (Log in to rate) |

Member Comments