So, what is Cascading Style Sheets (CSS)?
Basically, CSS is a way to add styling to your web page/website quickly and easily.
Please note, the best approach to using Cascading Style Sheets is that the CSS styling should be placed in a separate file, typically named style.css. The benefits are:
- Place one line of code in each of your websites pages referencing the CSS file. This reduces the amount of code in your pages.
- Site-wide changes are done in one place. This makes maintaining the site much more simpler.
You can also use more than one file for applying styling to your web site. You might find that your CSS file gets so large it is hard to make changes to it. You might want to create separate files related to a specific element or elements of your web site, i.e., navigation menu, photo gallery, etc. For now we will keep it simple and just use one file.
Now, how do we apply CSS to our web page?
The first way is: In-Line
In-line styles are placed into the HTML tags using the style attribute. For example:
<p style="color:red">We just styled this paragraph.</p>
As you can see the styling will make that specific paragraph text red. (Note: In order to see the results of the styling, copy the code above and save it as an html file. Then open it in your browser.)
Next is: Internal
Internal styles are used for the whole page. As we see below, the style attribute is placed within the head tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Learning CSS</title>
<style type="text/css">
p {
color: black;
}
a {
color: yellow;
}
</style>
</head>
<body></body>
</html>
This will make all of the paragraphs on the page black and all of the links yellow. (Note: In order to see the results of the styling, copy the code above and save it as an html file. Then open it in your browser.)
And the last way is: External
External style sheets are used for the whole website. There is a separate CSS file (though, sometimes more than one file can be used), which will simply look something like this:
p {
color: black;
}
a {
color: yellow;
}
If this file is saved as style.css, then it can be linked to in the pages HTML as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Learning CSS, Part 1</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
Please Note: if you do find yourself using more than one CSS file, you have to link to each one of them as above. Lets say you create three CSS files, you will then create three links in each of your web pages.
OK, do you see why using external style sheets is better? Try styling a 100 page (or more) website using in-line or internal styling and I bet you will be finding your frustration level increasing very quickly.
Now I hope you are trying out the code as we did in the Basics of Building a Web Page and How To Build a Website articles. Remember, you can use any text-editor you like to create the style.css file. Then, just save it in the same directory as your HTML file.
Next, you can create a fresh HTML file or use the HTML file from the previous articles mentioned above, if you like. To start a new HTML file it 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> <head> <title>Learning CSS, Part 1 Web Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
Save the HTML file as index.html, which links to your CSS file (remember, your CSS file should be empty right now.) As you work your way through the Learning CSS articles, you will be able to add to and change the CSS file and see the results by simply refreshing your browser.
I hope you are enjoying things so far. Next, in Part 2 of this series, we are going to learn some CSS syntax.