Adding CSS to HTML
Dynamically control your page by using CSS, or Cascading Style Sheets, to proccess pre-determined settings of font, backgrounds, colors, and even the spacing of your page. For instance, if you wish to create a web site that includes headings for each paragraph that are different than your main heading for that page (i.e. a blog post with sub-headings), instead of writting <font color="..."><h3>Heading Title</h3></font> for every single heading, you create a class for that particular section of the page; like .subHeading { font-size:14px; color: #000333; font-weight:bold;}. Now as you go through your page, you will just insert the class=”.subHeading” code inside your paragraph so it will look like this: <p class="subHeading">Heading Title</p>.
There are a few ways you can link CSS code to your HTML page. One way is to insert the CSS as you go along using the style="..." tag (i.e. <font style="border-bottom:#000 solid 1px;">Example text</font>). This can become complicated and add a lot more code to your page than you really wish to have, and editing it can become rather troublesum.
Another way is to include a set amount of styles at the start of your page between the <head> and </head> tags. Check out the example I have below:
<html>
<head>
<title>Example Page</title>
<style>
.ExampleCSS {
color:#000000;
}
</style>
</head>
<body>
<p class="ExampleCSS">This is an example</p>
</body>
</html>
In the example I have declared a section of code to be my style formats and will set those formats between the <style> tags. I can easily adjust them and it will automatically make all the changes to that particular class throughout the entire page (as opposed to editing each individual tag).
Possibly the easiest way to set up a HTML page with CSS in Dreamweaver is to create a seperate CSS file and link it to your HTML page. With a seperate CSS file you can adjust all the settings you want, and quickly find them, without disturbing your original HTML page. Look at the example below to see how to link a CSS page to your HTML page.
<html>
<head>
<title>Example Page</title>
<link rel="stylesheet" href="cssFile.css" type="text/css" />
</head>
Using the <link> tag, I am able to incorporate an outside file and inlude it into the HTML page I am working on. The rel="stylesheet" command tells the browser that it is looking for a stylesheet with the name cssFile.css (href="cssFile.css") and that is is plain text (type="text/css").
Once you have linked your CSS page to your HTML page, you can start messing around with the code and figuring out how to make your site more dynamic by controling background colors, text-styles, graphics, and layouts of certain areas. For a good example of the use of CSS, visit RoosterTeeth’s web site and click the tabs at the top for their different web series. Each series page has it’s own color scheme and graphics.
No comments yet.
