The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Basic CSS Selectors

Next ►
►

CSS (Cascading Style Sheets) is used to style and layout web pages. Selectors are a fundamental part of CSS as they are used to target HTML elements that you want to style. In this section, we will cover the basic CSS selectors that you will use frequently.

Types of CSS Selectors

  1. Universal Selector

The universal selector (*) selects all elements on the page.

* {
  margin: 0;
  padding: 0;
}

Explanation: This rule removes the default margin and padding from all elements.

  1. Type Selector

The type selector targets elements by their tag name.

p {
  color: blue;
}

Explanation: This rule changes the text color of all <p> (paragraph) elements to blue.

  1. Class Selector

The class selector targets elements by their class attribute. Classes are defined with a period (.) followed by the class name.

.intro {
  font-size: 20px;
}

Explanation: This rule sets the font size of all elements with the class intro to 20 pixels.

  1. ID Selector

The ID selector targets elements by their ID attribute. IDs are defined with a hash (#) followed by the ID name.

#header {
  background-color: lightgray;
}

Explanation: This rule sets the background color of the element with the ID header to light gray.

  1. Attribute Selector

The attribute selector targets elements based on the presence or value of an attribute.

a[target="_blank"] {
  color: red;
}

Explanation: This rule changes the text color of all <a> (anchor) elements with a target attribute value of _blank to red.

  1. Grouping Selector

The grouping selector applies the same styles to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Explanation: This rule sets the font family of all <h1>, <h2>, and <h3> elements to Arial or a sans-serif font.

Practical Examples

Example 1: Styling Paragraphs and Headings

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic CSS Selectors</title>
  <style>
    p {
      color: green;
    }
    .highlight {
      background-color: yellow;
    }
    #main-title {
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1 id="main-title">Welcome to CSS Selectors</h1>
  <p>This is a paragraph.</p>
  <p class="highlight">This paragraph is highlighted.</p>
</body>
</html>

Explanation:

  • The <p> elements are styled with green text.
  • The paragraph with the class highlight has a yellow background.
  • The <h1> element with the ID main-title is centered and has a font size of 24 pixels.

Example 2: Styling Links with Attribute Selectors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selectors</title>
  <style>
    a[href^="https"] {
      color: blue;
    }
    a[href*="example"] {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <a href="https://www.example.com">Example Link</a>
  <a href="http://www.test.com">Test Link</a>
</body>
</html>

Explanation:

  • Links that start with https are colored blue.
  • Links that contain the word example are bold.

Exercises

Exercise 1: Styling Elements with Class and ID Selectors

Task: Create an HTML page with a heading, a paragraph, and a button. Use class and ID selectors to style these elements.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 1</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <h1 id="title">Hello World</h1>
  <p class="description">This is a simple paragraph.</p>
  <button class="btn">Click Me</button>
</body>
</html>

CSS:

#title {
  color: navy;
  text-align: center;
}

.description {
  font-size: 18px;
  line-height: 1.5;
}

.btn {
  background-color: orange;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
}

Explanation:

  • The heading with the ID title is styled with navy color and centered text.
  • The paragraph with the class description has a font size of 18 pixels and a line height of 1.5.
  • The button with the class btn has an orange background, no border, white text, and a pointer cursor.

Exercise 2: Using Attribute Selectors

Task: Create an HTML page with multiple links. Use attribute selectors to style links that open in a new tab and links that contain a specific word.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 2</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <a href="https://www.google.com" target="_blank">Google</a>
  <a href="https://www.example.com">Example</a>
  <a href="https://www.test.com" target="_blank">Test</a>
</body>
</html>

CSS:

a[target="_blank"] {
  color: red;
}

a[href*="example"] {
  text-decoration: underline;
}

Explanation:

  • Links that open in a new tab (target="_blank") are colored red.
  • Links that contain the word example are underlined.

Conclusion

In this section, we covered the basic CSS selectors, including universal, type, class, ID, attribute, and grouping selectors. Understanding these selectors is crucial for effectively styling HTML elements. Practice using these selectors in your projects to become more comfortable with CSS.

Next, we will delve into more advanced CSS concepts and techniques to further enhance your web design skills.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved