|
|
 |
Step 4 Introduction
Try out CSS while you are learning it with the Online HTML Editor
What in the world did he mean by page integration? Well, it's not as hard as it sounds. Page integration deals with different ways of putting the CSS code on your site. So far in this tutorial, we've only gone through one way of putting CSS on your site, which is through the STYLE tag. In this section, we'll show you how to load CSS remotely to your page (as this site does) as well as other techniques dealing with loading cascading style sheet code...
Tag Basis Integration
We're going to use the "Cookie Monster" example from last lesson and enable it with CSS in all the possible ways. Now, there are a total of four distinct ways to get this done and we're going to start with the easiest implementation and work our way up. The easiest way is by implementing CSS on a tag basis. We just add a STYLE section to any html tag, insert the declarations(with single quotes enclosing them), and voila! CSS code. Let's look at the tag basis CSS code:
<font style='
font-family:"Sesame Street", "Kidprint", sans-serif;
font-size: 24pt;
font-weight: bold;
text-transform: uppercase;
'>Cookie Monster</font>
There are a couple problems with this method though. First, it is harder to read and looks awkward in the source code. More importantly, it negates the primary objective for replacing CSS with HTML: the ability to change declarations with only one place to edit. Thus, I would not suggest using this style of page integration on more than 1 or 2 pieces of text.
Page Basis Integration
Page basis integration is the code that you are used to now. This involves the addition of a STLYE tag in the HEAD section, putting in all the sectors with their declarations, and then declaring the classes below as needed. The STYLE tag can get more complicated (as you're going to see in a little while), however right now we're only going to concentrate on the tag as used for page base integration. As I show you the code you're all so familiar with, notice I add two lines: one right after the STYLE tag and one right before the /STYLE tag. Those two lines hide the code for older browsers without CSS capabilities so they don't see a bunch of gunk when they view your page. Here's the CSS source:
<STYLE TYPE="text/css">
<!--
.COOKIEM {
font-family:"Sesame Street", "Kidprint", sans-serif;
font-size: 24pt;
font-weight: bold;
text-transform: uppercase;
}
//-->
</STYLE>
<font class="COOKIEM">Cookie Monster</font>
Site Basis Integration
Site basis integration allows you to create a .css file on your server and then remotely load it to each page on your site. This technique further centralizes CSS code and is, consequently, the type of integration that most CSS designers use. First, you need to create your source code with a text editor. Open up Notepad or any text editor you have on your computer and type in the CSS code for your page. If you're a little lost as to how to put in the code, this file shows what the COOKIEM class that we've been using would look like. Save your file this way when you're done:
1 - On the toolbar, go to File->Save As
2 - Go to Save as Type and click on All Files *.* (only for Notepad)
3 - Save your file under the name you want to use and add .css at the end
4 - Upload your CSS file (should only have a .css extension) onto your website
That's it, you should now have the appropriate CSS code on your server. Now we need to learn how to link this file onto each page. There are two seperate ways to hande linking with site basis integration: you can declare it in a LINK tag or you can use the @import function in the STYLE tag. The first way is with the LINK tag, which is used if you only have one style sheet you want to use on your pages. Put the following code in the HEAD of all the pages you want to implement the CSS under:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="yourstylesheet.css">
Then, replace yourstylesheet.css with the name of your CSS file. The second way is through using the STYLE tag. This is useful it you have stored your basic page layout in a CSS file, but you also want to overwrite some of those CSS layout features on your site. The code for the STYLE tag:
<STYLE TYPE="text/css">
<!--
@import url(http://www.yoursite.com/yourstylesheet.css);
/* other CSS code and styling you want to overwrite are done here. */
//-->
</STYLE>
To overwrite some sectors stored in your yourstylesheet.css file, just give a sector the same name as the sector in your file and put in the info. To import multiple CSS files, just copy the first line after the STYLE tag. The STYLE is not as compact a code as the LINK tag, so I would suggest only using this technique if you have a large site.
Importance
Often with large sites, you will accidently create multiple declarations for HTML tags. When this occurs, it is vital to know the rules of importance. The style in an HTML tag (tag basis integration) has primary importance, followed by an ID tag, a CLASS, and an HTML tag (page or site basis integration) is least important. The most important take precedence over the least important. For example, consider the following source code:
<STYLE TYPE="text/css">
FONT { color: blue; }
</STYLE>
<font style="color: red">Hello</font>
Hello
Well, by looking at importance and by trying it ourselves, we see that the color will be red. However, what if you want to negate the rules of importance? Take, for example, our "Cookie Monster" scenario in step 1. You've just learned about CSS, however you don't want to implement it for your "Cookie Monster" text because it'll take too much time to change all the FONT tags for the first time. Well, if you made it this far without doing your complete overhaul, you can just override the color (or any other declaration) by adding ! important to the end of the declaration you wish to take primary precedence. For example, check out our modified code:
<STYLE TYPE="text/css">
FONT { color: blue ! important; }
</STYLE>
<font style="color: red">Hello</font>
Hello
This is the end of step 4. In the next part you will learn
How to customize the colors of your page.
Next Step
CSS in 7 Easy Steps (Home)
© 2000 Nicolas Spiegelberg. All rights reserved
|
|
|
