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
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
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
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.
- A property-value pair is called a declaration or definition (color: black)
- All of the declarations for one selector should be placed together between curly brackets {}. This is called a declaration block.
- A selector and declaration block is called a rule.
- Each selector should begin on a separate line.
- Separate the property from its value with a : colon (color: black)
- If a value has more than one word, place the value between quotation marks ("Comic Sans MS")
- Separate each declaration with a ; semicolon.
|
|
This site needs an editor - click to learn more!
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
