TrueFusion -- Spread the Word

Tutorials » Css » The Basics

You can put style sheets in your pages in three ways. The best way is by this tag:

<link href="url_of_stylesheet.css" rel="stylesheet" type="text/css">

The other way is within this tag:

<style type="text/css"></style>

The final way (using the style attribute):

<span style=" "></span>

For every html tag that there is the only way for the style sheet to have any effect on all of those specific tags you'll have to put the name of the tag in the style sheet.
For Example: the font tag () in the style sheet or style tag will be like this: font{}.

Another Example:

<style>
font{}
</style>

Classes & Ids

A period in front of a word in the style sheet means that you are forming a class (e.g. .color is the equivalent of ).
A hash sign (#) in front of a word in the style sheet means that you are forming an id (e.g. #color is the equivalent of ).

Examples

Here are some basic style properties and some values that can be applied to them.

color: a color, obviously;
text-decoration: none, underline or overline, etc...;
position: absolute or relative, etc...;
cursor: default, hand, help, wait or crosshair;
top: measurement (= how far it is from the top of the page view.);
left: measurement (= how far it is from the left of the page view.);
background-color: a color, obviously;
font-family: "font name";
font-size: measurement;
background-image: url(path/to/image.ext);

Here is something you can use to start off on your links:

a {
color: black;
text-decoration: none;
}

a:hover {
color: white;
text-decoration: underline;
}

a:active {
color: silver;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: underline;
}

Other

Some people don't know that more than one style can be applied to an element just by adding a space in between the values of the class attribute.

Example

<style>
.bg {
background: white;
}

.border {
border: solid 1px black;
}

.padding {
padding: 2px;
}
</style>

<span class="bg border padding">Text</span>

This will output as:

Text