How to Add a Stylesheet to Your Webpage
Tutorial by fantasticode
This tutorial will show you how to include an external stylesheet in your webpage. Quick and easy!
Let's say that you have a stylesheet called mystyle.css and it's stored in a folder called "stylesheets". Let's then say that you want to make sure that your webpage - mypage.htm - displays itself according to the rules outlined in your stylesheet. Here's what mypage.htm might look like:
<html> <head> <title>My Page</title> </head> <body> <h1>My Page Title</h1> <p>Welcome to my homepage! Have a look around.</p> </body> </html>
So, to include your stylesheet, mystyle.css (and remembering that it's in a separate directory called "stylsheets", you'll need to add the following code inside the <head> section of your page...
<link type="text/css" rel="stylesheet" href="stylesheets/mystyle.css" />
It doesn't matter whether it comes before or after the <title> part of the <head> section, just so long as it's outside the <title> tags. So what does it all mean? Well it's pretty easy really, it's just saying "I want this page (mypage.htm) to be linked with this file (stylesheets/mystyle.css) which is a file comprised of text and css (the type="text/css" part). Note also that instead of closing the <link> tag with a </link> one, we can just put /> at the end of the <link> tag (thus making it <link ... />). Easy!
