Misty Ice Designs v12 Sweet Remembrance

When I FIRST started making layouts I didn't touch CSS, I didn't know what it meant let alone how to use it. I use those damned page builders that did everything for me. Now... there isn't a layout that goes out that doesn't include CSS. It's a handy tool that's simple to use, and can make a website move from "Meh...alright" to "WOW!"
CSS could be used to nearly code the ENTIRE layout.
We're coming pretty close by using it to define not only our page's general characteristics but using it to define our tables as well.

As you noticed back in the first part we decided to link to an outside style sheet as well through our pages we used "class" references, which refer the browser to the style sheet, for doing this we need to now create this style sheet. Much like with HTML we can do this in Notepad. Open notepad (Or the MAC equivlant).
And so with a fresh notpad open let's begin.

Whenever saving this file the extension should be .css In the case of this layout we called our style sheet style. So the file name for this particular case would be style.css You need to remember to save it as such or it will not work.

Unlike with HTML there is no real set beginning to the file, but there are tags. HTML tags are opened with a < and closed with a > and the command is inside <body> but CSS tags are opened with { and closed with } with the command on the outside body { }
When adding properties to the command, in HTML and CSS they are included within the opens and closes.
And so beginning we need to type

body {
}

Spacing is important, when you space correctly you can read your tags easier. Much easier. (Just like we did with tables!)
After each property we add we add a ; (For more about properties see CSS 101)
In our body we want to change the scrollbars, add the background image and color, change all the page margins, font size and color(For the main page). (Note there is a difference between the main page font and the div layer font)
So let's start with the background image and color. This is anywhere there is no background image we want the background that color.
In our case the background color is blue, with the HEX code of #988CD5.

body {
background: url('images/bg.jpg') center #988CD5 repeat-y;
}

So let's break that down.
We learned on the pervious page that the url('images/bg.jpg') tells the browser where to find the image for the background.
Now we're asking that the browser center the layout. and that the rest of the page where there is no image have the color of #988CD5 Finally we're asking that it only repeat on the y axis (down) (in the other examples we were asking it not to repeat, now we're telling it to repeat only one way)

Next we want to change the margins. We don't want any margins on the page at all, except one margin on the left hand side of 1px, to make the layout and background line up.

body {
background: url('images/bg.jpg') center #988CD5 repeat-y;
margin-top:0px;
margin-left:1px;
margin-right:0px;
margin-bottom:0px;
}

Next is the Scrollbars for the page.
I've never been one to really learn what each piece does in the scrollbars properties, I tend to fiddle until I get what I like. It's something I'd recomend doing - though if you care to learn a little about it I can tell you this much, the dark shadow is the outer line, the shadow is the inner line. The highlight is the inner line and the 3dlight is the outer line. The face is the color of the top of the bar and inside the box where the arrow's are. The track is the color that is against the page, and the arrow is as it states, the arrow color.
These are the properties and the colors are the ones I would choose to use.

body {
background: url('images/bg.jpg') center #988CD5 repeat-y;
margin-top:0px;
margin-left:1px;
margin-right:0px;
margin-bottom:0px;
scrollbar-DarkShadow-Color:#988CD5;
scrollbar-Track-Color:#988CD5;
scrollbar-Face-Color:#988CD5;
scrollbar-Shadow-Color: #10015B;
scrollbar-3dLight-Color: #10015B;
scrollbar-Highlight-Color: #988CD5;
scrollbar-Arrow-Color: #10015B;
}

Next is the font property. We change it here incase something isn't inside the div layers that we use to define the section, we don't want some bizarre font out there.

In HTML we tend to make our fonts larger or smaller by going <font size=+3>This however is BAD practice. It's better to set the font in the CSS and use that as only a highlighting measure, and even then don't use it. It'll not really aid your design any. But of course this is your choice. HTML uses smaller numbers where as CSS uses pixels... and thus the number is larger. Keep in mind people like me are getting old and size 8px font is NOT a font to be used on a website. Size 11px or 12px is small enough. For this design I recommend 12px.

Our Next CSS code will be the plain div
We need to open our div tag and close it

div {
}

Now the properties to include here are the font size, family and color. A font family is also referred to commonly as type or face. In HTML we call it font face in CSS we call it font family.
We'll start by changing the font color.

div {
color: #000000;
}

You can use whatever color suits your fancy, #000000 is the color I've chosen to use for this layout. Remember the ; at the end. ^_~ The next part is adding in the font size. Remember 8px font is FAR too small, try and keep it reasonable without making it huge. We're not blind but we also don't have x-ray vision.
Play with the numbers till you get what you want. Personally 12px... is PLENTY small... and can even be considered TOO small.

div {
color: #A5339E;
font-size: 12px;
}

Once you have this set (Play with it till you get what you're looking for) you can add in the font family.

div {
color: #A5339E;
font-size: 12px;
font-family: Verdana;
}

The font family can be anything you want, but a few things to keep in mind. Not everyone has the same fonts on their computer. Some are new to newer versions of Office and Windows, and some are downloaded. If the person doesn't have the font it will result to the default for their computer, often Times New Roman. Which honestly isn't a pretty font.
It's best to set it to ones like Aria, Verdana, Comic Sans MS(Despite how much I hate that font)
Also you can set more than one font, so that if the person does not have the primary choice it'll go to the secondary.
font-family: Verdana, Arial, Comic Sans MS;

Righto, we now have our div, set up as we want, we need to set the links. Everyone likes fancy links.
I never get over the fact that people seem to like links with underlines. I HATE underlines but this isn't me... this is you. So here we go.
Links have four 'commands' Link, Active, Visited, Hover. HTML can modify the colors of Link, active and visited, but it can not manage the colors of the hover. Besides CSS just does it better and gives you more options.
We're going to stick to a simple color change, line remove/add and pretty hover effect (More on Link properties can be found in CSS 101)

Most often people decide to have the visited, active and regular link properties the same throughout the file. At which point we can combine the different properties so as not to type the same thing out. We'll start by showing you what it looks like seperate and then what it looks like combined.

This is them seperate:

A:link {
}

A:active {
}

A:visited {
}

This is them all together:

A:link, A:active, A:visited {
}

The reason you would want them all seperate is if you decided that the links would look different after they had been visited or that they would look different when they are clicked. The properties for them are all the same, and so for the purpose of this design we want the link, active and visited to all remain the same.
The first thing we're going to do is change the color of the link. The bright blue which is the default for a link will not match our layout. So our link color will be white. (The HEX Code for white is FFFFFF)

A:link, A:active, A:visited {
color: #FFFFFF;
}

Now instead of being the standard blue color the links will be the color I've chosen. The next part is to add the type of text decoration that is desired.
By default links are underlined. Personally I don't like underlined, I like none. (For types of text decorations see CSS 101)

A:link, A:active, A:visited {
color: #FFFFFF;
text-decoration: none;
}

By setting the text-decoration to none there will be no lines anywhere on the link it'll just be like it was normal text, but a different color so it still stands out.
Some people find they don't like the underline, but they still want the link to stand out by more than just color, we're going to accomplish this by changing the letter spacing.

A:link, A:active, A:visited {
color: #591494;
text-decoration: none;
letter-spacing:2px;
}

This will space the letters apart more and make the links stand out. You can change the pixels to your tastes but keep in mind the size of the area you're working with and the overall appearance. I would not recommend ANYTHING higher than Five for anytype of letter spacing.
There are other properties you can add to your links such as you can make them italics, bolded, you can change the word spacing, change the font type and size of them. We're however not doing that =P

The next step is to add our hover.

A:hover {
}

Hover is completely optional but will allow a user to see it's a link because it's not dull or flat, it moves and adds an overall elegant feel to the site. (Dynamic w00t w00t)
A few hints and tips of GOOD WEBDESIGN. Do not make a hover where the text grows, if you do this your LAYOUT WILL MOVE if your layout moves it becomes difficult to click the link the visitor will become annoyed and no longer take the time to view the website. Good design suggests you only make the link change, and thus if your links are bold, don't make them hover bold. If your links are 12px don't make the hover 14px it'll only make the webpage move. However you must learn this on your own.
For the purpose of this layout we will be adding a different color to the hover, a text-decoration of an underline as well as ensuring our letter spacing is consistant with the rest at 2px.
First is the color.

A:hover {
color: #D4CCFF;
}

The #D4CCFF color is a light blue color that I've chosen to use for this portion of the layout. You can change it to many different things. Some people like to make the link almost invisible. Some like to make it completely disappear, play with it.
The next part is to add in our text decoration.

A:hover {
color: #D4CCFF;
text-decoration: underline;
}

When you're adding a text decoration, you do not place comma's to seperate what each part is. If you want only an underline, just don't include the overline part, or overline alone, or perhaps you still want it to be none, then you type none.
Our last part is the letter spacing. We want to be sure the letter spacing isn't going to size down on us.

A:hover {
color: #D4CCFF;
text-decoration: underline;
letter-spacing:2px;
}

So we set the letter-spacing back to 2px... you CAN change this, but like I said bad design because your layout will move with the links. Your choice however.

So we're done the EASY part... time to do the hardpart.
We need to define some classes. Starting with our td.nav class moving into div.nav, td.content, div.content and end with a head class

So we need to open or td.nav class

td.nav {
}

And now to begin adding in the properties. In the td.nav we need to ensure text aligns at the top vertically and that the width is specified. We're setting the width at 150.
So let's first align to the top.

td.nav {
vertical-align: top;
}

Now let's add in our width property.

td.nav {
vertical-align: top;
width: 150px;
}

That's done. Now we could specify the height, the border and various other properties but we don't need to. All we need to do is move along to the div.nav. So let's open it up.

td.nav div.nav {
}

Within this area we want to specify the magins. Both the left and right margain to be exact.
So let's add them together.

td.nav div.nav {
margin-left: 5px;
margin-right: 10px;
}

By moving it over 5 pixels to the left we ensure there is room away from the line, we don't want our text touching the line.
And by moving 10px from the right we provide that cellpadding that we removed, without effecting the rest of the site layout.

Next is the td.content

td.content {
}

Within this class we're going to need to specify the vertical alignment and width, like we did in td.nav
So here we are.

td.content {
vertical-align: top;
}

Now let's add in our width property.

td.content {
vertical-align: top;
width: 150px;
}

That's done. Now we could specify the height, the border and various other properties but we don't need to. All we need to do is move along to the div.content. So let's open it up.

td.content div.content {
}

Let's now add in our properties, which are the same as they were in the div.nav when we set the margins. So let's do them together again.

td.content div.content {
margin-left: 5px;
margin-right: 10px;
}

See that wasn't so painful. Now our margins are set pretty like.

Finally we're done what we've chosen to do in the CSS and we can add in the finishing touches.
Our CSS code looks like this:

div {
font-size: 12px;
color: #000000;
font-family: Veranda, Arial, Comic Sans MS;
}

A:link,A:visited,A:active {
text-decoration: none;
color: #FFFFFF;
letter-spacing:2px;
}

a:hover {
color:#D4CCFF;
text-decoration: underline;
letter-spacing:2px;
}

td.nav{
vertical-align: top;
width: 150px;
}

td.nav div.nav{
margin-left: 5px;
margin-right: 10px;
}

td.content{
vertical-align:top;
width: 600px;
}

td.content div.content{
margin-left:15px;
margin-right: 10px;
}

Our Site looks something like this (Once again depends on your navigation and colors):

So onto the Next Part!

Let's Make a Layout Part One :: Getting Started
Let's Make a Layout Part Two :: Div Layers
Let's Make a Layout Part Three :: CSS
Let's Make a Layout Part Four :: Final Touches.