logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

How to Add Cascading Style Sheets to Your Site

Guest Author - Elizabeth Connick

Once you've become comfortable with the core HTML concepts, it's time to add some style to your website.

Back when HTML was first designed, styling and element formatting was all handled as part of the HTML code, using the <font> tag and its many cousins. That all changed with HTML 4.0, when the World Wide Web Consortium (also known as W3C) added CSS to the mix. Cascading Style Sheets give the web designer far more control over the appearance of her pages than HTML alone.

There are three basic ways to define style attributes:

1. Within the body of the page, commonly called "inline styling." For example, if you wanted to make a single paragraph in your page display in 14-pixel red text, you could define the style within the paragraph tag itself as follows:

<p style="font-size: 14px; color: #ff0000;">This is a paragraph</p>

2. Within the head of the page, commonly called an "internal style sheet." If you wanted all paragraphs in one particular page to display in 14-pixel red text, you would place the following code in the head of that page:

<style>
p {
font-size: 14px;
color: #ff0000;
}
</style>

3. Within a separate file, commonly called an "external style sheet." If you wanted a number of pages within your website to have 14-pixel red paragraphs, first you'd create a new file called something like stylesheet.css (the name of the file can vary according to your preference, but it must use the extension .css) and enter the following code in that page:

p {
font-size: 14px;
color: #ff0000;
}

After you've saved style.css you would then create a special link from all those pages where you want 14-pixel red paragraphs, by placing the below code in their head sections:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

As a general rule, you should keep as much of your stylesheet data as possible in an external stylesheet. Not only does this save all that time it would take you to scatter stylesheet definitions throughout your site, but it also reduces page loading times if all the CSS information for your entire site is contained in one document. When a visitor browses through multiple pages of your site, the visitor's computer only needs to load the stylesheet once.

Yet another way to connect to stylesheet information is the @import statement. @import allows you to connect to an external stylesheet from within another stylesheet. It's used as follows:

@import url("otherstyle.css");

The @import statement should be the first item in the stylesheet or it won't work. You can also use @import in the head of an HTML document, with the same results as placing a link to an external sheet. This method is most commonly used to 'hack' or trick certain browsers; most older browser versions ignore @import, so you can use this method to hide stylesheet data from them while still providing the data to visitors with newer browser versions.
This site needs an editor - click to learn more!

Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Twitter Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Facebook Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to MySpace Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Del.icio.us Digg How+to+Add+Cascading+Style+Sheets+to+Your+Site Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Yahoo My Web Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Google Bookmarks Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Stumbleupon Add How+to+Add+Cascading+Style+Sheets+to+Your+Site to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor