Adding CSS to a Webpage
March 6, 2011
There are actually three ways to add CSS to a web page and each one has a very specific purpose and use.
The External Stylesheet
The most common and most useful way to add the stylesheet to your webpage is via an external stylesheet. You will create a separate document, let’s call it ‘style.css’. The ‘style’ part is irrelevant, you can call it ‘sirHenry.css’ if you so chose; it’s the ‘.css’ part that’s important.
On that stylesheet, you will define exactly what fonts, colors, background colors and/or images, spacing, positioning, etc. your page will show. For example:
body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; } |
And you will call this document style.css and save it into the same directory your index.html file is in.
But if you look at your index.html page in your browser now, you won’t see any of the colors we determined in style.css. In order to actually see the pretty colors, we have to link the stylesheet to the html document. And that is done with this code:
<link href="style.css" rel="stylesheet" type="text/css"> |
And this line needs to go into the head section of your HTML document – so here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> |
Now make sure that style.css and this new version of your HTML page are also uploaded to your hosting account, refresh the html page, and you’ll see … Then there is:
Internal Styling
Instead of using the external stylesheet, you could add all the styling directly into the head section of each page – that would look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; } </style> </head> |
This is a method that’s useful for styling that only applies to the very page this is inserted into – so likely not the stuff we defined above. A good example for when internal styling would be practical is the contact page of your site – the styling for the contact form (likely) won’t be needed anywhere else on the entire site, so adding the parts that address just those tags only on the contact form makes good sense.
The reason that using internal styling for stuff like the body and h1 tags is not a good idea at all is simple. Let’s say you used the above for your new site and now, that all 159 pages are done, you decide you really should change the color of the h1 tags. And now you’d have to open every single one of those 159 pages and make that change. NOT very efficient, right?
And lastly, we have:
Inline Styling
In addition to the above external stylesheet (for all the pages on the site) and the internal styling (for all the styles on that ONE page), there is also inline styling. This is practical if you are styling just one thing one single time on your entire site. Maybe there is this ONE paragraph on that ONE page that you want to stick out – but only that very one – on the entire site. Then you could use incline styling like so:
<p style="border: solid 5px #FFAA00;"> The very special paragraph that shows up only ONE time on this ONE page on the ENTIRE site - only here, nowhere else. Got it? </p> |
