CSS Lesson 2 – CSS Syntax | Dataplexa

CSS Module

CSS Syntax

Master the building blocks of CSS by understanding selectors, properties, values, and how to write clean, effective stylesheets.

CSS has its own language — just like HTML has tags and attributes, CSS has its own way of telling the browser how to style your webpage. Think of CSS like giving instructions to an artist: you need to tell them what to paint (the selector), what aspect to change (the property), and exactly how to change it (the value). The WanderLust team needs to understand CSS syntax before they can start styling their travel website. Every CSS rule follows the same pattern, and once you learn this pattern, you can style anything on the web.

The CSS Rule Structure

Every piece of CSS follows the same basic pattern. Here's how it works:

    selector
    {
    property
    :
    value
    ;
    }
  

What to style

What aspect to change

How to change it

The selector tells CSS which HTML elements you want to style. The property is what visual aspect you want to change — like color, size, or spacing. The value is exactly how you want to change it.

Think of it like giving directions: "Take all the headings (selector), change their color (property) to blue (value)." The curly braces {} wrap around your styling instructions, and the semicolon ; ends each instruction.

Your First CSS Rule

The WanderLust team wants their main heading to be blue. Here's how you write that in CSS:

/* Make the main heading blue for WanderLust */
h1 {
  color: #0ea5e9;
}

What just happened?

The h1 selector found all heading elements and changed their color property to sky blue. The #0ea5e9 is a hex color code — think of it as a precise way to describe any color. Try changing it to red or #f97316 for orange!

Breaking Down the Syntax

Every part of that CSS rule has a purpose:

The selector — targets all <h1> elements on the page

color

The property — what visual aspect you want to change

#0ea5e9

The value — exactly what color to use

{ } ;

The punctuation — wraps the rule and ends each declaration

Multiple Properties in One Rule

You can change multiple things about an element in the same CSS rule. The WanderLust team wants their heading to be blue AND bigger:

/* Style the WanderLust heading with multiple properties */
h1 {
  color: #0ea5e9;
  font-size: 36px;
  font-weight: bold;
}

What just happened?

We applied three different properties to the same element: color made it blue, font-size made it bigger, and font-weight made it bold. Each property ends with a semicolon — think of it like ending a sentence with a period.

Notice how each property gets its own line and ends with a semicolon. This makes your CSS easy to read and modify. You can add as many properties as you want inside those curly braces.

Different Types of Selectors

CSS gives you several ways to select elements. Here are the three most important ones:

Element Selectors

Element selectors target HTML tags directly — like h1, p, or div. They style every element of that type on your page.

/* Style all paragraphs on the WanderLust site */
p {
  color: #475569;
  line-height: 1.6;
}

Class Selectors

Class selectors target elements with a specific class attribute. You write them with a dot . followed by the class name. These are perfect for styling specific sections or components.

<!-- HTML with a class -->
<p class="highlight">This paragraph is special</p>

<style>
/* Style elements with class="highlight" */
.highlight {
  background-color: #fef3c7;
  padding: 16px;
  border-radius: 8px;
}
</style>

ID Selectors

ID selectors target one specific element with a unique ID attribute. You write them with a hash # followed by the ID name. Use these for unique elements that appear only once.

<!-- HTML with an ID -->
<header id="main-header">WanderLust Travel</header>

<style>
/* Style the element with id="main-header" */
#main-header {
  background-color: #0ea5e9;
  color: white;
  padding: 24px;
  text-align: center;
}
</style>

CSS Comments and Organization

Comments in CSS help you remember what your code does and organize your stylesheet. They start with /* and end with */. The browser ignores comments — they're just notes for you and other developers.

/* === WanderLust Travel Website Styles === */

/* Header styling */
#main-header {
  background-color: #0ea5e9; /* WanderLust brand blue */
  color: white;
  padding: 24px;
}

/* Typography */
h1 {
  font-size: 36px;
  font-weight: bold;
}

/* Call-to-action buttons */
.cta-button {
  background-color: #f97316; /* Sunset orange */
  color: white;
  padding: 12px 24px;
}

Pro Tip

Good comments make your CSS much easier to maintain. Describe why you're doing something, not just what you're doing. Future you will thank you!

Common CSS Syntax Mistakes

Everyone makes these mistakes when learning CSS. Here are the most common ones and how to avoid them:

Missing Semicolons

/* Wrong - missing semicolon */
h1 {
  color: blue
  font-size: 24px;
}

/* Right - semicolon after each property */
h1 {
  color: blue;
  font-size: 24px;
}

Missing Curly Braces

/* Wrong - missing closing brace */
h1 {
  color: blue;

/* Right - properly closed */
h1 {
  color: blue;
}

Wrong Selector Symbols

/* Wrong - missing dot for class */
highlight {
  background-color: yellow;
}

/* Right - dot before class name */
.highlight {
  background-color: yellow;
}

Your browser's developer tools will help you spot these mistakes. If your CSS isn't working, check for missing semicolons, braces, or selector symbols first.

CSS Values and Units

CSS values come in different types depending on what property you're using. Here are the most common ones:

Colors

red, #0ea5e9, rgb(14, 165, 233)

Sizes

16px, 2em, 100%, 50vh

Keywords

bold, center, none, auto

Numbers

1.5, 0, -10px

The WanderLust team can use different value types depending on what they're styling:

/* Different value types for WanderLust */
.destination-card {
  color: #0ea5e9;        /* Hex color */
  font-size: 18px;       /* Pixel size */
  line-height: 1.6;      /* Number (multiplier) */
  text-align: center;    /* Keyword */
  width: 100%;           /* Percentage */
}

What just happened?

Each property accepted a different type of value: color used a hex code, font-size used pixels, line-height used a multiplier number, and text-align used a keyword. CSS is smart about understanding what type of value each property expects.

Now you understand CSS syntax — the foundation for everything you'll do with CSS. You know how to write rules, target elements with selectors, and use different types of values. The WanderLust team can start styling their website with confidence!

Quiz

Up Next: Ways to Add CSS

Learn the three different methods for adding CSS to your HTML and discover which approach works best for different situations.

← Previous Course Index Next →