Lesson 3 of 6

Intro to CSS

Estimated time: 2–2.5 hours

What You Will Learn

What CSS is and why every web page needs it
Three different ways to add CSS to your HTML
How CSS syntax works — selectors, properties, and values
Essential styling properties like color, font-size, margin, and padding
How to use named colors, hex codes, and rgb() to set colors
How to style a complete bio page with CSS

What is CSS?

Welcome back! In Lessons 1 and 2, you learned how to build web pages with HTML — adding headings, paragraphs, links, images, and lists. But if you have been looking at your pages so far, you might have noticed they look pretty plain. Black text on a white background, default fonts, everything shoved to the left side of the screen. That is about to change.

CSS stands for Cascading Style Sheets. If that sounds fancy, do not worry — let us break it down:

Cascading means styles can layer on top of each other, with later rules overriding earlier ones (more on this in future lessons).
Style means it controls how things look — colors, fonts, spacing, layout, and more.
Sheets simply refers to the files or blocks of code where you write your styles.

Here is the analogy that makes it click for most beginners: if HTML is the skeleton of your web page — the bones, the structure, the framework — then CSS is the skin, hair, and clothing. It is everything that makes the page look the way it does. HTML says "there is a heading here." CSS says "that heading should be dark blue, 32 pixels tall, centered on the page, and have some space below it."

Without CSS, every website on the internet would look like a plain text document from the 1990s. CSS is what transforms raw structure into something beautiful, readable, and professional. Every polished website you have ever visited — from the Michigan State University homepage to your favorite Lansing coffee shop's site — uses CSS to look the way it does.

Tip You do not need to be an artist or a designer to use CSS. Most of what you will learn is practical and straightforward: making text readable, spacing things out nicely, and choosing good colors. You will build your eye for design naturally over time.

How CSS Connects to HTML

CSS does not work on its own — it needs HTML to style. There are three ways to connect CSS to your HTML, and each has its own use case. Let us walk through all three.

1. Inline Styles (the `style` Attribute)

You can add CSS directly to any HTML element using the style attribute. The styles go right inside the opening tag:

<h1 style="color: red; font-size: 36px;">I am a red heading!</h1>
<p style="color: green;">And I am a green paragraph.</p>

Pros: Quick and easy for testing a single change. You see exactly which element is affected.

Cons: It gets messy fast. If you have 20 paragraphs and you want them all green, you would need to add style="color: green;" to every single one. That is a lot of repetitive typing, and if you ever want to change the color, you would have to update all 20 places. Not fun!

2. Internal Styles (a `<style>` Tag in the Head)

