Css syntax
CSS selectors are patterns used to select and style specific elements on a webpage. They tell the browser, "Hey, style this element in this way!" Let's go through the most common types of CSS selectors that are easy to understand:
1. Element Selector
This selector is used to target HTML elements by their tag name, like <p>, <h1>, or <div>.
p {
color: blue;
}
- What it does: This changes the text color of all <p> (paragraph) elements to blue.
2. Class Selector
A class is something you can use to style multiple elements the same way. You can assign a class to any HTML element using the class attribute.
.myClass {
color: red;
}
- What it does: Any HTML element with class="myClass" will have red text.
Example in HTML:
html
<p class="myClass">This text will be red.</p>
<p>This text will not be affected.</p>
3. ID Selector
The ID selector is used to style one specific element. An element can have only one ID, and it should be unique on the page.
#myID {
color: green;
}
- What it does: The element with id="myID" will have green text.
Example in HTML:
<p id="myID">This text will be green.</p>
<p>This text will not be affected.</p>
4. Universal Selector (*)
This selector matches every element on the page.
* {
font-family: Arial;
}
What it does: All elements will have the font "Arial".
5. Group Selector
You can style multiple elements the same way by grouping them with commas.
h1, h2, p {
color: purple;
}
- What it does: All <h1>, <h2>, and <p> elements will have purple text.
6. Descendant Selector
This selector targets elements that are nested inside other elements. For example, it will style a <p> only if it’s inside a <div>.
div p {
color: orange;
}
- What it does: Only paragraphs (<p>) inside a <div> will have orange text.
7. Pseudo-class Selector
Pseudo-classes style elements based on their state, like when you hover over a link.
a:hover {
color: red;
}
- What it does: When you hover your mouse over a link (<a>), its color will change to red.
Example Bringing it All Together:
Here’s a small example of how these selectors look in action:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
p { color: blue; } /* Element selector */
.intro { font-size: 20px; } /* Class selector */
#special { font-weight: bold; } /* ID selector */
a:hover { color: red; } /* Pseudo-class */
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="intro">This paragraph is styled with a class.</p>
<p id="special">This paragraph is styled with an ID.</p>
<a href="#">Hover over me!</a>
</body>
</html>
-The first paragraph will be blue.
- The second paragraph will be bigger because of the class.
-The third one will be bold because of the ID.
-The link will turn red when you hover over it.
Summary:
-Element Selector: Targets all elements of a specific type.
-Class Selector: Targets elements with a specific class.
-ID Selector: Targets an element with a specific ID.
-Universal Selector: Targets all elements.
-Group Selector: Styles multiple elements the same way.
-Descendant Selector: Styles elements inside other elements.
-Pseudo-class Selector: Styles elements based on their state (like hovering).
Top comments (0)