CSS (Cascading Style Sheets) are actually very easy to use and understand. Once a user understands how each command is setup and works in a style sheet, they can then begin to understand CSS and how to utilize it properly. CSS us used to style the way a page looks and in most cases will help with browser compatibility.

CSS is commonly used in larger sites as it can be setup to style fonts, text, and any other aspect of a site with simple commands. These commands tell the browser how to display certain aspects of the site and in which way they will function. This can be used on anything from the URL tags, to the paragraph tags.

This is useful for users that just want certain tags, for instance the paragraph tags, to be displayed in a certain way. Once setup in CSS, each time a paragraph tag is called, it will display the text within the paragraph tags any way defined in the CSS.

The Basics

CSS can be called in two different fashions. It can be used directly in each html file, or it can be called from another “.css” file within the site. Most users opt to call a CSS file from another location as it will reduce the amount space each file will take up.

Let’s say a site has 200 pages within it. Instead of having the same code within 200 different pages, it can be called from a single file each time the pages are loaded. This will reduce the total amount of space used on the server and it will also reduce the amount of work needed if something needs to be changed in the CSS coding. Only one file would be changed instead of 200.

Using CSS in an HTML File

CSS can be used within an HTML file by simply using the style command.

To start a style sheet, simply use <style type=”text/css”> this will start the style sheet. To end a style sheet a simple closing command can be used, </style>. This will let the browser know that the style sheet is now closed.

Links

There are a number of commands that can be used within these tags. Let’s look at how we can change the style of links within a site.

The “a” command is still used in this, but in a different style and way.

a:link { }

The above command is used for all links. The “{}” brackets are used to open and close the function that will be used for that command. Now let’s look at some functions that can be used within this command.

background: #000000;
color: #FFFFFF;
font-size: 10px;
font-style: Verdana, Helvetica;
text-decoration: underline;

The above commands can all be used for text links and many other commands in CSS. There are many more commands, but we’ll start here as this will give a user a basic set of functions to use on their documents.

background: #000000; - This command can be used to set the background color behind a link. This is useful for making those hard to read links, stand out.

color: #FFFFFF; - This will change the color of the link itself. So this shouldn’t be the same color as the background color, or the link and the background color will blend.

font-size: 10px; - This will put the font at size 10. This can be changed to anything needed.

font-style: Verdana, Helvetica; - This will display the link using the fonts Verdana and Helvetica. Remember to use fonts that most users will have, like Arial and Verdana. Something common is always needed.

text-decoration: underline; - This can be used to decorate the text in any way that is wanted. In this case we want all links to be underlined, so this will place a link under all the links contain within the page using this style sheet.

Remember that none can be used in any of these commands, but it would be similar to not adding the function at all.

Now, let’s put all of this together in a proper coding that can be copied directly to an HTML file. Feel free to use this code on anything you’d like, just copy and paste it directly into your own HTML file.

<style tyle=”text/css”>

a:link {
background: #000000;
color: #FFFFFF;
font-size: 10px;
font-style: Verdana, Helvetica;
text-decoration: underline;
}

</style>

The above code is properly setup, and whenever the URL command is called, and this style sheet is present, it will make any link use this setup. There are two other forms of link commands that can be added to this in order to expand and customize links even further.

a:visited
a:hover

The above two extra functions can be used with the “a:link” command to customize the look and feel of links even further.

Visited – The visited command is used for links that have already been visited or click on by the user. A different color can be setup to display visited links differently from other links.

Hover – The hover command is used when a mouse hovers or moves over a link. This can be setup, so links change colors, backgrounds, or even underline or strike through. There are many different ways this command can change the way links look when a mouse hovers over them.

These would be used the same way the first command we learned was used.

a:visted: {
background: #FFFFFF;
color: #000000;
font-size: 10px;
font-style: Verdana, Helvetica;
text-decoration: none;
}

In this case we didn’t want visited links to have an underline and also the background color would change from black to white and the link color would change from white to black. That way a user would know which links they’ve already clicked on.

Continued

In the next article we’ll work on how CSS can be used to define how text and other sections of a page are displayed and formatted. CSS can be used on a number of different applications.