Up to this point we have been embedding all of our style code into our HTML document. Because you will usually be working with multiple HTML documents for each of your website pages, this is not the way to go.
The main reason we are using CSS is to ensure any changes we make can be done easily right? Well that won’t work if we need to go into every page of our website and change the style one by one. So let’s look at creating a website using an external style sheet. (Note: Once you have gone through these steps, feel free to go back to your previous websites and move the styles in your HTML document to their own file).
First, let’s take a look at our design. You can download the site files here. Take a look at the files/layout.psd file to get a good idea of how we need to structure the code. You always want to write up your HTML structure before you do any CSS work, so let’s start by setting up our structure in a new HTML file. It will look identical to what we have done before:
<div id="page">
<div id="header">
<div id="logo"> <a href="#"><img src="images/logo.png" width="289" height="150" alt="MySQL" /></a> </div>
<div id="sub_nav">
<ul>
<li><a href="#">Downloads</a></li>
<li><a href="#">Partners & Solutions</a></li>
<li><a href="#">Customer Login</a></li>
</ul>
<div> </div>
</div>
</div>
<div id="main_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Why MySQL</a></li>
<li><a href="#">News & Events</a></li>
</ul>
<div> </div>
</div>
<div id="content">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada adipiscing quam at convallis. Nunc quam dolor, rhoncus a facilisis vehicula, volutpat vitae est. Phasellus mollis aliquam justo sed pretium. </p>
<p> Nulla facilisi. Curabitur sodales mauris nec arcu sodales suscipit. Sed ullamcorper orci eget enim pulvinar facilisis. </p>
<P> Cras nec lacinia mauris. Suspendisse turpis purus, eleifend eu rhoncus at, porta sit amet dui. Morbi vel felis erat, at venenatis urna. </p>
</div>
<div id="footer">© 2010, Oracle Corporation and/or its affiliates</div>
</div>
So that’s our HTML! You will notice I added two clearline divs after each of the menus so that the floated list items of the menu are cleared before we get to the next elements. Now we are ready to begin our CSS. To start, let’s create our css file.
In Dreamweaver, you can go to File>New>CSS but remember, both HTML and CSS files are nothing but text, so if you don’t have Dreamweaver, you can simply create a new text file and give it a .css extension
Either way you do it, save the file as styles.css (Make sure the file is in the same folder as your HTML file).
If you did create your CSS file in Dreamweaver, depending on the version Dreamweaver may add the following code into your file:
@charset "utf-8";
/* CSS Document */
The first line lets the browser know the proper encoding to use. The second line is the way to write a comment in CSS. If your document does not have this you can copy it and add it in if you want.
From here on the way you write your code is exactly the same. Just be sure not to add the HTML <style> tags. So in your styles.css file, add the following CSS:
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
body {
background-image: url(images/bg_body.png);
background-repeat: repeat-y;
background-position: center top;
margin: 0px;
padding: 0px;
background-color: #677e87;
}
#page {
width: 980px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin: 0px;
padding: 0px;
height: 169px;
background-image: url(images/bg_header.png);
background-repeat: repeat-x;
background-position: top;
}
#logo{
float:left;
width:289px;
margin: 0px;
padding-top: 10px;
padding-left: 15px;
}
#sub_nav {
float:right;
width:280px;
}
#sub_nav ul {
margin: 0px;
padding: 0px;
}
#sub_nav ul li {
float: left;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
background-image: url(images/bg_subnav_separator.png);
background-position: right center;
background-repeat: no-repeat;
margin: 0px;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
}
#sub_nav ul li.last{
background-image:none;
}
#sub_nav ul li a {
white-space:nowrap;
height: 27px;
line-height: 27px;
margin: 0px;
text-decoration: none;
color: #c9dae1;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 0px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 4px;
display: block;
}
#sub_nav ul li a:hover {
color: #FFF;
}
#main_nav {
background-color: #fac56f;
border-top-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #b27711;
border-bottom-width: 1px;
border-bottom-color: #b27711;
}
#main_nav ul {
margin: 0px;
padding: 0px;
}
#main_nav ul li {
float: left;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
}
#main_nav ul li a {
white-space:nowrap;
height: 30px;
line-height: 30px;
margin: 0px;
text-transform: uppercase;
text-decoration: none;
color: #493007;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 0px;
padding-right: 22px;
padding-bottom: 0px;
padding-left: 22px;
display: block;
}
#main_nav ul li a:hover {
background-color: #F8AD32;
}
.clearline {
display: block;
margin: 0px;
padding: 0px;
clear: both;
font-size: 0px;
line-height: 0px;
height: 0px;
}
#content {
margin: 0px;
padding: 12px;
}
#content h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #251904;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#content p {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
color: #251904;
}
#footer {
text-align: right;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #9ab9c5;
padding-top: 25px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
Now everything here should be familiar. You will see that I added some styles to the img tag. In our HTML, I linked the logo so in the future clicking the logo will take you to the home page. By default in most browsers, an image that is linked will have a border. What we do with this img CSS is just set the default to have no border.
So now we have all of our HTML set and all of our CSS set. All that’s left to do is to tell the HTML file to look for the CSS file. We do that using the <link> tag, this goes anywhere in between your <head></head> tags:
<link href="styles.css" rel="stylesheet" type="text/css" />
So we can see the link tag is self-closing and has a few attributes. The “href” attribute looks for where the styles file is. The remaining two attributes simple tell the browser to use the code it finds in the file as a stylesheet.
Test out your HTML file and it should look similar to the Photoshop comp. Now let’s setup the links for each of the navigation items. Currently each link is set to go to “#”. You want to change each button to go to its respective HTML page, so for example the Products button goes to “products.html”. You want to do this for each button. Make sure to use no spaces and I would recommend all lowercase (ie: why_mysql.html). For your home button and logo link, make sure to link it to index.html since that will act as your home page.
Once all of your links are set up, you are ready to make each of your pages. All you need to do is copy your html file and rename each copy to its respective name. Afterwards you should have 9 HTML files, each names what you had linked it to. You can now open the HTML files individually and change the H1 title from “Welcome” to what you want that page’s title to be “Products” or “News and Events”.
When you preview any of your HTML files in a web browser you should be able to click each link and go from page to page of the website. If you have any changes to make with the style of the website all you need to do is change the styles in style.css and it will update on every page.
