Getting Started with CSS: Selectors, Properties & Syntax

It’s finally time. You’ve built your HTML house with clean structure and accessible markup. But right now, it’s the architectural equivalent of a shipping container: functional, but… not exactly easy on the eyes. Now we bring in CSS—the paint, the furniture, the vibe. And yes, we’re going to ease in gently. If you’ve ever opened a blank .css file and immediately needed a snack break, I get it. But CSS doesn’t have to be scary or chaotic. Let’s break it down the way it actually makes sense.

CSS: Not Just for Making Text Colorful

CSS (Cascading Style Sheets) is how we style HTML—colors, spacing, fonts, layout, you name it. But the key word in the name is cascading. That means the browser figures out which styles to apply based on multiple factors: specificity, source order, inheritance, and sometimes just vibes (okay, not vibes, but it feels like it).

A basic CSS rule looks like this:

css

          h1 {
  color: darkblue;
  font-size: 2rem;
}

This is a rule set, and it's made up of:

A selector (h1)
A pair of curly braces
Inside: one or more property-value pairs (color: darkblue;)

Each rule ends in a semicolon, and yes, that semicolon is required unless you're itching for bugs.

You don’t need to memorize all the CSS properties (nobody does). You just need to understand the pattern, and then you can look up whatever you need.

Pro tip from experience: when you're starting out, focus on learning how to think in CSS, not just remembering what to write.

Selectors: Getting Exactly What You Want

In CSS, selectors are how you tell the browser, “Hey, I want this thing to look different.” Think of them as targets.

Let’s say you have this HTML:

html

          <p class="intro-text">Welcome to my website!</p>

You can target that <p> with:

css

          .intro-text {
  font-style: italic;
}

Here are the selectors you’ll use 99% of the time:

element → targets all elements of that type (p, h1, ul, etc.)
.className → targets any element with a class
#idName → targets one element with a specific ID (don’t overuse)
element.className → targets a specific kind of element with a class

Some examples:

css

          ul {
  list-style: none;
}

.project-title {
  font-weight: bold;
}

#about {
  padding: 2rem;
}

You can also get fancier later with combinators (>, +, etc.), pseudo-classes (:hover, :focus), and even attribute selectors. But for now, let’s keep our sanity.

Organizing Your CSS: Where to Put Styles (Hint: Not All Inline!)

There are three places CSS can live:

1. Inline styles (bad vibes, avoid unless debugging):

html

          <h1 style="color: red;">Hello</h1>

2. Internal stylesheets (okay for small demos):

html

          <style>
   p { color: darkslategray; }
</style>

3. External stylesheets (the way to go):

html

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

For this course project, let’s create a styles folder and put all CSS into main.css. Here’s how to hook it up in your HTML:

html

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

Then create the styles/main.css file, and boom, you’re ready to style like a grown-up.

Course Project: Hook Up That Stylesheet

Let’s connect our CSS to the project:

File structure update:

bash

          /my-html-site
├── styles/
│   └── main.css

Update all your HTML files (example for `index.html`):

html

          <head>
  <meta charset="UTF-8" />
  <title>Home | My HTML Site</title>
  <link rel="stylesheet" href="styles/main.css" />
</head>

In main.css, try adding a global reset and a starter font:

css

          /* Reset some defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  padding: 2rem;
  background-color: #fdfdfd;
}

Already better.

What’s Next?

We’ve just scratched the surface. Now that you know how to write CSS and where to put it, it’s time to make your site actually look good. Up next: Colors, Fonts & Layout Basics. We’ll dive into how to pick colors that don’t blind people, choose fonts that aren’t Comic Sans, and layout your site without turning it into a nightmare on mobile.