Hi Guys!
In this tutorial we are going to complete your knowledge of basic HTML by giving you a basic working knowledge of CSS.
CSS is short for Cascading Style Sheets, which is a language that has been set up to create styles for your web page.
CSS can either be used within an HTML page or within it’s own separate page. The advantage of putting CSS on it’s own separate page is that you can then maintain almost all style changes to your site from one central page instead of having to change twenty individual HTML pages. CSS, therefore, makes it much quicker to change the look and feel of your site once you’ve gotten the hang of the language.
It’s uses don’t stop at HTML pages. Many PHP templates are also created using CSS to administer it’s style too, but that is a subject for another day.
CSS creates a rule that applies to a specific HTML tag. So what we are about to do is create several different rules that are going to apply to different parts of our document.
Open up a brand new, shiny Notepad file. We’re going to make a couple of changes at a time, apply them, and then preview them so we can see the results of our changes and understand what rule applies to what bit of your page.
First we’re going to create some rules that apply to the <body> of our document. Body tags deal with things like the background colour of the page, fonts not contained inside a table (which includes the type of font you use, its size , and colour).
Inside your notepad file type body. Then find the curly brackets { } towards the top right of your keyboard and type an open bracket ( { ). Hit enter and type a closing bracket ( } ).
What we have done here is create an empty CSS body code, now we’re going to fill it in with specific instructions for our browser.
I have three important pieces of information I need to communicate with you before we begin:
Right after the open curly bracket ( { ), hit enter and type:
background-color: #E0D794;
This instruction specifies the background colour of our page, the tan colour we picked in html tutorial #2.
Hit enter again and type:
color: #000000;
This specifies that our text is going to be coloured black.
Next hit enter again and type:
font-family: Arial, Helvetica, sans-serif;
This specifies to the browser that it should display your text as Arial first, and if Arial isn’t available, to use a font called Helvetica. If that font isn’t available to use a font called sans-serif.
You can specify any font you like here, just keep in mind that the font will only display if the visitor has that font installed on their computer. So it’s generally best to have at least two of the fonts be ones which are commonly available, or your visitor is going to see your page in the default Times New Roman. That will just look ugly!
Finally, hit enter and type:
font-size: large;
This tells the browser what size to display your text as.
There are two things you need to know about saving a CSS file:
Save your CSS page as mysims2page.css.
Open your index.html file.
Right after your closing title code ( </title> ), hit enter and then type:
<link href="mysims2page.css" rel="stylesheet" type="text/css" />
This is going to tell the web page what to link to, exactly what type of file it is (a stylesheet), and the type of stylesheet it is: CSS.
Save your index.html document.
Repeat this process with your simscontent.html file, inserting your code to link to your CSS file, then saving your document.
Preview your index and simscontent html files in your browser. Below are images showing you what your page should now look like.
As you can see we have successfully changed:
Links have a number of states. They can be an unvisited link (which means dormant and not visited). They can be active, visited,and hovered over. We need to create a colour rule for each state. In each case we’re going to change the colour of our text to red. To do so we’re going to create four almost identical rules.
Open up your CSS file again.
Place your cursor after the closing curly bracket ( } ) of our body tag, hit enter and type:
a:link {
Then hit enter and type:
color: #d13445;
Hit enter again and type a closing curly bracket ( } ).
This creates a CSS rule that applies colour to unvisited links.
Next, we’re going to repeat the process to create a rule for visited links.
Hit enter and type:
a:visited {
Again specify the font color by hitting enterand typing:
color: #d13445;
Again hit enter and type a closing curly bracket ( } ).
Now, we’re going to repeat the process to create a rule for active links.
Hit enter and type:
a:active {
Yet again specify the font color by hitting enter and typing:
color: #d13445;
Again hit enter and type a closing curly bracket ( } ).
Finally, we’re going to repeat the process to create a rule for links that are being hovered over. Hit enter and type:
a:hover {
Specify the font color by hitting enter and typing:
color: #d13445;
Again hit enter and type a closing curly bracket ( } ).
When you’re finished your CSS page should look as displayed below. Save your page and preview it in the browser again.
Here are our final html pages prettied up with CSS! The link colours have now changed to red.
This tutorial only scratches the surface of what CSS can do. CSS can do things like specify a background for a table, specify as an example that anything bolded needs to be in large green Verdana font (if that appeals to you). So I would encourage you to experiment, and test the limits of what it can do.
I hope you’ve enjoyed reading and learning from this tutorial series as much as I’ve enjoyed writing it.