What if someone just built your house and they forget to paint it
Does your house look good ??
NO , becouse paint gives your house a better look
In website , CSS do the same
In this blog we will discuss :
- What is CSS ?
- Element selector
- Class selector
- ID selector
- Group selectors
- Descendant selectors
- Basic selector priority (very high level)
CSS
CSS short for Cascading Style Sheet it is use to represent the design for a webpage . Lets look at each word individually first .
1. Cascading : Flowing step-by-step where one thing affect the another. In CSS style apply in a order mean it only changes where we want to .
2. Style : How something look or designed basically how your webpage appears .
3. Sheet : A file/page wh…
What if someone just built your house and they forget to paint it
Does your house look good ??
NO , becouse paint gives your house a better look
In website , CSS do the same
In this blog we will discuss :
- What is CSS ?
- Element selector
- Class selector
- ID selector
- Group selectors
- Descendant selectors
- Basic selector priority (very high level)
CSS
CSS short for Cascading Style Sheet it is use to represent the design for a webpage . Lets look at each word individually first .
1. Cascading : Flowing step-by-step where one thing affect the another. In CSS style apply in a order mean it only changes where we want to .
2. Style : How something look or designed basically how your webpage appears .
3. Sheet : A file/page where you write style for your website .
👉 CSS allows you to create great looking website .
Thats how Amazon looks like without css
Element selector
Element selector : The element selector selects HTML element based on the element name
<p>this is a paragraph </p>
If you want to change the color of the element you just
p{
color : red
}
There are several type of selector in which we just target the selector to apply the desired design or style
Class selector : The class selector uses the class attribute of an HTML element to select a specific element
<p class="text-red"> Great blog like plz </p>
To select elements with specific class write the (.) character before class name
.text-red{
color : red
}
You can use this class name anywhere where you want to add this red text color.
ID selector : The id selector uses the id attribute of an HTML element to select a specific element
This ID is unique means this id selector is used to select one unique element
<p id="first"> Like it atleast </p>
To select an element with a specific if , write a hash ( # ) character .
#first{
color : red
}
An id cannt be start with a number
Group selectors : As , you know we use class or id to target a specific element so that some style can be applied to them .
There are other type of css selector available that can use the collective elements for the style simultaneously .
h1{
font-family:Verdana,sans-serif;
}
h2{
font-family:Verdana,sans-serif;
}
Now , after using the group selector , it will lot like
h1, h2{
font-family:Verdana,sans-serif;
}
Descendant selector : These are the selectors that select HTML element inside another element
<div>
<p> Great blog </p>
</div>
Now if i want to change the color of p element
div p {
color : red
}
Its mostly used to style parent child element
Basic selector priority
We have look a lot of type of css selctor that selects the HTML element in which we want to apply style or design . But there are some priority in it .
I will go from Least to Higher priority .
Element secector ( p, div )
⬇️
Class selector ( .box )
⬇️
ID selector ( #header )
⬇️
Inline style ( <p style="color : red"> this is paragraph </p> )
Thanks for reading ! if enjoyed this blog , you can read more on this 👇