Creating an External Style Sheet
Since it groups all styles at the top of the page, so an internal style sheet is far easier to create and maintain than an inline style sheet.
Here are steps to create an external style sheet:
1. In your text editing program, create a new file and save it as global.css in the same folder as web page
External style sheets files end with the extension .css. The file name global.css indicates that the styles contained in file apply throughout the web site.
[Note: you can use any file name ending with .css extension]
Start by adding a new style to the style sheet
2. Type the following rule into global.css file:
body { background-image: url(images/bg.jpg); background-repeat: repeat-x; }
The rule applies to the body tag-the tag that holds all content visible in a web browser window- and adds a background image to the web page. Unlike a similar property in HTML, the CSS background-image property can display the graphic in several ways – in this case, as tiled horizontally across the top of the page.
3. Open basic.html page that you have been working on and copy all of the text inside the <style> tags
Copy the style information in the same way as you copy some text. For example, choose edit – copy or Press Ctrl C
4. In the empty global.css file, paste the style information by selecting Edit – Paste or pressing Ctrl-V
An external style sheet never contains any HTML – that is why you did not copy the <style> tag
5. Save and Close global.css
Now you just have to open your old file and link the new style sheet to it
6. Return to basic.html file in text editor and delete the <style> tags and all of CSS rules you typed earlier
You do not need these styles any more since they are in external style sheet you will attach.
7. In the space where the styles used to be (between the closing </title> tag and the opening <body> tag) type the following:
The <link> tag is one way to attach a style sheet to a page; another option is CSS @import directive. The link tag specifies the location of external style sheet.
8. Save the file and preview it in web browser
It should look the same with the one addition of a groovy graphic running along the top edge of the page. The CSS rules used in external style sheet is same as ones from internal style sheets; they are just located in different places.
Note: You will get error in your format of web page; if you have mistyped the code, or saved global.css file in a folder other than the one where the basic.html is located.
9. Open the file linked_page.html
This will contain some of the same HTML tags – h1, h2, p and so on – as the other web page you have been working on
10. Click after the closing </title> tag and press Enter (Return)
You will now link to the style sheet
11. Type the same <link> tag
The web page code will look like the following:
<title>Explaining Irrigation Problems To your Downstairs Neighbors</title> <link href= "global.css" rel= "stylesheet" type= "text/css /> </head>
12. Save the page and preview it in Web browser
Just one line of code added to web page is enough to instantly transform its appearance. You task will get easier if you can update an external style sheet by editing one style and adding another.
13. Open the global.css file and add CSS declaration margin-left: 25px; at the end of p style
The code should look like this:
p { color: #003366 font-size: .9em; line-height: 150%; margin-top: 0; margin-left: 25px; }
14. Click at the end of p style’s closing }, press Enter (return) and add the following rule:
h2 { color: #FFFFCC; margin-bottom: 0; padding: 5px 0px 3px 25px; background-color: #999999; }
15. Save the file global.css and preview both the basic.html and linked_page.html files in a web browser
You will notices that the appearance of both the pages will change, based on simple edits you made to the CSS file. Close you eyes and imagine that your web site has thousand pages so you can understand the power you hold over these pages!
Popularity: 23% [?]
Categories: CSS Tips, CSS Tutorials, Posted on February 20, 2008 by Choppr | Log in
Hi, I want to know how to put a title tag in an external css sheet. I have a site with a title and the color and hover etc is defined in this sheet. I can’t find out how to make a title text appear when I pass the cursor over the text. any takers?
Thanks