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.
CSS Navigation Types
Any type of dynamic web site that is seen online has some sort of interactive navigation system. Whether it is graphics, text, Flash, Swish, JavaScript, or CGI based, these main links can be an intigral part to any web design. For this tutorial we will look at a few of the various types of CSS-based navigation; plain text, colored backgrounds, and image backgounds.
Full-height Background with CSS
In this tutorial you will learn how to extend the background of your content area to fit the full height of your viewer’s browser regardless of their screen resolution using CSS and Dreamweaver CS4.
Before you start this tutorial you will need to aquire the graphic I have used as my content area background. You can download the graphic we will be using by clicking here, or you can create you own easily in Photoshop using my Vertical Background Image tutorial.
To start we are going to open Adobe Dreamweaver. If you have not disabled it, you want to select CSS from the Create New menu on the welcome screen like shown in the image below. If you’ve disabled the welcome screen, simply go to File -> New and select CSS from the blank page types. The window will open in Code mode and you’re ready to start.
Open CSS under Create New
The next step is to define your page’s properties and dimensions. Since we want this page to take up the whole screen we will set the body and html tags to no margins, no padding, and 100% width and height and the color of the background to match the one you used in the background of your image. An example of the code is below.
@charset "utf-8";/* CSS Document */
body,html {
padding:0px;
margin:0px;
width:100%;
height:100%;
background-color:#416393;
text-align:center;
}
Now that our page is set up to take the whole browser window we need to define the container that will hold the background image and set it to take the whole height of the page. Set the width of your background container to the width of your background image. This will help keep all of your page’s content in one place and inside the area where your text will appear. For this example, my image is 780 pixles wide.
#bodyBG {
width:780px;
min-height:100%;
background-image:url(images/bg-final-full.jpg);
background-repeat:repeat-y;
}
Now save your file. I used a simple name like CSS.css. Create a new blank HTML page (File -> New). Go into Code mode by selecting the Code button on your Dreamweaver panel and make your code look like the example below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bodyBG">
</div>
</body></html>
Save all your work (use any name you wish to save your HTML file). Now you can preview it in Internet Explorer (or a browser of your choice) to see what it will look like. You’re page should look like the example below. Click the image to see a full version of the page.
An example - Click for full version
Now you are done. You can insert the rest of your content as you see fit using the CSS page you created to make more containers and settings for your site.
