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

CSS Syntax and Selectors

Next ►
►

Introduction

In this section, we will cover the basics of CSS syntax and selectors. Understanding these fundamentals is crucial for writing effective and efficient CSS code. By the end of this lesson, you will be able to write basic CSS rules and use different types of selectors to target HTML elements.

CSS Syntax

CSS (Cascading Style Sheets) is used to style HTML elements. A CSS rule consists of a selector and a declaration block.

Basic Structure

selector {
  property: value;
}
  • Selector: Specifies the HTML element(s) to be styled.
  • Declaration Block: Contains one or more declarations separated by semicolons.
  • Declaration: Consists of a property and a value, separated by a colon.

Example

p {
  color: blue;
  font-size: 16px;
}

In this example:

  • The selector p targets all <p> elements.
  • The declarations color: blue; and font-size: 16px; set the text color to blue and the font size to 16 pixels, respectively.

Types of Selectors

CSS provides various types of selectors to target HTML elements in different ways.

  1. Universal Selector

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

* {
  margin: 0;
  padding: 0;
}

  1. Type Selector

The type selector targets elements by their tag name.

h1 {
  color: green;
}

  1. Class Selector

The class selector targets elements with a specific class attribute. It is denoted by a period (.) followed by the class name.

.intro {
  font-weight: bold;
}

  1. ID Selector

The ID selector targets a single element with a specific ID attribute. It is denoted by a hash (#) followed by the ID name.

#header {
  background-color: lightgray;
}

  1. Attribute Selector

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

input[type="text"] {
  border: 1px solid black;
}

  1. Descendant Selector

The descendant selector targets elements that are descendants of a specified element.

div p {
  color: red;
}

  1. Child Selector

The child selector targets direct children of a specified element.

ul > li {
  list-style-type: none;
}

  1. Sibling Selectors

  • Adjacent Sibling Selector: Targets an element that is immediately preceded by a specified element.

    h1 + p {
  margin-top: 0;
}

  • General Sibling Selector: Targets all elements that are siblings of a specified element.

    h1 ~ p {
  color: gray;
}

Practical Examples

Example 1: Styling Paragraphs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Syntax and Selectors</title>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

Example 2: Using Class and ID Selectors

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

Exercises

Exercise 1: Basic Selectors

Task: Write CSS to style the following HTML elements:

  • All <h2> elements should have a color of purple.
  • The element with the ID special should have a background color of lightblue.
  • All elements with the class note should have a font size of 14px.
<!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>
    /* Write your CSS here */
    h2 {
      color: purple;
    }
    #special {
      background-color: lightblue;
    }
    .note {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h2>Heading 2</h2>
  <p id="special">This is a special paragraph.</p>
  <p class="note">This is a note.</p>
  <p>This is a regular paragraph.</p>
</body>
</html>

Exercise 2: Advanced Selectors

Task: Write CSS to style the following HTML elements:

  • All <li> elements that are direct children of <ul> should have a color of green.
  • The first <p> element after an <h2> should have a margin-top of 0.
  • All <p> elements that are siblings of an <h2> should have a color of gray.
<!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>
    /* Write your CSS here */
    ul > li {
      color: green;
    }
    h2 + p {
      margin-top: 0;
    }
    h2 ~ p {
      color: gray;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <h2>Heading 2</h2>
  <p>This paragraph is immediately after the heading.</p>
  <p>This paragraph is a sibling of the heading.</p>
</body>
</html>

Conclusion

In this lesson, we covered the basic syntax of CSS and various types of selectors. Understanding these concepts is essential for writing effective CSS. Practice using different selectors to target HTML elements and style them according to your needs. In the next lesson, we will learn how to add CSS to HTML in different ways.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved