Let's crack this
Name | How to represent? | Example code for CSS | Example code for HTML | Usage |
---|---|---|---|---|
ID Selector | #ID_NAME |
|
|
ID is using for designing individual element. This is not a RULE.
sometimes we use single ID name for multiple tags also. In CSS we
use '#' infront of ID name for respresenting, It is "ID" name.
Note: A ID name cannot start with a number! |
Class Selector | .class_name |
|
|
CLASS is using for designing group of elements. This is not a RULE.
sometimes we use single class name for single tag also. In CSS we
use '.' infront of class name for respresenting, It is "class" name.
Note: A class name cannot start with a number! |
Element Class | TAG_NAME.CLASS_NAME |
|
|
Element class selector using to select the particular tag have a particular classname. In Example; CSS property will be applied on the h2 tags that have the class name "headClass". if there's a "P" tag that have classname "headClass" then this selector will exclude that "p" tag. |
Universal Selector | * |
|
This will be applied on the whole HTML page. |
Universal selector is using for styling whole page. It'll applied on
all the elements in the page. for eg: Avoiding Browser default
padding and margin injection. We do this all time
|
Element Selector | TAG_NAME |
|
|
Element selector is using for select specific tag name. For eg if we select the h3, this will select all the h3 element on the HTML page. |
How we write if 3 elements have same style? or more than 10 elements have same style?
Do we write one by one? No! We can do by putting coma (,) in-between them! for eg:
p, .pClass, #h2IdClass{
---------
css code
---------
}
This CSS will make same style for "p" tag, tags that have "pClass" as class name, and tags that have "h2IdClass" as tag name;