Putting It All Together
So, we now have written a basic style sheet. It looks just like this...this is all you need to have written in that file.
body {color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}
a:link {color: #FF8C00;}
a:visited {color: #FF8C00;}
a:hover {color: #FF8C00; background: #ADD8E6; text-decoration:none;}
a:active {color: #FF0000;}
p {line-height: 2em;}
The first thing you want to do with this file is save it. Give it a name that will be easily recognized in case you want to start using multiple style sheets. Let's call it firsttry.css. Save it as a simple plain text file. You'll want to upload that file to your account and put it in the appropriate place (somewhere in your public_html directory or subdirectory of that one). The next thing you'll want to do is encode your HTML file appropriately. We looked at this a little bit earlier. Since we are using an external style sheet, we have to embed it in the <head> portion of the HTML code. Like so:
<head>
<title>First Try at CSS</title>
<link href="firsttry.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
Text within paragraph tags will be double-spaced
</p>
<a>Links will be displayed according to the pseudo-classes we set up
(i.e. "link," "visited," "hover," and "active")</a>
</body>
</html>
Explanation: Now...just like any file (e.g. an HTML document), you will need to upload this one as well. Also, the way we have this CSS file linked to the HTML document is dependent upon both of them being in the same directory. If the HTML document were in your public_html directory, but the CSS file were in a subdirectory of the public_html directory, you would need to enter the appropriate path. It's just like using relative hypertext links.
In consort, a CSS file and an HTML document can make very rich display. All that is needed is two files which, once initally set up, will save you loads of time. That's about all you need to get you started. On the next page, there is a list of online resources as well as print resources that will help you further develop your CSS skills so you can use it for layout, positioning, and more advanced text formatting.
