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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Cascading Style Sheet Basics

Guest Author - Elizabeth Connick

Cascading Style Sheets, or CSS, are the best way to change the appearance of your web pages. CSS was added to HTML 4.0 in order to help web developers keep layout and appearance rules separate from the page content itself.

A CSS rule is made up of three components: the selector, the property and the value.

The selector defines what parts of your web page will be affected by the rule. If you want to make a change to the entire page, you would list 'body' as the selector. But if you wanted your change only to affect text in paragraph format, you would use 'p' as the selector.

The property defines what you are changing about that selector. Want to change your text's color? You'd list the 'color' property in your CSS rule. If you wanted to add margins around every paragraph, you'd use the 'margin' property.

Finally, the value declares what change you are making to the property. In the examples above, if you were changing your text color to red, the value would be 'red' or '#FF0000,' while if you were setting the paragraph margins to 15 pixels then you would list the value '15px' in your rule.

Putting these three components together, a CSS rule looks like this:

selector {
  property: value;
}

... or, continuing with the examples above:

body {
  color: red;
}

p {
  margin: 15px;
}

You should include a semicolon after each property-value pair. For each selector, you can make multiple property changes at once, for example:

body {
  font-size: 14px;
  color: red;
  font-family: arial;
}

You can also group a number of selectors together. If you wanted your margin change to affect images as well as paragraphs, you can create a rule like this:

p, img {
  margin: 15px;
}

So what do you do if you want some, but not all, of your text to be red? That's when the class selector comes into play. You can call a class selector anything you want, although you shouldn't start a class name with a number or it will fail in some browsers. A class is defined like this:

.redtext {
  color: red;
}

When you want to apply that class to an HTML element, you give it the 'class' attribute like so:

<p class="redtext">This text is red because of its class.</p>

You can also create rules with the ID selector – this works exactly like the class selector, except you begin the selector with a '#' instead of a '.':

#bluetext {
  color: blue;
}

... and you would apply it to the HTML as follows:

<p id="bluetext">This text is blue because of its ID.</p>

The difference between ID and class is that a given ID attribute can only apply to one HTML element per page, whereas you can use a class attribute as many times as you like. In the above example, you could have only one 'bluetext' element on each page, but you could have multiple 'redtext' elements.
This site needs an editor - click to learn more!

Add Cascading+Style+Sheet+Basics to Twitter Add Cascading+Style+Sheet+Basics to Facebook Add Cascading+Style+Sheet+Basics to MySpace Add Cascading+Style+Sheet+Basics to Del.icio.us Digg Cascading+Style+Sheet+Basics Add Cascading+Style+Sheet+Basics to Yahoo My Web Add Cascading+Style+Sheet+Basics to Google Bookmarks Add Cascading+Style+Sheet+Basics to Stumbleupon Add Cascading+Style+Sheet+Basics 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 © 2014 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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor