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).

Bootcamp 2 - CSS selectors