Okay, now that we know where to start, let's convert your site to CSS, following basic examples.
For the sake of simplicity, let's name our HTML file 'index.html' and our CSS file 'styles.css'. To edit the page easily, just place the styles in the head of the document with this code:
<style type="text/css">
h1 {...}
</style>
styles.css.
To attach the external CSS file to your document, please insert the following code in the head of the HTML file: <link rel="stylesheet" type="text/css" href="styles.css">
Right now, you have text positioned somewhere on your site within tables (if not, why would you convert it? Design from scratch, maybe?). Anyway, just place your test in separate text-formatting tags just after the <body> tag. Suppose it looks like this:
Company name Home Services About (top navigation) <h1>Page heading</h1> <p>Some paragraph text here</p> <p>..more content..</p> Service 1 Service 2 Service 3 (left navigation) Copyright © 2006 (footer)
Right, that's some text without the bells and whistles. Let's prepare it for styling by inserting it in proper tags and assigning classes. Note: keep in mind that we name classes logically, depending on which role they play on the site.
<div class="logo"> Company name </div> <ul class="topnav"> <li>Home</li> <li>Services</li> <li>About</li> </ul> <div class="content"> <h1>Page heading</h1> <p>Some paragraph text here</p> <p>..more content..</p> </div> <ul class="leftnav"> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> <div class="footer"> Copyright © 2006 </div>
Done. Now we are ready for some serious formatting. Let's separate styling from content.
Learn more:
Though it is important for people to find the information quickly, they also enjoy finding it easily.
Check out the recently added articles:
