g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

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

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!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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 Editor Wanted for details.



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


BellaOnline Editor