Although most people use external CSS files, there are two more ways of applying styles to text and images. To show you these three methods, we'll create a class called redtxt and set its properties like this:
Font color: red and
Font weight: bold.
Now to look at the first way of incorporating CSS:
<p style="color:red; font-weight:bold">
This is some bold, red text.
</p>
As you can see, the style for the relevant tag is used inline. Multiple properties are seperated by a semi-colon. All the text contained within this tag will have the formatting as specified in the style tag.
The second way of using stylesheets is to add them in the HEAD of your HTML document using the <sty;e> tag. Your tags in your body can then referance this class by using the class attribute.
...
<head>
<style type="text/css">
<!--
.redtxt {
color:red;
font-weight:bold
}
//-->
</style>
</head>
...
<p class="redtxt">
This is some bold, red text.
</p>
The third and most common (and most efficient) way of using CSS is to use external stylesheet files. You create a seperate text file containing the classes and properties of your styles, and then link to this file using a tag in the <head> of your document.
The advantage of using external stylesheets, is that you can change the whole scheme of your website by simply editing your .css file. Let's first start by making the file. Open Notepad, type the following and save it as styles.css:
.redtxt {
color:red;
font-weight:bold
}
You can add as many style classes and properties as you like. On each page you want to reference this class, you must include the following code in between the <head></head> tags:
<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
Note that you must replace the path to your stylesheet if it does not reside in the same directory as your HTML page(s).
Now, just like in the second way, you can merely use the styles by referencing their classes using the appropriate tag:
<p class="redtxt">
This is some bold, red text.
</p>
This is some bold, red text.
What do you think?