A better approach is to put your CSS inside a <style> tag in the <head> section of your HTML document. This lets you write rules that apply to every matching element on the page at once:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Internal Styles</title>
  <style>
    h1 {
      color: darkblue;
      font-size: 32px;
    }
    p {
      color: gray;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This paragraph is styled from the head.</p>
  <p>So is this one — both are gray automatically!</p>
</body>
</html>

Pros: Much cleaner than inline styles. You write a rule once and it applies everywhere. Great for single-page projects and for learning.

Cons: The styles only apply to that one HTML file. If your website has 10 pages and you want them all to look the same, you would need to copy the same <style> block into every page.

3. External Stylesheet (a Separate `.css` File)

The most professional approach is to write your CSS in a completely separate file (like styles.css) and link to it from your HTML using a <link> tag:

<!-- In your HTML file -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* In your styles.css file */
h1 {
  color: darkblue;
  font-size: 32px;
}
p {
  color: gray;
  font-size: 18px;
}

Pros: This is the industry standard. One CSS file can style your entire website — all 10, 100, or 1,000 pages. Change a color in one place and it updates everywhere. Your HTML stays clean and focused on content.

Cons: Requires managing a separate file, which adds a tiny bit of complexity when you are just getting started.

Note For the exercises in this lesson, we will use internal styles (the <style> tag) because it lets us keep everything in one file for easy practice. As you build real projects, you will transition to external stylesheets.

CSS Syntax

Every CSS rule follows the same predictable pattern. Once you learn this pattern, you can write any style you want. Here is the structure:

selector {
  property: value;
}

Let us break down each part:

Selector — This tells the browser which HTML element(s) you want to style. For example, h1 targets all <h1> headings, and p targets all paragraphs.
Property — This is what you want to change about the element. For example, color changes the text color, and font-size changes how big the text is.
Value — This is the specific setting you want to apply. For example, blue for the color, or 24px for the font size.

Notice the punctuation: curly braces { } wrap around all the styles for a selector, a colon : separates the property from the value, and a semicolon ; ends each declaration. These little details matter — if you forget a semicolon or a closing brace, your styles might not work.

Here is a real example that puts it all together:

<style>
  h1 {
    color: tomato;
    font-size: 36px;
    text-align: center;
  }
</style>
<h1>Styled with CSS!</h1>

In this example, the selector is h1. Inside the curly braces, we have three declarations: the text color is set to tomato (a warm reddish-orange), the font size is 36 pixels, and the text is centered on the page. Try changing the values above and clicking Run to see what happens!

Tip You can include as many property-value pairs as you want inside a single rule. Just make sure each one ends with a semicolon. Think of the semicolon as the period at the end of a sentence — it tells the browser, "I am done with this instruction, move on to the next one."

Basic CSS Properties

Now that you understand the syntax, let us explore some of the most useful CSS properties. These are the ones you will use on almost every page you build.

`color` — Text Color

The color property changes the color of text inside an element. Despite the generic name, it only affects text color, not the background.

Try It Yourself

Change the color value below to different color names like purple, teal, orangered, or navy. Click Run after each change to see the result.

<style>
  p { color: crimson; }
</style>
<p>This text is styled with the color property.</p>

`background-color` — Background Color

The background-color property changes the background behind an element. You can apply it to any element — headings, paragraphs, even the entire body.

Try It Yourself

Try changing the background color to lightyellow, lavender, or mintcream. You can also change the text color to make sure it is still readable against the background.

<style>
  p {
    background-color: lightblue;
    color: darkblue;
    padding: 12px;
  }
</style>
<p>This paragraph has a light blue background!</p>

`font-size` — Text Size

The font-size property controls how big or small text appears. The most common unit for beginners is px (pixels). A typical paragraph on the web uses a font size between 16px and 20px.

Try It Yourself

Try changing the font-size value to 12px, 24px, 48px, or even 72px to see how it scales.

<style>
  p { font-size: 28px; }
</style>
<p>How big am I?</p>

`font-family` — Font Style

The font-family property lets you change the actual typeface of your text. You can specify multiple fonts separated by commas — the browser will use the first one it can find, and fall back to the next if that font is not available.

Try It Yourself

Try replacing the font-family value with "Times New Roman", serif or "Courier New", monospace to see different font styles.

<style>
  p {
    font-family: Georgia, serif;
    font-size: 20px;
  }
</style>
<p>This text is displayed in the Georgia font.</p>

`text-align` — Text Alignment

The text-align property controls whether text sits on the left, in the center, or on the right side of its container. The most common values are left, center, and right.

Try It Yourself

Change the text-align value to left, center, or right to move the text around.

<style>
  h1 { text-align: center; }
  p { text-align: right; }
</style>
<h1>Centered Heading</h1>
<p>This paragraph is right-aligned.</p>

`padding` and `margin` — Spacing

These two properties control the space around elements, but they work differently:

padding is the space inside the element, between the content and the element's border. Think of it like the cushioning inside a picture frame.
margin is the space outside the element, between the element and its neighbors. Think of it like the gap between two picture frames hanging on a wall.

Try It Yourself

Experiment with different padding and margin values. Try 0px, 20px, 40px, or 60px. Watch how the spacing changes inside and outside the boxes.

<style>
  .box-one {
    background-color: lightcoral;
    color: white;
    padding: 20px;
    margin: 10px;
  }
  .box-two {
    background-color: steelblue;
    color: white;
    padding: 40px;
    margin: 10px;
  }
</style>
<div class="box-one">Box One: 20px padding</div>
<div class="box-two">Box Two: 40px padding</div>

Tip Remembering the difference between padding and margin trips up a lot of beginners. Here is a simple trick: padding is like wearing a puffy jacket — it makes you bigger. Margin is like standing farther away from other people — it adds space between you and everything else.

Colors in CSS

CSS gives you several ways to describe colors. Let us look at the three most common methods.

1. Named Colors

CSS recognizes about 140 named colors that you can use by simply typing their name. You have already seen a few like red, blue, and tomato. Some other fun ones include coral, slategray, mediumseagreen, gold, and rebeccapurple.

2. Hex Codes

Hex codes give you much more precise control over color. They start with a # followed by six characters (digits 0-9 and letters a-f). The six characters represent the amounts of red, green, and blue mixed together:

#ff0000 — Full red, no green, no blue = red
#00ff00 — No red, full green, no blue = green
#0000ff — No red, no green, full blue = blue
#000000 — No red, no green, no blue = black
#ffffff — Full red, full green, full blue = white

3. rgb() Function

The rgb() function works the same way as hex codes but uses regular numbers from 0 to 255 for each color channel. For example, rgb(255, 0, 0) is red, rgb(0, 128, 0) is a medium green, and rgb(70, 130, 180) is steel blue.

Try It Yourself

Play with the colors below! Try changing the hex code, using a named color, or switching to an rgb() value. Some ideas to try: #e74c3c, rgb(46, 204, 113), darkorchid, #3498db.

<style>
  .named {
    color: tomato;
    font-size: 22px;
    font-weight: bold;
  }
  .hex {
    color: #2ecc71;
    font-size: 22px;
    font-weight: bold;
  }
  .rgb {
    color: rgb(52, 152, 219);
    font-size: 22px;
    font-weight: bold;
  }
</style>
<p class="named">Named color: tomato</p>
<p class="hex">Hex code: #2ecc71</p>
<p class="rgb">RGB: rgb(52, 152, 219)</p>

Note You do not need to memorize hex codes or RGB values. Professional developers use color-picker tools all the time. The important thing is that you understand the three formats so you can recognize them and use them when you see them in tutorials or documentation.

Interactive Exercise: Style a Bio Page

Time to put everything together! Remember the bio page structure from Lesson 2? We are going to take that plain HTML and transform it with CSS. This is where things get really satisfying — you will see a plain, boring page come to life right before your eyes.

The editor below has a complete bio page with an internal stylesheet already started. Here is your challenge:

Read through the CSS that is already there to understand what it does.
Try changing the background-color of the body to a different color.
Change the heading color from #2c3e50 to something more vibrant, like tomato or #e74c3c.
Adjust the font-size on the paragraph to make it bigger or smaller.
Try adding text-align: center; to the h1 rule.
Experiment! Change anything you like and click Run to see the result.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Bio Page</title>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
      padding: 30px;
      margin: 0;
    }
    h1 {
      color: #2c3e50;
      font-size: 36px;
    }
    h2 {
      color: #16825d;
      font-size: 24px;
    }
    p {
      color: #333333;
      font-size: 18px;
      line-height: 1.6;
    }
    ul {
      color: #555555;
      font-size: 17px;
    }
    a {
      color: #2980b9;
    }
    .bio-header {
      background-color: #2c3e50;
      color: white;
      padding: 20px;
      text-align: center;
      margin: -30px -30px 20px -30px;
    }
    .bio-header h1 {
      color: white;
      margin: 0;
    }
    .bio-section {
      background-color: white;
      padding: 20px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div class="bio-header">
    <h1>Jane Doe</h1>
    <p>Web Developer in Training — Lansing, MI</p>
  </div>

  <div class="bio-section">
    <h2>About Me</h2>
    <p>Hi there! I am learning to code at Coders Farm. I am excited about building websites and creating things that people can use on the internet.</p>
  </div>

  <div class="bio-section">
    <h2>My Hobbies</h2>
    <ul>
      <li>Reading about technology</li>
      <li>Exploring the River Trail</li>
      <li>Visiting the Lansing City Market</li>
      <li>Learning to code!</li>
    </ul>
  </div>

  <div class="bio-section">
    <h2>Contact</h2>
    <p>Find me on <a href="https://github.com">GitHub</a>.</p>
  </div>
</body>
</html>

Tip Do not be afraid to break things! If your changes make something look weird, that is actually great — it means you are learning what each property does. You can always undo your changes or reload the page to start over. The best way to learn CSS is to experiment freely.

Knowledge Check

Let us test what you have learned so far. These questions are just for practice — take your time and try as many times as you like.

1. What does CSS stand for?

Computer Style Sheets Cascading Style Sheets Creative Styling System Coded Style Syntax

Correct! CSS stands for Cascading Style Sheets. "Cascading" refers to how styles layer and override each other, "Style" means it controls visual appearance, and "Sheets" refers to the files where styles are written.

2. Which CSS property would you use to change the background color of an element?

color bg-color background-color fill-color

That is right! The background-color property sets the background color of an element. Be careful not to confuse it with color, which only changes the text color.

3. What is the correct CSS syntax for making all paragraphs red?

p = color: red; p { color: red; } <p style="red"> p (color = red)

Exactly! CSS uses the pattern selector { property: value; }. The selector (p) targets the element, curly braces wrap the declarations, and each declaration uses a colon between the property and value, ending with a semicolon.

Lesson Summary

Fantastic work — you just took a huge step forward! Here is a recap of everything you learned in this lesson:

CSS (Cascading Style Sheets) controls how HTML elements look on the page — it is the skin, hair, and clothing to HTML's skeleton.
There are three ways to add CSS to HTML: inline styles (quick but messy), internal stylesheets (great for learning), and external stylesheets (the professional standard).
CSS follows a simple syntax: selector { property: value; } — pick an element, choose what to change, and set the value.
You learned essential properties: color, background-color, font-size, font-family, text-align, padding, and margin.
CSS colors can be expressed as named colors (like tomato), hex codes (like #ff6347), or rgb() values (like rgb(255, 99, 71)).
You styled a complete bio page with CSS, transforming plain HTML into something that actually looks good.

In the next lesson, we will explore CSS selectors in more depth — learning how to target specific elements on a page so you can style exactly what you want, exactly how you want it. See you there!

Finished this lesson?

← Previous: HTML Elements Next: CSS Selectors & Layout →

Intro to CSS

What You Will Learn

What is CSS?

How CSS Connects to HTML

1. Inline Styles (the style Attribute)

2. Internal Styles (a <style> Tag in the Head)

3. External Stylesheet (a Separate .css File)

CSS Syntax

Basic CSS Properties

color — Text Color

Try It Yourself

background-color — Background Color

Try It Yourself

font-size — Text Size

Try It Yourself

font-family — Font Style

Try It Yourself

text-align — Text Alignment

Try It Yourself

padding and margin — Spacing

Try It Yourself

Colors in CSS

1. Named Colors

2. Hex Codes

3. rgb() Function

Try It Yourself

Interactive Exercise: Style a Bio Page

Knowledge Check

Lesson Summary

1. Inline Styles (the `style` Attribute)

2. Internal Styles (a `<style>` Tag in the Head)

3. External Stylesheet (a Separate `.css` File)

`color` — Text Color

`background-color` — Background Color

`font-size` — Text Size

`font-family` — Font Style

`text-align` — Text Alignment

`padding` and `margin` — Spacing