CSS (Cascading Style Sheets) can be used along with HTML to give you cleaner, faster code. There are three ways that you can incorporate CSS into your pages. You can use In-line Styles, Client Side Style Sheets and/or Remote Style Sheets.
Client Side Style Sheets
Client side means that the style sheet is placed directly in the HTML document itself. The basic structure of a client side style sheet looks something like this:
<style type="text/css">
|
|
This is usually placed within the <head> tag.
You begin with the <style> tag. This tells the browser that you are starting out a style sheet.
The next thing we see within the style tag is a selector. A selector can be an HTML element (such as body, table, etc..), a class or an id.
We'll cover classes and ids in another tutorial.
Inside the curly braces ({ and }) is where you declare all of the property/value pairs that will modify your HTML document's looks. A few examples of properties are color, font-size and font-family.
Here is a working example of a style sheet that will use the above properties with the body selector:
<style type="text/css">
|
|
Let's break down the above code. We start of with the style tag as we did in the first example. Then we open a selector - the body. In it we place three properties; font family, font size and color. font family is used to set what fonts will be used in the document. You separate all of your desired fonts with commas. If the user doesn't have the first font on his/her computer, the browser will look for the second, if he/she doesn't have the second it will look for the third and so on...
The next property we see is font size. This obviously sets the size of the text of the document. I used 11px in this example, which is also what is used on this website.
The last property in the above example is color. color is used to specify what color the text of the document should be. I used the hexadecimal equivalent of black.
If you go ahead and create an HTML document with the above style sheet placed in the <head> tag, you'll notice that all of the text on the page will be transformed by the stylesheet. This makes use of the <font> tag much smaller.
Remote Style Sheets
Remote style sheets are much like client side, the only differece is you store your CSS in a file on the server. Then, to get the style sheet in use on your HTML documents, all you need to do is use the <link> tag.
Open up notepad and create a new file named style.css or style.txt. Now paste the following into that file and save it:
body {
|
|
Now create another page called test.html and paste the following into it:
<html>
|
|
Notice the <link> tag, this is the important part of this example. It basically tells the browser to include the contents of the file in the href attribute into the document as a stylesheet.
If you open up test.html you should get the same thing from it as you did with the second example of client side style sheets. If you don't, make sure you have saved both style.css and test.html to the same location on your computer / webhost.
The benefit of remote style sheets over client side style sheet is that you can have multiple pages of your website use the same line of code to implement your CSS. Then when you need to change it all you have to do is modify one file; the .css file.
In-line Styles
In-line styles allow you to specify settings for individual elements. An example is shown below.
<html>
|
|
Copy and paste the above code into notepad, save it as test.html(or whatever you'd like) and view it's output. As you can see, the body tag has an in-line style, which sets the background color to a gray color. The first <p> tag also has an in-line style, this one sets the font size of the text within that paragraph to 18pt. We also see two font tags with in-line styles. One of them sets the font color to blue, the other sets it to red.
Summary
You should now know the three ways that CSS can be implemented in HTML documents. You should also have a basic understanding of the syntax of CSS. (property: value;)
I hope this tutorial was helpful to you. If you have questions or comments, feel free to ask using the "Discuss this tutorial" link in the right column, under "Tutorial Options." 
| Discuss Tutorial: Introduction to CSS | 13 Comments |
Thanks alot.
- James
quewlgood tut~Faramir
Very helpful site...Thanks..