| |
| Overview |
| |
In this chapter you will learn:
- How to write a basic CSS program
- Syntax of CSS
- Grouping of selectors
- Class Selector
|
This chapter familiarizes you with some basic terms and concepts of CSS. But before
beginning, you should be familiar with how the first style should be written. The following is an illustration of how this is done:
Example |
<html> |
<head> |
| <STYLE Type="text/css"> |
| h1{font-family:arial} |
| p{font-size:12pt ; font-style: italic} |
| </STYLE> |
| </head> |
| <body> |
| <h1>Mahatma Gandhi</h1> |
| |
| <p>Mahatma Gandhi's real name was Mohandas Karamchand Gandhi. He was born on October 2, 1869 at Porbandar, Gujarat, India. His father's name was Karamchand Gandhi and his mother's name was Putlibai. |
| |
| </body> |
| </html> |
| |
| |
Syntax |
Selector {property: value}
For example:
body {color: red} or
p {font-family: “Times New Roman”} or
h1 {font-weight: bold} etc
|
Selector
Selector is usually an HTML element or a tag on which various properties are applied. Each property has its own value and any number of properties with their corresponding values can be set, in a Selector.
As shown in the example given above; body, p, and h1 are Selectors while color, font-family and font-weight are their respective properties.
Example |
|
| h1 {font-size: 22px; text-align: center; color: red; font-family: Arial;} |
|
This can also be written as:
Example |
|
| h1 { |
| Font-size: 22px; |
| Text-align: center; |
| Color: red; |
| Font-family: Arial; |
| } |
|
Grouping of Selectors
As can be seen, a single selector can have a number of properties. Similarly, there can be a number of Selectors sharing one property. This is known as Grouping of Selectors.
Example |
|
| h1 , body , p , ul |
| { |
| color : green; |
| } |
|
| |
Example |
|
| <td valign=top> classic jokes </td> |
|
In the above example, the header element, body element, paragraph element and unordered list element have been grouped together. All these elements will have a green color.
Why is Grouping used?
-
To share the same styles, i.e. if the selector elements are to share the same set of properties, (e.g. font, size, color, etc.) grouping is used.
-
To give same style properties to different elements at once.
-
To save time while adding properties as well as while editing properties in the elements.
| Note |
| The list of selectors should be separated by commas |
| |
|
