Home/CSS/Selectors and Properties

CSS Selectors and Properties

CSS Basics•Reading time: 6 min

Selectors and properties are the foundation of CSS. Selectors determine which HTML elements to style, while properties define how those elements will appear.

In this tutorial, you'll learn about different types of selectors, how to use them effectively, and how to apply various CSS properties.

1Basic Selectors

CSS provides several ways to select HTML elements. Here are the most fundamental selectors:

css

/* Element Selector - Selects all <p> elements */
p {
  color: blue;
  line-height: 1.6;
}

/* Class Selector - Selects elements with class="highlight" */
.highlight {
  background-color: yellow;
  padding: 5px;
}

/* ID Selector - Selects the element with id="header" */
#header {
  font-size: 24px;
  margin-bottom: 20px;
}

/* Universal Selector - Selects all elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Basic Selectors Overview:

Element Selector

Selects all instances of a specific HTML element

Example: p, h1, div

Class Selector

Selects elements with a specific class attribute

Example: .highlight, .btn, .container

ID Selector

Selects a single element with a specific id attribute

Example: #header, #nav, #footer

Universal Selector

Selects all elements on the page

Example: *

2Advanced Selectors

CSS provides powerful ways to select elements based on their relationships, attributes, and states.

css

/* Descendant Selector - Selects all <p> inside <div> */
div p {
  margin-left: 20px;
}

/* Child Selector - Selects <p> that are direct children of <div> */
div > p {
  font-weight: bold;
}

/* Adjacent Sibling Selector - Selects <p> that directly follows <h2> */
h2 + p {
  font-size: 18px;
}

/* Attribute Selector - Selects <a> with href containing "example.com" */
a[href*="example.com"] {
  color: green;
}

/* Pseudo-class - Selects <a> when hovered */
a:hover {
  text-decoration: underline;
}

/* Pseudo-element - Adds content after each <p> */
p::after {
  content: " ➤";
  color: blue;
}

Combinators:

space - Descendant selector
> - Child selector
+ - Adjacent sibling selector
~ - General sibling selector

Pseudo-classes:

:hover, :active, :focus - User interaction
:first-child, :last-child - Element position
:nth-child() - Pattern-based selection
:not() - Negation selection

Attribute Selectors:

[attr] - Elements with the attribute
[attr="value"] - Elements with exact attribute value
[attr^="value"] - Attribute begins with value
[attr$="value"] - Attribute ends with value
[attr*="value"] - Attribute contains value

3Specificity

When multiple selectors target the same element, the browser uses specificity to determine which CSS rule to apply. Understanding specificity is crucial for debugging and writing maintainable CSS.

css

/* Specificity calculation examples */

/* Specificity: 0,0,1 */
p {
  color: red;
}

/* Specificity: 0,1,0 */
.text {
  color: blue;
}

/* Specificity: 0,1,1 */
p.text {
  color: green;
}

/* Specificity: 1,0,0 */
#unique {
  color: purple;
}

/* Specificity: 1,0,1 */
#unique p {
  color: orange;
}

/* Inline styles have highest specificity */
<p style="color: cyan;">This text is cyan</p>

Specificity Hierarchy (from highest to lowest):

1
Inline styles
Using the style attribute directly on HTML elements
2
IDs
Selectors with ID references (#id)
3
Classes, attributes, and pseudo-classes
(.class, [attr], :hover)
4
Elements and pseudo-elements
(p, ::before)

Important Note:

The !important declaration overrides normal specificity rules and should be used sparingly.

p { color: red !important; }

4Common Properties

CSS properties define how selected elements will appear. Here are some commonly used properties grouped by category:

Text Properties

color: Text color
font-family: Font typeface
font-size: Text size
font-weight: Text boldness
line-height: Line spacing
text-align: Text alignment
text-decoration: Underline, overline, etc.

Box Properties

width, height: Dimensions
margin: Outside spacing
padding: Inside spacing
border: Element border
border-radius: Rounded corners
box-shadow: Shadow effect
box-sizing: How dimensions are calculated

Background Properties

background-color: Background color
background-image: Background image
background-repeat: Image repetition
background-position: Image position
background-size: Image size
background-attachment: Image scrolling behavior

Layout Properties

display: Element rendering type
position: Positioning method
top, right, bottom, left: Position coordinates
float: Element floating
z-index: Stacking order
overflow: Content overflow handling

css

/* Example of various properties in use */
.card {
  /* Box properties */
  width: 300px;
  padding: 20px;
  margin: 15px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Background properties */
  background-color: white;
  background-image: linear-gradient(to bottom, #f9f9f9, white);
  
  /* Text properties */
  color: #333;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  
  /* Layout properties */
  display: flex;
  flex-direction: column;
  position: relative;
}

5Try It Yourself

Practice using different selectors and properties by styling this HTML example:

index.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selectors Practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <header>
      <h1>CSS Selectors and Properties</h1>
      <p class="subtitle">Learn how to select and style HTML elements</p>
    </header>
    
    <nav>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    
    <main>
      <section>
        <h2>Basic Selectors</h2>
        <p>This paragraph will be styled using an element selector.</p>
        <p class="highlight">This paragraph uses a class selector.</p>
        <p id="special">This paragraph uses an ID selector.</p>
      </section>
      
      <section>
        <h2>Form Elements</h2>
        <form>
          <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" placeholder="Your name">
          </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" placeholder="Your email">
          </div>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    
    <footer>
      <p>&copy; 2025 CSS Practice</p>
    </footer>
  </div>
</body>
</html>

styles.css

Example Code

css

/* Base styles using element selectors */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header styles using descendant selectors */
header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

header .subtitle {
  font-style: italic;
  color: #7f8c8d;
}

/* Navigation styles using child selectors */
nav > ul {
  list-style: none;
  padding: 0;
  display: flex;
  background-color: #3498db;
  border-radius: 4px;
}

nav > ul > li {
  margin: 0;
}

nav a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}

/* Pseudo-class selectors */
nav a:hover {
  background-color: #2980b9;
}

nav a.active {
  background-color: #2980b9;
  font-weight: bold;
}

/* Class selector example */
.highlight {
  background-color: #ffffcc;
  padding: 10px;
  border-left: 4px solid #f1c40f;
}

/* ID selector example */
#special {
  color: #e74c3c;
  font-weight: bold;
}

/* Adjacent sibling selector */
h2 + p {
  font-size: 18px;
}

/* Attribute selectors */
input[type="text"] {
  border: 2px solid #3498db;
}

input[type="email"] {
  border: 2px solid #9b59b6;
}

/* Form styles */
.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
}

button {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* Pseudo-element */
section::after {
  content: "";
  display: block;
  margin: 20px 0;
  border-bottom: 1px solid #ddd;
}

/* Footer */
footer {
  margin-top: 20px;
  text-align: center;
  color: #7f8c8d;
}

Pro Tip:

Try modifying the CSS to explore how different selectors and properties affect the appearance. Experiment with combining selectors and adding new properties to deepen your understanding.

Summary

✓
Element, class, ID, and universal selectors target HTML elements in different ways
✓
Advanced selectors like combinators and pseudo-classes provide powerful targeting options
✓
Specificity determines which CSS rules take precedence when conflicts arise
✓
CSS properties control the appearance and behavior of selected elements

Previous: Introduction to CSS Next: Colors and Backgrounds