CSS Selectors 101: Targeting Elements with Precision

CSS selectors are pattern that allow you to choose which HTML element you want to style. Without them you cannot apply colour, fonts or layouts to your page

Let talk about different selector
Element Selector
This target all elements of a specific type,like all paragraphs:
p{
color:blue
}
So all paragraph will have blue color font

Class Selector
use . in front of class name
.highlight{
color:red
}
<p class="highlight">Test</p>
<span class="highlight">Test</span>

ID selector
ID are unique identifiers for single,specific element.Each ID should only appear once per page
#header{
font-size:30px
}
<h1 id="header">Heading</h1>

Group Selectors
Group element with comma,apply same style to multiple selectors
h1,h2,h3{
font-family:arial
}

Descendant Selectors
Target the element inside another elements
article p{
color:blue
}

Selector Priority:The Basic
When multiple selectors target the same element,CSS needs to decide which styles to apply
ID Selector>Class Selector>Element Selector
<p id="unique" class="special"> What a color?</p>