>_
CodeXPal
🎨

CSS Selectors and Properties

Beginner
60 XP
15 min
Lesson Content

CSS Selectors and Properties

CSS (Cascading Style Sheets) is used to style HTML elements. CSS works by selecting HTML elements and applying styles to them.

Basic CSS Syntax

selector {
    property: value;
    property: value;
}

Common Selectors

  • Element Selector: h1 { color: blue; }
  • Class Selector: .my-class { font-size: 16px; }
  • ID Selector: #my-id { background: yellow; }

Common Properties

  • color - Text color
  • background-color - Background color
  • font-size - Text size
  • margin - Space outside element
  • padding - Space inside element
Example Code

Style HTML elements using different CSS selectors (element, class, and ID selectors).

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Style the h1 element using element selector */
    h1 {
      color: #2563eb;
      text-align: center;
    }
    
    /* Style elements with class 'highlight' */
    .highlight {
      background-color: #fef3c7;
      padding: 10px;
    }
    
    /* Style element with id 'special' */
    #special {
      font-weight: bold;
      color: #dc2626;
    }
  </style>
</head>
<body>
  <h1>CSS Selectors Demo</h1>
  <p class="highlight">This paragraph uses a class selector.</p>
  <p id="special">This paragraph uses an ID selector.</p>
</body>
</html>

Expected Output:

CSS Selectors Demo
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code