The Quickest Introduction to CSS With Real-Life Examples!
This tutorial is based on the layout from our second HTML tutorial, however the principles remain the same and can be used on any other HTML page.
Why CSS?
CSS Stands for Cascading Style-Sheet. The code can be used within an existing HTML page or it can lie within in a seperate .css file.
The beauty herein lies that this allows web developers to easily change the whole theme of an entire website and, if used correctly, you can change the whole layout of a site by editing no more than one file. An HTML page can link to one or more external stylesheets.
For this tutorial we'll get straight to discussing the latter method because of its advantages.
Apart from the advantage mentioned, CSS is also very easy to learn, fun and will help you save a lot of time and give you the power to create websites that load faster and look appealing.
Linking to the Stylesheet
Linking to an external stylesheet is incredibly easy. Here's what you can copy and paste between your <head> tags in your HTML file.
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
The "rel" parameter indicates that we're linking to a stylesheet, the type specifies what kind of file it is and finally, the link to the stylesheet itself with the "href" option. There's no need for now to worry about "media", as it merely specifies that this stylesheet is intended for normal computer screens. You can link to another stylesheet with say "pda" as an option or "print" for a stylesheet to be used when printing from your site.
Also notice the location of the stylesheet, it's within the root directory of the file where we added the link. When using the file for your entire site it's best to use www.yoururl.com/stylesheet.css to avoid style-less pages floating around your site without your consent.
What We're Going To Do
- Change the background colour
- Change the header's colour
- Convert our bland text-links to pretty coloured "hover-able" links
Changing the Backgorund Colour
Open a new file with your favourite text editor and save it as default.css then use the code below and paste it in your newly-created stylesheet, save it and reload your page in your browser to see the results.
We're going to go through the details of the code as we go along.
body {
background-color: #fffcda;
}
What we're essentially doing above is changing the visual properties of the <body> tag of our html page. Everything between the "{" and "}" brackets are the properties. The code is pretty self-explanatory, background-color: #fffcda changes the background colour to the hexadecimal value we've given it.
In case you'd like to add more properties you need to append the ";" at the end of each property.
Changing the Header's Colour
h1 {
color: #007ebf;
text-decoration: underline;
}
The above is similar to the previous code snippet, however we've now added something new. With "text-decoration: underline;" we basically tell our browser to render the <h1> underlined. You are free to remove that part if you wish, I added it for some variety.
Convert the Text-Links to a Pretty Horizontal Menu
For this to be a success we need to make an adjustment to our original menu by changing the code to an unsorted-list (<ul>).
Remove the following line of code from the html pages' example:
<hr />
<p><a href="index.html"><strong>Home Page</strong></a> - <a href="aboutme.html"><strong>About me</strong></a></p>
<hr />
Then replace it with...
<ul>
<li><a href="index.html" title="My Home Page">Home Page</a></li>
<li><a href="aboutme.html" title="More about the Author">About me</a></li>
<li><a href="contact.html" title="Contact Me">Contact me</a></li>
</ul>
Indent your code like the example above to make it more readable - you'll find it's crucial when you've got large pages and have to maintain them. The unsorted-list is created with it's sub-tags (which are list tags) within it. You may notice that we've made a modification to the previous anchor by adding the "title" property. This is not mandatory, but it's a good practice to give names to your links so that search spiders can identify links with certain words and thus rank your pages accordingly.
Now we are going to add a lengthier bit of CSS code, but not to worry we will cover all of it below!
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 6em;
text-decoration: none;
color: white;
background-color: #85ab00
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
a:hover {
background-color: #ff3300;
}
li {
display: inline;
}
Let's break the code down a bit for better understanding. "float: left;" effectively aligns our unsorted list to the left, but from a viewer's perspective it has ensured that our horizontal menu rather than an unsorted list has been placed to the left of the page.
We also set the lists' width to 100% so that it covers the whole width of the page. This is to prevent our paragraph to float directly to the right of our menu.
Then we remove any padding and margins (offsets) the <ul> tag has by default and finally, the "list-style-type" property is then used to ensure that our unsorted list doesn't format round bullets to the left, which would look ugly and also distort the menu.
For the anchor we also ensured that the text floats to the left, similarly to the list and then we set the width of the anchor. You'll notice that any decoration for the link has been removed as by default any unformatted link is underlined. Then, we change the font's colour to white and the link's background to a hexadecimal value that represents a greenish colour.
In order for our menu to look appealing the padding property ensures that the text contained within the anchor does not lie flat against the left and right side of the menu's background and lastly, we add a white border to the left of each anchor.
Now we change the colour of the background of our menu when hovered (when we move the mouse over one of the menu's links). This is done by adding a special argument that's appended to the "a". Additionally we can add "a:link" and "a:visited", but we're not going to cover those at this stage.
Finally we get to our list as we tell our browser to display it "inline". In effect this means it will render the meny horizontally instead of vertically.
In the end your HTML document should look like this:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>My First CSS-Styled Page!!!</title>
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
</head>
<body>
<h1>My First CSS-Styled Page!!!</h1>
<ul>
<li><a href="index.html" title="My Home Page">Home Page</a></li>
<li><a href="aboutme.html" title="More about the Author">About me</a></li>
<li><a href="contact.html" title="Contact Me">Contact me</a></li>
</ul>
<p>Hallo, this is my first web page. I hope it will turn
out OK!</p>
<p>Perhaps the choice of colour wasn't the best but hey... I can easily change that across my whole site's layout by editing one single CSS file.</>>br />
<p><img src="images/springbokemblem.jpg" width="150" height="150" title="Springbok Rugby Emblem" alt="Springbok Rugby Emblem" /></p>
</body>
</html>
And your CSS document...
body {
background-color: #fffcda;
}
h1 {
color: #007ebf;
text-decoration: underline;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 6em;
text-decoration: none;
color: white;
background-color: #85ab00
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
a:hover {
background-color: #ff3300;
}
li {
display: inline;
}
That's it for this tutorial. View the newly-created CSS Page and the CSS document.