Introduction to CSS: Examples #1
Creating an External Style Sheet
Using What You've Learned So Far
[INDEX]
Open your text editor to a 'blank' page. If you are using the HTML-Kit hold down the CTRL key and click on the Create a new file icon at the top left. To make this tutorial more universal I will be using and demonstrating these CSS examples with the Notepad text editor that comes with Windows applications. I will also be using the folder/directory set up outlined in the First Steps #2 tutorial which was finally completed 9/18/2001.
Once you have your text editor up and a blank page showing type in or Copy and Paste the following lines of CSS code.
h4 {
text-align: center;
color: #ff0000; /* Color = Red */
}
The first thing you should notice is that the property/value pairs are on separate lines. This is quite acceptable when coding CSS as either an embedded style, or external style. Or if you want you can continue to write the code as I outlined in Part #1.
h4 { text-align: center; color: #ff0000; }
Either way is fine it's just that most people find Method #1 easier to read and if you move on to the CSS Top Style (Lite or Pro) application this is the way that marvelous editor does it's CSS coding.
Once you have the CSS code inputed into your text editor save it to your styles folder with the filename, teststyles1.css.
HTML Template
[INDEX]
Next thing you need to do.
If you are using the HTML-Kit click on the Create new file icon to pull up a new page with your basic HTML template in it.
If you are using Notepad input the following code and save it as html_template.html if you haven't already done so. If you already have the HTML template in your programs folder then simply load it into your Notepad text editor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>******</title>
</head>
<body>
</body>
</html>
Immediately Save As the template file and name it example1_css.html so you don't over-write your HTML template file. Make sure you save the example_css.html file to your programs folder. Also make sure you have a html_template.bak for a backup file just in case you do over-write the original template file.
In your text editor input the following title between the <title> </title> tags:
<title>First CSS Example</title>
Then place the cursor at the </head> line and press your Enter key 3 times to give you some working room. Then move your cursor up 2 lines and type in the following line of code, or Copy and Paste it if you wish.
<link rel="stylesheet" type="text/css" href="../styles/teststyles1.css">
Now move your cursor down to where it's between the opening <body> tag and the closing </body> tag and type in the following line of code.
<h4>Using CSS With HTML</h4>
Resave the HTML file example1_css.html. If you are using the Kit simply click the Save icon. For Notepad click File | Save. Here is what the code should look like.
Previewing Your Work
[INDEX]
If you are using the HTML-Kit make sure the example_css.html file is showing in your editor and click the Preview tab.
For Notepad Copy and Paste the following line into the Address Window of your browser and press your Enter key.
C:\html1\programs\example1_css.html
If you aren't using the Learning Corner folder setup then click File | Open, or File | Open Page and then browse to the folder where you put the example1_css.html file and open it in your browser.
Here is a image of the Notepad text editor and in the bottom right corner is a resized view of the top half of the Internet Explorer browser with the example1_css.html file pulled up in that browser.
Note that the <title> of our document => First CSS Example, will show up in the top left hand corner of the browser. This is standard for all browsers as far as I know.
The line of code using the <h4> heading tags => Using CSS With HTML appears in the browser centered on the page with red text because that's the way the external style sheet we called with the <link> line in our code told it how we wanted the <h4> goodies to display.
h4 {
text-align: center;
color: #ff0000; /* Color = Red */
}
How It All Works
[INDEX]
So here are the steps used to display the example1_css.html web page (assume for the moment that it's uploaded to a web site).
- Visitor requests the example1_css.html file either by typing in the PATH and filename, or by clicking on a Favorite (Internet Explorer) or a Bookmark (Netscape).
- Server hopefully finds the web page and downloads it to the visitors browser.
- The visitors browser starts to parse (read) the page.
- When it gets to this line:
<link rel="stylesheet" type="text/css" href="../styles/teststyles1.css.css">
it looks for, and hopefully finds the external CSS file. - The browser reads the external file and more or less adds it to the rest of the HTML/XHTML document. It does this internally so if you read the code for the web page you will NOT actually see the external CSS definitions unless you read the external CSS file. Later I will show you how to do this!
- When the browser reads the <h4> line it does whatever the CSS defintion has told it to per the external CSS file. If it finds another <h4> line it will do the same thing, and so on.
- The browser continues to read the HTML/XHTML document one line after the other until it reaches the </html> tag, inserting any CSS defintions when necessary, then stops parsing (reading).
- Along the way the browser creates an internal 'road map' of all the objects on the web page. This is used by Javascript for things like rollovers, changing table cell colors, the pages background color, etc.
Adding A Embedded Style Defintion
[INDEX]
After the <link> line in our code add the following lines of code. Do a File | Save As and name the file example2_css.html no matter what editor you are using.
Note:
If you are using Notepad remember to type out the filename and extension.
<style type="text/css">
<!--
h4 { text-align: right; }
-->
</style>
Below is a graphic of the code in Notepad and the resized result using Internet Explorer 6.0. If using Notepad type in, or Copy and Paste the following line in your browsers Adddress Window.
C:\html1\programs\example2_css.html
Note:
For a shorthand method click inside the browsers Address Window and change the ( 1 ) in example1 to a ( 2 ) making it example2_css.html. Make sure you press your Enter key when done to pull up the page, or you can click the Go icon if you have one.
As you can see from the graphic the embedded CSS takes precedence over the external file called with the <link> line above it and places the text on the right side of the screen instead of centering it.
On the other hand if you were to change the code and place the embedded style definition first, and the <link> line after the embedded style then the external definiton would be USED. The reason for this is simple. The browser will normally use the last CSS definition given no matter what the precedence..
Test this for yourself if you want by reversing the two styles and doing a File | Save As and using the filename example2b_css.html. Change the filename in your browsers Address Window as necessary and press Enter (or the GO icon).
Important Note:
Always use the <link> line for the external style sheet first and THEN any embedded styles if you don't want the external definitions over-riding the embedded definitions. This is assuming some or all the definitions use the same selectors (tags) in both the external and embedded style types.
Adding A Inline Style Defintion
[INDEX]
Load back in the example2_css.html file if you don't already have it up in your editor. Change the <h4> line to the following in you HTML code.
<h4 style="text-align: left">Using CSS With HTML</h4>
Do a File | Save As and name the file example3_css.html. Using the shorthand method described in Section #5 change the name in your browser window and then press your Enter key or the Go icon to view the web page. Click on Preview if using the HTML-Kit.
Again the resulting graphic.
If you want try changing the external and embedded styles around to see what happens. If you do you will discover that no matter what you do the text will align to the left because we set the inline style to text-align: left.
What that tells you is that the inline style normally has the last say and the most precedence. And that there is no way to over-ride the inline style.
But this will work in our favor a lot of times.
Say you have everything aligned to the center of the page using an external style sheet like the one we created in teststyles1.css. Chances are you aren't going to want everything aligned to the center of the web page so you can use an inline style definition for those things you don't want aligned to the left, right, etc.
This is a bit of a around about example since normally left aligning things for the entire page is the norm, and then center aligning those things you want centered. Left aligning things, since it's the default anyway, is the usual approach when designing a web page but hopefully you get the idea in the last paragraph.
Note:
I suggest you stay away from using inline CSS as much as possible. The reason for this is simple. If you have to change something you will have to pull up that particular web page, make the changes, resave, and then upload the page to your web site. If you end up having to change several pages this can get to be a real chore. On the other hand by using external style definitions you need only pull up the external file, make your changes, resave, and re-upload the external file to effect every page that uses the external style sheet. Much easier doing one page than several!
One more thing of note. In all the examples the red text never changed? Why? Because neither the embedded or inline definitions changed the color of the text. But since the color was set in the external style sheet it remained the same throughout the tutorial. Hint, hint, hint!
That's it for the first CSS examples page. For the next tutorial I will break down the different types of Selectors and maybe get into specifying what kinds of values are used in CSS.
Error processing SSI file
Error processing SSI file