🎨 Welcome to CSS

CSS (Cascading Style Sheets) is how you bring your HTML pages to life with color, layout, spacing, and much more. HTML gives structure, CSS gives style.

🧩 What is CSS?

CSS lets you control how elements look on your page, colors, fonts, sizes, spacing, borders, animations, the whole vibe of your site.

📦 How Do You Use CSS?

There are three main ways to write CSS:

Inline: directly on an HTML tag via the style attribute
Internal: inside a <style> tag in the <head>
External: inside a separate .css file, linked to your HTML

💡 Example (Internal CSS):


<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>

🔧 CSS Syntax

CSS is written in rules. Each rule targets an element and defines how it should look.


selector {
  property: value;
}

For example, this rule sets the text color of all paragraphs to red:


p {
  color: red;
}

🎯 Selectors

A selector tells the browser which element(s) to style.

p, all <p> elements
.my-class, elements with class="my-class"
#main, the element with id="main"

⚙️ Properties & Values

Each style rule contains a property and a value, like so:


h1 {
  color: orange;
  text-align: center;
}

This styles all <h1> elements to have orange, centered text.

🔗 External CSS

The best way to organize CSS is by keeping it in a separate file, like this:


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

Now your HTML is clean, and your CSS is reusable 💪

✅ Summary

CSS is used to style HTML elements
You can write CSS inline, internal, or external
Rules = selector + properties + values
Best practice is external CSS for clean, scalable projects

Next up: text styling and fonts, let's make your typography pop!

Lessons

Lesson 5: Intro to CSS