In this tutorial you will learn about the CSS Syntax and its application with practical example.
The syntax to define a CSS is as follows:
|
1 |
selector { property: value } |
There is no limit on the number of property:value pair that can be specified for a selector.
| Selector | The selector as a HTML entity on which the defined styling will be applied.There are three main types of selectors: type selectors, class selectors, and ID selectors. |
| Property | The property is a styling attribute of selected HTML entity( Selector ).It could be border,color,font etc. |
| Value | It is the value for the assigned property. |
Example:
|
1 |
b { color:yellow;} |
means that text in the <b> element will be yellow.
Grouping Selectors
If we want to apply same styling to multiple selectors then they can be declared together. This is called “grouping”.Just separate the selectors with a comma. For example, if <h1>, <h2>, and <h3> share they same style, they can be declared together as follows:
|
1 |
h1,h2,h3 { color: red} |
Descendant Selectors
When we want to apply a stying or CSS to a particular element only when it is under or inside a specific element.Suppose we want to apply styling to <b> element inside the <li> element.
The syntax for declaring a descendant selector is:
|
1 |
[Parent Selector] [Child Selector] { property:value;} |
Example:
|
1 |
li b { color:red;} |
means that text in the <b> element inside the <li> element will be red.
Applying Multiple Properties
To apply multiple properties just separate each declaration with a semi-colon.
|
1 |
selector { property: value;property: value;property: value ... } |
Example:
|
1 |
h1 { color:red; font-family:arial,helvetica,"sans serif" } |
