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

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

The CSS Rule Sets, Declaration Blocks and Selectors - How To Write A CSS Style

Guest Author - Diane Cipollo

In this tutorial we will discuss the code that you will use to override the default style of the web browser and HTML tags. You will place this code between the opening <style type="text/css"> and closing </style> tags. Then place this in the head section of your webpage. Let's take a look at the code.

Basic CSS Code
<style type="text/css">
<!--
selector {
property_1: value_1;
property_2: value_2;
property_3: value_3
}
-->
</style>

Example
<style type="text/css">
<!--
p {
font-size: 12pt;
color: #000000;
text-align: center
}
-->
</style>


Selectors
p
The selector controls where the style is applied. In the example above, the p in the HTML <p> paragraph tag is the selector that tells the browser to apply a style to everything between the opening <p> tag and the closing </p> tag.

Properties
font-size
The property is the parameter or attribute that is being controlled by the style. In our example, there are three properties. They are the font size (font-size), color and text alignment (text-align).

Values
12pt
The value assigned to a property tells the browser how to display that property. In our example, the font-size property is set to 12 points, the color property is set to black (#000000) and the text alignment property is set to center. All this will cause the text between the opening and closing <p> tags to be 12 points in size, black in color and centered.

When coding your styles remember these few specifications.

  1. A property-value pair is called a declaration or definition (color: black)
  2. All of the declarations for one selector should be placed together between curly brackets {}. This is called a declaration block.
  3. A selector and declaration block is called a rule.
  4. Each selector should begin on a separate line.
  5. Separate the property from its value with a : colon (color: black)
  6. If a value has more than one word, place the value between quotation marks ("Comic Sans MS")
  7. Separate each declaration with a ; semicolon.



This site needs an editor - click to learn more!

Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Twitter Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Facebook Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to MySpace Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Del.icio.us Digg The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Yahoo My Web Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Google Bookmarks Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Stumbleupon Add The+CSS+Rule+Sets%2C+Declaration+Blocks+and+Selectors+%2D+How+To+Write+A+CSS+Style to Reddit




RSS | 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 Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. 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