Tutorial – Nightfall – Step 3

Continuing with Style

Now that we have seen the strenghts of inline CSS (remember that this is when you have the style in the line of the code) we need to broaden this further. While it would save you typing to get rid of the old style coding we’ve talked about so far, that is not the whole use CSS – though it is a benefit. One of the fundamental purposes behind the web standards is:

Separating the style from the code.

Everything within your code should be (ideally) only code for the function of the website. All of the graphics, colors, etc… should are style aspects, and should be the ‘icing on the cake,’ so to speak.

Now, there are three primary ways to show incorporate styles into your webpage, and you’ve already learned one of those – the inline style. Now we’re going to learn how to put the styles in the top of the webpage. This is called embedded style. Let’s begin by looking at the code of the page again, and this particular block near the top.

<title>Nightfall</title>
<style type="text/css"><!–body { margin: 0; padding: 0 }
–></style>
</head>

The block of code there is commented out to hide it from old browsers (ex: Navigator 1 and Explorer 2). If you have monitored your visitors and know that few to none of them use those browsers (which most do not), you can change that to the following:

<title>Nightfall</title>
<style type="text/css">
body { margin: 0; padding: 0 }
</style>
</head>

What is shown is the format that must be used if you are going to embed a style in the top of a webpage. First of all:

It must be in the <head> element.
It begins with <style type="text/css"> and ends with </style>
Each element within must be surrounded by brackets { }
Just like inline styles, multiple attributes of a single element are separated with the ‘;’ symbol.
Any inline style attributes of the same element will override the embedded styles.

So let’s begin by turning what we have done in an inline style into an embedded style. First, let’s look at what we did with the navigation links on the left hand side of the page.

Now, we want to put that in the embedded style at the top. What we will do is simply duplicate all of the style information there. Copy and paste it into your embedded style, and remember that it needs to be surrounded by { }. It should look like this:

body { margin: 0; padding: 0 }
{line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;}
</style>

Now, it needs a name so we can reference this section in the code. We’ll call this leftlinks. There is only one instance of that in the webpage, so we can consider it unique. Styles that will only need to be used once are preceeded with a pound sign (#) before their name. So your final product should look like this:

#leftlinks {line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;}

As a brief note, it is just as accurate to put a line break after the ‘;’ signs, if you prefer to write it that way. I prefer them all together, but the choice is yours. This works also:

body {
margin: 0;
padding: 0
}

Additionally you’ll note that you do not need to have a ‘;’ symbol following the very last attribute you list, only if there is another following. Again, it’s optional, but I prefer to always tag one on the end. So, now that we have our new leftlinks in the embedded style, let’s put it to use. Scroll down to the section where we declared the inline style in the paragraph where we made our links in the code. It should look like this:

Now, we no longer need the inline style because we added it to the top embedded style. At this point, all we need to do is identify which style we want to apply to this paragraph. We do that by referencing the id name we created in the embedded style. Go ahead and delete out all of that style info in the paragraph code, and change your code to this:

You can now save and refresh the page. If it was done right, you should see no difference at all in the page. Let’s now look at the other styles we created in the last part. You should scroll down and find this chunk of code you worked in before:

</blockquote>
More Info
<blockquote style="font-family: Arial; font-size: 13px; color:#FFFFFF;">
Delete this text, but keep the formatting and colours if you wish.
It is recommended that you give this page your own title and description.
Good luck with your site :)
</blockquote>

Looking at your browser page of Nightfall, you should notice that there are only three styles of text for the entire content section: The yellow header text, the plain white content text, and the links that are done in that light blue color. Looking at the code inside the page, we’ll see that all of the text on the page, except for the left links, was specified to have an Arial font. So, let’s make that a global declaration for any paragraph in the page. The embedded style will allow you to reference most global tags by themselves, and in this case, we are dealing with the  tag. Go ahead and add this to your embedded style:

p {font-family: Arial;}

