This tutorial will tell you how to use css on your webpage.
Before reading this tutorial please be sure you have read the basic CSS tutorial.
Requirements: Notepad, A ready-webpage to test the css.
¤ You need an already coded test webpage (.html) file. I will tell you how to use both Inline CSS and External style sheets.
Inline Style Sheets
» Open your .html file and view the source code. Now we only have to look between the <head> and the </head> tags for the time being ignore everything else.
» Your source code should look like this :
<html>
<head>
<title> Your webpage's title </title>
</head>
<body>
Stuff here.
</body>
</html>
We only want this part for now
<html>
<head>
<title> Your webpage's title </title>
</head>
Start the Style tag right after the <head> tag. Below I am giving you an example css coding defining few properties you might want to use on your webpage.
<head>
<style type=text/css>
BODY
{
font-size: 11px;
font-family: verdana;
background-color:#FFFFFF;
color:#CCCCCC;
scrollbar-Track-Color:#00CCFF;
scrollbar-base-Color: #99DD44;
scrollbar-Arrow-Color:#000000;
}
A {font-weight: bold; font-size: 11px; color: #000000; font-family: arial; text-decoration: none}
A:hover {font-weight: bold; font-size: 9px; cursor: crosshair; color: #cdcdcd; font-family: arial; text-decoration: underline}
TD {font-size: 9px; color: #666666; font-family: arial; letter-spacing:1px;}
.header {border: #666666 1px solid; font-size: 9px; text-transform: uppercase; color: #666666; font-family: arial; background-color: #DDE6E8; text-align: center}
</style>
In th above coding you can see, I used 3 selectors and lots of properties in their declarations. The three selectors are BODY- which has the declaration of these properties: Font (size, face, weight, color etc.),
the background color of webpage, color of the the scrollbar (track, arrow, base). The second selector is the link selector which has the ID called A (not case sensitive)- defines link colors,hover effects,text decoration etc.
Third selector is TD which defines properties of text inside a table. You can see .head in the above code, its not selector though its a class, remember you learned about it in the introduction to css tutorial ? It defines
the properties of text, border etc for the header.
So you put all these css codes between the <style type=text/css> and the </style> tags which are put between the <head> and the </head> tags of your html code for the webpage. This is how you make inline CSS.
External Style Sheets Style Sheets
» This is what you probably wanted to learn. So this is the main CSS tutorial. Here it goes.
Requirements: Notepad, an already coded webpage.
Open notepad and type the CSS code you want for your webpage on it. =P ok feel free to adopt the following code I know it looks tough when you are starting off so I am being kind and letting you copy and paste it, just for practice!
body
{
scrollbar-arrow-color: #FF0000;
scrollbar-base-color: #FFFFFF;
scrollbar-face-color: #FFFF00;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #FFCCFF;
scrollbar-3dlight-color: #99DD44;
scrollbar-track-color: #FF6600;
scrollbar-darkshadow-color: #0066AA;
background-color: #FFFFFF;
font-family: Verdana;
color: #000000;
letter-spacing: 0px;
font-weight: normal;
font-size: 11pt;
cursor: default;}
}
.head{ border: 1px solid #000000; color:#FF6600; font-weight:normal; background-color:#FFFF00; font-size:11px; font-family:Verdana;text-align:left;}
A:link {color: #00CCFF; text-decoration: underline; cursor: crosshair;}
A:visited {color: #FF6600;text-decoration: none; cursor: crosshair;}
A:active {color: #FFFF99;text-decoration: none; cursor: crosshair;}
A:hover {color: #000000;text-decoration: overline;}
» Copy and paste the above code to notepad. Click save and name the file sample.css. Don't forget to give it the .css extension and save it. Whenever you need to edit the css file > right click > open as > notepad.
» Now make a folder and put the .html file of webpage and the sample.css file in it.
» Right click the .html file > open as > notepad.
» Look between the <head> and the </head tags of the html code and put copy and paste this between them
<link rel="stylesheet" type="text/css" href="sample.css">
» Click save. Now refresh your webpage. What do you see ? Yes the above Css sample code consistes of strange colors =) lol.
» You will the color of link, scrollbar , font, size,color etc. has changed. Now the .head effect change has not taken place yet. Open the html document again with notepad and
wherevr you start new paragrah or a new div heading, add this along with the html code:
<p class="head">Paragraph title</p>
OR
<div class="head"> Heading Name </div>
» Now refresh the page aagin, the header look has also changed!
» Now when you have started to understand how css works and how you link .css file to html file, you may start editting the CSS file.
» Begin with the colors, change them to match your layout. For Hex color codes, use the reference color chart made by Nica.
This is how you use css to enhance the look of your webpage, I am not sure if I explained it nicely, I tried my best. You can master CSS if you keep practicing it and believe me you are going to love what it can do to your webpage using css!
Now enjoy and keep practising.
« Back
