CSS: selectors and properties

Lecture 2: Selectors and Properties

In this lecture, we'll dive into the building blocks of CSS: selectors and properties. These are essential concepts that allow you to target specific elements on your webpage and style them effectively.

---

What are CSS Selectors?

CSS selectors are patterns used to select the HTML elements you want to style. Different types of selectors allow you to apply styles to various elements based on their tag, class, ID, attributes, and more.

Types of Selectors

1. Element (Type) Selector:

   • Targets all elements of a specific type.
   • Example:

    p {
      color: green;
    }
   

   This will change the color of all <p> elements to green.

2. Class Selector:

   • Targets elements with a specific class attribute.
   • Example:

    .highlight {
      background-color: yellow;
    }
   

   In your HTML, any element with class="highlight" will have a yellow background.
   

    <p class="highlight">This is highlighted text.</p>
   

3. ID Selector:

   • Targets a single element with a unique ID attribute.
   • Example:

    #header {
      font-size: 24px;
    }
   

   Only the element with id="header" will have a font size of 24px.
   

    <div id="header">Welcome to My Website</div>
   

4. Group Selector:

   • Applies the same style to multiple selectors.
   • Example:

    h1, h2, h3 {
      color: blue;
    }
   

   This rule will make all <h1>, <h2>, and <h3> elements blue.

5. Descendant Selector:

   • Targets elements that are inside (descendants of) other elements.
   • Example:

    div p {
      font-style: italic;
    }
   

   This will make all <p> elements inside a <div> italicized.
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

Understanding CSS Properties

CSS properties define what aspects of the selected elements you want to style. Each property is followed by a value that specifies the desired outcome.

Example Properties:

• Color:

  • Sets the text color.
  • Example:

  h1 {
    color: red;
  }
  

• Background-Color:

  • Sets the background color.
  • Example:

  body {
    background-color: #f0f0f0;
  }
  

• Font-Size:

  • Sets the size of the text.
  • Example:

  p {
    font-size: 16px;
  }
  

• Margin:

  • Sets the space outside an element.
  • Example:

  .box {
    margin: 20px;
  }
  

• Padding:

  • Sets the space inside an element, between the content and the border.
  • Example:

  .content {
    padding: 10px;
  }
  

Practical Examples:

Let’s combine what we’ve learned with a simple example.

HTML:

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

CSS:

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

In this example:

• The #container div is styled with a black border and padding.
• The <h1> heading is colored purple.
• The paragraph with the class intro has a light blue background and a larger font size.
• Both <h1> and <p> elements use the Arial font.
• All paragraphs inside #container have a bottom margin for spacing.

Practice Exercise

1. Create a simple HTML file with headings, paragraphs, and divs.
2. Experiment with different selectors and properties to style your content.
3. Try using the descendant selector to style nested elements.
4. Play with the grouping selector to apply the same styles to multiple elements.

---

Next Up: In the next lecture, we'll explore the CSS Box Model and learn how margins, borders, padding, and content come together to define the layout of your web elements. See you there!

Follow me on -

LinkedIn- Ridoy Hasan

-