When you save and refresh, you’ll see that your left links are still Verdana, even though they are in a paragraph also. That’s because you declared those as having the id="leftlinks". Another thing that you can do is notice that all of the text sizes are the same. We earlier decided that 13px seemed to reflect that vague description it previously had, and all of the basic text, aside from the yellow headers and the links should be white, so let’s throw that in also. Change the p declaration to this:

p {font-family: Arial; font-size: 13px; color:#ffffff;}

Save and refresh. The text will probably move up a bit on the page, but that’s fine, we are going to add the padding back in later. Now, remember this block of text?

Let’s really make that style apply to the whole page by deleting out the things that are duplicated. We can now remove the font-family, the font-size, and the one reference to the color:#FFFFFF. Oh, wait a second… that would leave absolutely no style in the <blockquote> part. That’s entirely correct. You no longer need it. Change the code to look like this:

</blockquote>
More Info
<blockquote>
Delete this text, but keep the formatting and colours if you wish.

Save and refresh, and you’ll see that it looks the same. Now, here comes the fun part. That is a global style we set for the paragraphs right? So we no longer need to specifically tell the code 13px (referenced just as size=2 in the improper code), nor do we need anything that is telling it to be Arial font that is white. Let’s strip out all the other references in the code just above that section. It looks like this:

Welcome to Nightfall Free Website Template
<blockquote>
This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb
Web Design & Photoshop Tutorials.</a> I hope you find this template useful.
There are no fees or charges associated with downloading or using this site.
The full version of this
template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a>
</blockquote>

Now, after you’ve taken out all references to the sized 13px (or 2) white Arial text, it should look like this:

Welcome to Nightfall Free Website Template
<blockquote>
This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb
Web Design & Photoshop Tutorials.</a> I hope you find this template useful.
There are no fees or charges associated with downloading or using this site.
The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a>
</blockquote>

Very good. On a refresh you’ll see that it’s the same. Now, let’s look at what specific style is left in that code. We’ve got the links to handle next, so we need to go add that to our embedded style. Do you remember or use LINK (for regular links), VLINK (for visited links), and ALINK (for active links)? Well, no longer. You’ll do those in the style now. We use the a indicator name for that. From the links in the code, you can easily see that they are given their color, and surrounded in tags to make them bold. So, let’s just do that in the style. Add the following to your embedded style:

a {color:#00FFFF; font-weight:bold;}

Save and refresh. You should see it look the same except for one thing, the links on the left are now the same color as those. We’ll fix that in a second, but let’s first clean up that code the rest of the way. You can now remove all the color and bold declarations around the two links in the code. The code should look like this now:

Welcome to Nightfall Free Website Template
<blockquote>
This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb Web Design & Photoshop Tutorials.</a> I hope you find this template useful.
There are no fees or charges associated with downloading or using this site.
The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a>
</blockquote>
More Info

Looks like there is only one of the font tags left. But wait… didn’t we already fix that once? Yep, look down at the style you put around the ‘More Info’ text. Well, since we are going to use that more than once, we need to add that style to our embedded text. Ah, but I said more than once didn’t I? Remember what I said earlier about using the pound sign (#) only if you were going to use it just once. If you are going to use it more than once, you are creating a class for that style. You put a period (.) before the name instead of the pound (#) sign for classes. Let’s add a style class for these headers called ‘header’, and put it in our embedded style. Your style section should look like this now:

I hope you see that I just copied and pasted the attributes in that header class that you had done before in the inline style around the ‘More Info’ yellow text. Now that we have that new class header declared, we can get rid of the other styles in that section of code and point them to the class instead. It should look like this:

Welcome to Nightfall Free Website Template
<blockquote>
This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb Web Design & Photoshop Tutorials.</a> I hope you find this template useful.
There are no fees or charges associated with downloading or using this site.
The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a>
</blockquote>
More Info
<blockquote>

*CHEERS* No More  tags exist in this code!! We’ll continue on in the next section when we go back to add one tiny thing to make those left links black. Also! I ran this page through the W3C Validator and we are down to just 17 errors from our original 45. HTML 4.01 Strict is getting closer!

Step 2 <– Back -OR- Continue on: Step 4 –> *Coming Soon*

~Nicole

Continuing with Style

Published by Nicole Hernandez