TechTicket Logo
CSS Fundamentals and Modern Layouts

Session 1 — Introduction to CSS and How Styling Works

🎯 Session Overview

Welcome to the world of CSS! In the HTML course, you learned how to build the skeleton of a website. Now, it's time to make it look awesome.

In this session, you will learn:

🎨 What is CSS?

CSS stands for Cascading Style Sheets.

Imagine building a house. HTML is the bricks, the wooden frame, and the pipes. It gives the house its structure. But a house made only of bricks is boring!

CSS is the paint, the carpets, the beautiful windows, and the decorations. It tells the web browser exactly how the HTML elements should look—their colors, sizes, fonts, and positions.

HTML (Structure) vs CSS (Design)

<button> Click Me </button> + Click Me Just HTML HTML + CSS

By keeping HTML and CSS separate, you can completely change the look of a website without ever touching the HTML structure!

⚙️ CSS Syntax: How to write it

Writing CSS is like giving instructions to the browser. You have to tell the browser WHAT you want to style, and HOW you want to style it.

A CSS rule has three main parts:

  1. Selector: The HTML element you want to target (e.g., h1, p, button).
  2. Property: What you want to change (e.g., color, font-size).
  3. Value: The new setting for that property (e.g., blue, 24px).
h1 { color : blue ; } Selector Property Value

Important: Always put a colon : after the property, and a semicolon ; after the value!

🔗 3 Ways to Add CSS

How do we connect our CSS to our HTML? There are three ways, but one is much better than the others.

1. Inline CSS (Avoid this)

You write the CSS directly inside the HTML tag using the style attribute. It makes your HTML very messy.

<h1 style="color: blue; font-size: 40px;">Hello World!</h1>

2. Internal CSS (Okay for small projects)

You put all your CSS inside a <style> tag inside the <head> of your HTML file.

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

3. External CSS (The Best Way! 🌟)

You create a completely separate file (like style.css) and link it to your HTML file using the <link> tag in the <head>. This keeps your HTML super clean!

<!-- Inside index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

🎯 CSS Selectors: Targeting Elements

If you have 10 paragraphs on your website, but you only want to turn one of them red, how do you do it? You use different types of Selectors!

1. Element Selector

Targets ALL elements of that type on the whole page.

/* Turns EVERY paragraph green */
p { color: green; }

2. Class Selector (Uses a dot .)

Targets only elements that have a specific class attribute. You can use the same class on multiple different elements.

<!-- In HTML -->
<p class="warning">Watch out!</p>

/* In CSS (Notice the dot!) */
.warning { color: red; }

3. ID Selector (Uses a hashtag #)

Targets ONE unique element. An ID can only be used once per page (like a fingerprint).

<!-- In HTML -->
<h1 id="main-title">My Cool Site</h1>

/* In CSS (Notice the hashtag!) */
#main-title { font-size: 50px; }

🌊 The "Cascade" in CSS

Why is it called Cascading Style Sheets? Because CSS rules fall down like a waterfall.

If you give the browser two conflicting rules, it has to decide which one wins. The general rule is: The rule written last wins!

h1 { color: blue; }
h1 { color: red; } /* This rule is written last, so the h1 will be RED! */

Also, Classes beat Elements, and IDs beat Classes because they are more specific!

✨ Interactive Demo: See CSS in Action!

Click the buttons below to add CSS classes to the boring HTML box and watch it transform instantly.

I am just an HTML div!

This is exactly how JavaScript interacts with CSS on real websites!

🏋️‍♂️ Practice Exercises

Open your code editor (like VS Code), create an index.html and a style.css file, and try these!

Exercise 1: Link it up

Inside your HTML <head>, write the exact line of code needed to link your style.css file.

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

Exercise 2: Basic Styling

In your CSS file, select all h1 elements and change their text color to purple.

h1 { color: purple; }

Exercise 3: The Classy Button

In your HTML, create a button with a class: <button class="my-btn">Click Me</button>. Then, in your CSS, use the class selector to give it a background-color of cyan.

Remember to use a dot for classes!
.my-btn { background-color: cyan; }

🔥 Mini Challenge: Specificity Battle

Create a paragraph in your HTML that looks like this:
<p id="special" class="highlight">Who will win?</p>

In your CSS file, write three rules:

  1. Target the p element and make it green.
  2. Target the .highlight class and make it yellow.
  3. Target the #special ID and make it red.

Load the page. What color is the text? Why did that color win?

The text will be RED! Even though you wrote three rules, the ID selector (#special) is the most powerful and specific selector. It crushes the class and the element selectors in the Cascade!

🏠 Homework Project

Create a "My Favorite Things" webpage.

  1. Create an index.html and style.css. Link them.
  2. In HTML, add an h1 title, and three paragraphs.
  3. Give the first paragraph a class of food, the second a class of game, and the third an ID of secret.
  4. In your CSS, give every class and ID a different color and font-size.

Bring your customized page to the next session!

📝 Session Summary

Course Home Next Session