All About Coding - Programming and Software Tutorials

Introduction To Style Sheets

Introduction:

In this tutorial you will be given an introduction to using CSS or Cascading Style Sheets to help you manage fonts and other like items in your web pages. CSS is supported by all of your major browsers, but some support it better than others. I strongly suggest testing your page out on several different browsers before releasing it to the public.

Let's Get Started:

1. Ok there are two ways you can have CSS in your web page. The first is to have it embedded in each file. I have yet to find a good reason to do this however. The second way is to have 1 or more central CSS files that all the pages on your web site can access. The benefit of this is that if you were to need to change a font due to comparability or customer request you change one line of code and not have to update every page. While HTML will still support the font tag CSS has all but replaced it. (example <font color=red>test</font>) Most of you modern HTML editors will no longer make the above code but rather place a style in your open file.

2. Ok so first lets make a new CSS file. You don't need any special software to do as it is a plain text file just like a HTML document. I personally recommend Dreamweaver as it has a very nice set of tools for creating CSS. For the sake of simplicity though I will try an make this as generic as possible so that you can make them in whatever software you want, even if that is notepad! To create a new CSS file simply start a new document as you can save it as css.css. You can put anything at the front as long as you use the css file extension. (not 100% true, but just go with me here). That's it you've made a new CSS file. Now lets put something meaningfully in it.

3. Adding Styles to you CSS file. To do this open the file in what ever software you have and enter the following.

.white_med {
font-family: Verdana, Tahoma;
font-size: 12px;
color: #FFFFFF;
}

.black_lg {
font-family: Verdana, Tahoma;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #000000;
}

.black_med {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
}

.copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
.white_title {
font-family: Verdana, Tahoma;
font-size: 24px;
color: #FFFFFF;
}

.white_links {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

4. Ok lets go through this odd looking code. To make a style you must follow a simple formatting style. If you have ever done any C++, C#, Java, Java Script or any other similar languages this will look very familiar. If you haven't here's the run down. First start each style with a period followed but the style name. There must be no spaces but you can use underscores to make it more readable. Then you have an opening bracket { followed by lines of code that all end with a semicolon ; and finally you end the style with a closing bracket }. In my code you will see several different styles that i like to reuse, in fact several of them are used in this very page. For example the text you are reading right now is the black_lg style and the code above the black_med style. For a good example lets take a look at the final style white_Links.

A.	The first line inside says font-family: and lists off several font names. Basically this tells the browser to use the font Verdana if available. If it is not available then try and use Arial, and so on. All these fonts are similar in the way they look so they are a font family. *NOTE* It is always good to supply more than one possible font because the viewer of the web site may be running a different browser or operating system that does not have the font you requested.
B.	The second line font-size: 14px; lets you choose the font size in pixels. *NOTE* Different browsers handle this differently any may cut off the bottoms of your font if it doesn't fit in the desired area. To take care of this you can use the line-height: 25px; to account for this. Just adjust the line height till it fits your text.
C.	The font-style lets you put something in italics or several other special styles. You can look up more info on this if you require more information on it.
D.	The font-weight line lets you decide how dark you want the text to be. You can make it bold, bolder, lighter or several other values. You can lookup info on this line to find all the possible values. I mainly just use it to bold my text. *NOTE* It is still acceptable to use the <strong></strong> code in your pages if you are just bolding a small item within a set of text. However if you need the entire font to be bold stick to using this CSS property.
E.	The color property lets you set the Hex value for your font color. You can look up more info about the HEX RGB values for color but I will list a couple common ones for you here. #FFFFFF - White #000000 - Black #FF0000 - Red #00FF00 - Green #0000FF - Blue
F.	The last property for this style if the text-decoration. I use this property to disable the underline when this is used as a link. Personally I think that the old blue underlined hyperlinks are not the most attractive and take care of it with this style.

5. Well that's it for the CSS file now how do we get our web pages to use it? Its really very easy just put the following line of code after your head tags and before your body tags. Make sure that the href points to the location of the file.

</head>

6. Now that you have created your styles and linked them to your page how do you use them? Most of the time you must place the class="style name" inside of many of your common tags. Below I will list a few different ways to use your new styles. These three examples let you apply you style to a div tag, table cell and a Hyperlink. You can also apply it to your body tag, table, table row, or just about any other tag you wish. Do some more digging into CSS and you can setup styles for text boxes, cell borders and many other things you simply can't do with just HTML

<div align="center" class="black_med">Your Text Here </div>

<td bgcolor="#FFFFCC" class="black_med">Your Text Here</td>

<a href="first_banner.zip" class="white_links" >downloaded here</a>

Conclusion:

Your Done! Now you can use simple CSS styles to add more pleasing fonts to your web site. From here you should be able to go and find more information on how to extend this to cover forms, tables and just about any other aspect of your web pages. Stay tuned for more advanced tutorials where we will go more in depth on CSS.