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 👇