g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor