1. CSS Basics: Understanding Selectors, Properties, and Values

Hey there!

We’ve just wrapped up our HTML series, where you learned how to create accessible and semantic web pages. Now it’s time to move on to CSS — the language that brings your web pages to life with style and layout.

In this post, we’ll cover the fundamentals of CSS, focusing on the three core concepts you need to start styling confidently: selectors, properties, and values. Whether you’re a beginner or brushing up your skills, this guide will walk you through clear explanations, practical examples, and step-by-step instructions to get you styling in no time.

Let’s dive in!

1. What is CSS and Why Use It?

CSS (Cascading Style Sheets) is the language used to describe the appearance of your HTML content — colors, fonts, spacing, positioning, and much more.

Why use CSS?

Separates content (HTML) from presentation (CSS), making your code cleaner.
Enables consistent styling across multiple pages.
Offers flexibility and control over design.
Improves user experience and accessibility.

2. The Building Blocks of CSS

At its core, a CSS rule consists of:

Selector: Targets the HTML elements you want to style.
Property: The aspect of the element you want to change (e.g., color, font-size).
Value: The setting you apply to the property (e.g., red, 16px).

Basic CSS Syntax

selector {
  property: value;
}

Example:

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

This rule selects all <p> elements and makes their text blue with a font size of 18 pixels.

3. Understanding CSS Selectors

Selectors tell the browser which elements to style. Here are some common types:

Type Selector

Targets all elements of a specific type.

h1 {
  color: green;
}

Class Selector

Targets all elements with a specific class attribute (prefixed with a dot .).

.highlight {
  background-color: yellow;
}

In HTML:

<p class="highlight">This text is highlighted.</p>

ID Selector

Targets a single element with a specific id attribute (prefixed with a hash #).

#header {
  font-weight: bold;
}

In HTML:

<div id="header">Site Header</div>

Universal Selector

Targets all elements.

* {
  margin: 0;
  padding: 0;
}

Descendant Selector

Targets elements nested inside other elements.

nav a {
  text-decoration: none;
}

This styles all <a> inside a <nav>.

4. Properties and Values: What Can You Style?

CSS has hundreds of properties. Here are some common ones to get started:

Property	Description	Example Value
`color`	Text color	`red`, `#333333`
`background-color`	Background color	`yellow`, `rgba(0,0,0,0.1)`
`font-size`	Size of the text	`16px`, `1.2em`
`margin`	Space outside the element	`10px`, `0 auto`
`padding`	Space inside the element	`5px 10px`
`border`	Border around element	`1px solid black`
`width`	Width of element	`100%`, `300px`
`display`	Layout behavior (block, inline, etc.)	`block`, `inline`

5. Practical Example: Styling a Simple Webpage

Here’s a quick example combining selectors, properties, and values:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Basics Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    .highlight {
      background-color: yellow;
      padding: 5px;
    }
    #footer {
      font-size: 12px;
      color: #888;
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Basics</h1>
  <p class="highlight">This paragraph is highlighted using a class selector.</p>
  <p>This is a normal paragraph.</p>
  <div id="footer">© 2025 Your Website</div>
</body>
</html>

Open this in your browser and see the styles in action!

6. Step-by-Step: Adding Your First CSS

Inline Styles (Quick Testing)

Add style attribute directly to an element:

<p style="color: red;">Red text</p>

Internal Stylesheet

Use the <style> tag inside <head> (as shown in the example above).

External Stylesheet (Recommended for Real Projects)

Create a separate .css file (e.g., styles.css):

body {
  background-color: #fff;
}

Link it in your HTML:

<link rel="stylesheet" href="styles.css" />

7. Bonus: CSS Comments and Organization

Use comments to explain your code:

/* This styles the main header */
h1 {
  color: blue;
}

Keep your CSS organized with logical sections and consistent formatting for readability.

Summary

What you learned:

What CSS is and why it matters
How selectors target HTML elements
How properties and values define styles
Different types of selectors: type, class, ID, and more
How to add CSS inline, internally, and externally

This is the start of your CSS journey! With these basics, you can begin transforming plain HTML pages into visually appealing websites.

Next up, we’ll explore CSS box model and layout, where you’ll learn how to control spacing, borders, and element positioning for polished designs.

Until then — happy styling!