IntroDuction to Css
Adding CSS
Creating a Rule Set
A rule, or rule set is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block. Inside the delcaration block, there can be one or more declarations. Each declaration contains a propety and a value.
The first step is choosing the selector. The selector "selects" which HTML element to affect on the page by referencing the rule set.
Examples of Selectors:
- p
- h1
- h2
Next, the declaration box must be created. A declaration block is a container that consists of a property and one or more values separated by a colon and opened and closed by the use of curly brackets.
Ex. of Declaration Block:
- p {...}
- h1 {...}
- h2 {...}
Declarations tell a browser how to draw any element on a page that is selected. The end of each declaration is indicated with a semi colon. You can use multiple declarations by placing a semicolon at the end of the declaration.
- p { color: maroon; }
- h1 { text-align: center; }
- h2 { font-style: italic; }
The property is an aspect of the element that you are choosing to style.
- p { color: maroon; }
- h1 { text-align: center; }
- h2 { font-style: italic; }
The value however is the exact style you want to set for the property. Values can include length, percentage, color, url, keyword, and shape.
- p { color: maroon; }
- h1 { text-align: center; }
- h2 { font-style: italic; }
You may combine selectors when several selectors share the same declarations. Each selector must be separated by a comma but, this prevents the need to write the same rule more than once.
For example:
h1, h2 {
text-align: center;
color: navy }
h2 {
font style: italic }
Using comments
Comments allow you to leave notes to yourself and other people in your CSS, and are useful as a reminder of what the styles are being used for and why. CSS only supports block comments, and these can span multiple lines. The slash-asterisk indicates a comment start. Everything after it will be ignored by the CSS engine until an asterisk-slash is encountered.
p { color: green; }
/* This is a block comment */
div { position: relative; }