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.
Creating an Elegant Vertical Background
In this tutorial you will learn how to create a background image that can be repeated vertically rather than across. These types of backgrounds are common if you are using a fixed-width web site that you wish to fill the full vertical height of a viewer’s screen resolution. See my tutorial about CSS background height to learn how to do this.
 |
First you want to open Photoshop and create a new file using the settings to the left. I have chosen a 780px wide setting because there are still come computers out there running 800×600 screen resolution, so the 780px image will allow me to contain the effects we will apply later and still have room for the scroll bar on the side of most browsers without having to use the side-scroll bar at the bottom of the screen. |
 |
Now you want to fill your image with the background color you will be using on your web site. You will want to be sure to use a contrasting color from what your text area will be. For instance, if your text area will be filled with a dark color, you may want to choose a light background as to draw the eyes of your viewers to the content of your site. For this example I have filled the background using a shade of blue #416393. You can fill the whole background by selecting Edit -> Fill (or Shift+F5). |
 |
Next you want to determine how wide your content area is going to be. You will want to make sure that there is enough room on the sides to add some effects later on that will help draw eyes to the content. You will also want to make sure that your image is centered. Here is how I did it: I wanted a 720px wide content area, so subtract 720 from 780 to get 60px. You will need a total of 60px around your graphic, and since there are two sides you divide 60 by 2 to get 30. So add 30px to the left side of your graphic and subtract 30px from your right side. Create new guides at these intervals (View -> New Guide -> Vertical Guide – 30px(and another at 750px)).Create a new layer (Shift+Ctrl+N) and name it Content. Use the Rectangular Marquee Tool (M) to create a box inside your guides, making sure to also fill the height of your graphic. It should look like the image to the left. Once you have that, go to Edit -> Fill (Shift+F5) and fill the box with White (select from the drop-down menu). This is where your site content will be. Again, you can choose whatever colors you wish. Black text against a white background is the easiest to read so that is what I will be using. |
 |
Now we will add some effects to our Content layer to make it pop out a little more. Double click the Content layer to open the Blending Effects panel. Select Drop Shadow from the left side and apply the settings I have on mine.The idea is to create a shadow that seems to continue past your graphic’s edges so you can seamlessly stack your graphic on top of itself and create a flawless vertical image that appears to adjust itself to the settings of any screen resolution. |
 |
There, you are finished. Your image should look something like mine to the left (unless you used different colors for your background and content area). Now you can import the image to Dreamweaver and use CSS to create a continuous vertical background for your fixed-width web sites. |
Tutorials
 |
Dreamweaver Tutorials |
 |
Photoshop Tutorials |
