intro-frontend-course

Lesson: CSS Selectors and Properties

In this lesson, we will learn about CSS selectors and properties. Selectors are used to target specific HTML elements, while properties define how those elements should be styled.

There are various types of CSS selectors, such as class selectors, ID selectors, element selectors, and descendant selectors. Understanding how to use these selectors effectively is key to creating well-designed and visually appealing websites. Additionally, CSS properties like color, font-size, margin, and padding allow us to customize the appearance of our web pages.

Key Lesson Concepts

Understanding various CSS selectors to target HTML elements.
Differentiating between element, class, ID, and advanced selectors.
Practical use of selectors for styling.

CSS Selectors

CSS selectors are the means by which CSS styles are applied to elements in an HTML document. By using different types of selectors, developers can precisely define which elements on a web page should receive certain styles. Below we’ll explore several common types of selectors, including element selectors, ID selectors, class selectors, descendant selectors, combinator selectors, attribute selectors, pseudo-classes, and pseudo-elements. Each section is paired with HTML examples to show how they function in context.

1. Element Selectors

Element selectors apply styles to all elements of a specific type within the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element Selector Example</title>
  <style>
    p {
      font-size: 16px;
      color: black;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

See the Pen Element selectors example by Mik M (@Mik-M) on CodePen.

Both <p> tags in the HTML will have a font size of 16px and black color. You can check this by creating a file called test.html using VSCode with the above content. Once you create the file, you can view it by using your web browser.

2. ID Selectors

ID selectors provide a way to style a single element with a unique ID. The ID of an element should be unique within a page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ID Selector Example</title>
  <style>
    #header {
      background-color: grey;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="header">This is the header.</div>
</body>
</html>

See the Pen week_2__id_selector_example by Mik M (@Mik-M) on CodePen.

The <div> with the ID #header will have a grey background color and 20px padding.

3. Class Selectors

Class selectors allow you to apply the same style to multiple elements with the same class attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Class Selector Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p class="highlight">This paragraph is highlighted.</p>
  <div class="highlight">This div is also highlighted.</div>
</body>
</html>

See the Pen Week_2__class_selectors_example by Mik M (@Mik-M) on CodePen.

Both the <p> and <div> elements with the class highlight will have a yellow background color.

4. Descendant Selectors

Descendant selectors target elements that are nested within other specific elements. They allow for more targeted styling within the DOM structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Descendant Selector Example</title>
  <style>
    div span {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>This text is red.</span>
    <p>This text is not targeted.</p>
  </div>
</body>
</html>

See the Pen week_2__class_selectors_example by Mik M (@Mik-M) on CodePen.

The <span> element inside the <div> will have red text, but the <p> element will remain unaffected.

5. Combinator Selectors

Adjacent Sibling Selector

The adjacent sibling combinator (+) targets an element that is immediately preceded by a specified sibling.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adjacent Sibling Selector Example</title>
  <style>
    h1 + p {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>This paragraph is blue because it follows an h1.</p>
  <p>This paragraph is not blue.</p>
</body>
</html>

See the Pen week_2__element_selectors_example by Mik M (@Mik-M) on CodePen.

The <p> element immediately following the <h1> will have blue text.

General Sibling Selector

The general sibling combinator (~) targets all elements that are siblings of a specified element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>General Sibling Selector Example</title>
  <style>
    h1 ~ p {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>All paragraphs following the h1 are green.</p>
  <p>This paragraph is also green.</p>
</body>
</html>

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

All <p> elements following the <h1> will have green text.

Child Selector

The child combinator (>) targets direct child elements of a specified parent.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Child Selector Example</title>
  <style>
    div > p {
      color: purple;
    }
  </style>
</head>
<body>
  <div>
    <p>This paragraph is purple because it is a direct child of div.</p>
    <span>
      <p>This paragraph is not purple because it is nested inside a span.</p>
    </span>
  </div>
</body>
</html>

See the Pen week_2__direct_child_selectors_example by Mik M (@Mik-M) on CodePen.

The direct child <p> of the <div> will have purple text.

6. Attribute Selectors

Attribute selectors target elements based on the presence or value of attributes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selector Example</title>
  <style>
    input[type="text"] {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Text input">
  <input type="password" placeholder="Password input">
</body>
</html>

See the Pen week_2__attribute_selectors_example by Mik M (@Mik-M) on CodePen.

The <input> with type="text" will have a blue border.

7. Pseudo-classes and Pseudo-elements

Pseudo-classes

Pseudo-classes apply styles to elements in specific states.

a:hover {
  color: red;
}

See the Pen week_2__pseudo_class_selectors_example by Mik M (@Mik-M) on CodePen.

When a user hovers over an <a> element, its text color will change to red.

Pseudo-elements

Pseudo-elements style specific parts of an element.

p::first-line {
  font-weight: bold;
}

See the Pen week_2__pseudo-elements_selectors_example by Mik M (@Mik-M) on CodePen.

The first line of every <p> element will be bold.

Here are more pseudo-elements and their purposes

Yes, there are more built-in pseudo-elements in CSS. Here are some common ones:

::before: Inserts content before an element’s content.
::after: Inserts content after an element’s content.
::first-letter: Applies styles to the first letter of the first line of a block-level element.
::selection: Applies styles to the portion of an element that is selected by a user.
::placeholder: Applies styles to the placeholder text in an input or textarea element.
::marker: Applies styles to the marker box of a list item.

Example usage of these pseudo-elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-Elements Example</title>
    <style>
        p::first-letter {
            font-size: 2em;
            color: red;
        }
        p::before {
            content: "Note: ";
            font-weight: bold;
        }
        p::after {
            content: " (end of note)";
            font-weight: bold;
        }
        ::selection {
            background: yellow;
            color: black;
        }
        input::placeholder {
            color: gray;
            font-style: italic;
        }
        li::marker {
            color: green;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <p>This is an example paragraph to demonstrate various pseudo-elements.</p>
    <input type="text" placeholder="Enter your text here">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
</body>
</html>

See the Pen week_2__more_pseudo_element_selectors_example by Mik M (@Mik-M) on CodePen.

Watch this video to get more information about CSS selectors

CSS Properties for Styling

CSS properties are the actual values assigned to a CSS property within a declaration block. Here are some commonly used properties:

Color

Sets the color of the text.

h1 {
  color: navy;
}

Font-size

Specifies the size of the text.

.big-text {
  font-size: 20px;
}

Margin

Controls the outer space around an element.

.external-space {
  margin: 10px;
}

Padding

Manages the space between the content of an element and its border.

.internal-space {
  padding: 5px;
}

CSS Variables

CSS variables (custom properties) allow you to manage and reuse values across your stylesheet.

:root {
  --main-color: #3498db;
}

h1 {
  color: var(--main-color);
}

See the Pen Week_2__css_variables by Mik M (@Mik-M) on CodePen.

The h1 element will use the color defined by the --main-color variable.

Specificity and Inheritance

Specificity

Specificity determines which CSS rules apply when multiple rules could be applied to the same element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Specificity Example</title>
  <style>
    p {
      color: black; /* Lowest specificity */
    }
    .highlight p {
      color: blue; /* Medium specificity */
    }
    #unique p {
      color: red; /* Highest specificity */
    }
  </style>
</head>
<body>
  <div class="highlight">
    <div id="unique">
      <p>This text will be red due to the highest specificity rule.</p>
    </div>
  </div>
</body>
</html>

See the Pen Week2_specificity by Mik M (@Mik-M) on CodePen.

The <p> element will be red because the ID selector has the highest specificity.

Inheritance

Some CSS properties are inherited from parent elements, while others are not.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inheritance Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: green;
    }
    .child {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="child">
    <p>This text inherits the green color and uses the Arial font.</p>
  </div>
</body>
</html>