CSS Introduction & Syntax

CSS (Cascading Style Sheets) is the language that controls how HTML content looks - colors, spacing, fonts, layout. HTML says what something is; CSS says how it should appear.

Why CSS Is Separate From HTML

Keeping structure (HTML) and presentation (CSS) apart means you can restyle an entire site by editing one file, instead of hunting through every page's markup. It also lets browsers, screen readers, and search engines read the content on its own terms, unaffected by how it looks.

Three Ways to Add CSS

Inline styles use the style attribute directly on an element - fast for a one-off tweak, but it doesn't scale and can't be reused. An internal <style> block inside <head> keeps CSS in the same file as the HTML - fine for a single small page or a quick demo.

An external stylesheet, linked with <link rel="stylesheet" href="styles.css">, is preferred for any real project: the browser caches it once and reuses it across every page, and your HTML and CSS stay cleanly separated.

All three methods, same visual result

Input

<style>
  .internal { color: white; background: #1dbf73; padding: 8px; border-radius: 8px; }
</style>

<p style="color: white; background: #6366f1; padding: 8px; border-radius: 8px;">Inline style</p>
<p class="internal">Internal stylesheet</p>
<!-- An external file would instead be linked as:
  <link rel="stylesheet" href="styles.css" />
-->

Output

Basic Rule Syntax

A CSS rule pairs a selector (what to style) with a declaration block wrapped in curly braces: selector { property: value; }. Each declaration ends with a semicolon, and multiple selectors can share one rule by separating them with commas.

Try it yourself

Input

<style>
  h2, p {
    color: #1dbf73;
    font-family: sans-serif;
  }
</style>

<h2>Styled heading</h2>
<p>Styled paragraph, sharing the same rule.</p>

Output

CSS Comments

Comments use /* ... */ and can span multiple lines. Unlike HTML comments, there is no shorthand // or # form - always use the slash-star syntax. Comments are stripped before the browser renders anything, so they're purely for the people reading the code.

Try it yourself

Input

<style>
  /* This heading is the page's main title */
  h1 {
    color: #1dbf73; /* brand green */
  }
</style>

<h1>Commented Styles</h1>

Output

Coding Challenge

Add an internal <style> block that makes every <p> element have blue text and a comment explaining why.

Input

<style>
  <!-- add your rule here -->
</style>

<p>Style me!</p>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. What does CSS stand for?

2. Which method of adding CSS is generally preferred for real projects?

3. What is the correct syntax for a CSS rule?

4. How do you write a CSS comment?