The basic CSS Syntax used to give CSS to an HTML element. We can give CSS styling to an HTML element by using selectors.
There are two types of selectors that you can learn in next lessons. These selectors are CSS Id Selectors and CSS Class Selectors.
CSS Id Selectors use HTML elements Ids to give CSS.
CSS Class Selectors use HTML elements Classes to give CSS.
The basic syntax for CSS is
|
1 2 3 |
selector{ property:value; } |
selector: A selector can be HTML elements classname or idname. A classname can be use as a selector with dot symbol(.) at the start. An idname can be use as a selector with hash symbol(#) to the start. HTML element name can also be a selector.
property: A property name can be a CSS property like border, background etc.
value: This contains the property value like image for backgorund image property, color code for color property.
CSS syntax for Single Selector
Single Selector can be single HTML element or its class name or its id name. This can be use to give css to single HTML element.
For example
Example with HTML element name as a selector
|
1 2 3 |
p{ color:#fff; } |
Example with HTML element class name as a selector
|
1 2 3 |
p.mypara{ color:#fff; } |
Example with HTML element id name as a selector
|
1 2 3 |
p#mypara{ color:#fff; } |
CSS syntax for Multiple Selector
Multiple Selector can be multiple HTML element or its class name or its id name. This can be use to give css to multiple HTML element.
For example
Example with HTML element name as a selector
|
1 2 3 |
p,label,span,div{ color:#000; } |
Example with HTML element class name as a selector
|
1 2 3 |
p.mypara,label.mylabel,span.myspan,div.mydiv{ color:#000; } |
Example with HTML element id name as a selector
|
1 2 3 4 5 6 |
p#mypara, label#mylabel, span#myspan, div#mydiv{ color:#000; } |
CSS Syntax for multiple properties
To give multiple property for HTML elements, we need to write it one property in one line. This makes your CSS more readable to view. To use multiple property and separate them wit semicolon(;). A semicolon(;) should come after each property.
|
1 2 3 4 5 |
p{ color:#000; font-size:12px; font-family:Arial; } |