CSS Selectors

Basic Selectors

Element Selector: Targets all instances of an element (e.g., p { color: red; })

Class Selector: Targets elements with a specific class (e.g., .myClass { color: green; })

ID Selector: Targets an element with a specific ID (e.g., #myID { font-size: 20px; }) 

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Hello, this is a blue paragraph!</p>
</body>
</html>

Advanced Selectors

  • Group Selector (h1, h2, h3 { color: blue; })
  • Descendant Selector (div p { color: gray; })
  • Child Selector (div > p { color: orange; })