Introduction to CSS - Making Your Pages Beautiful - Learn • Build • Collaborate

You've built the structure with HTML. Now let's make it look amazing with CSS!

What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML elements.

HTML = Structure (bones)
CSS = Presentation (skin, clothes, makeup)

What Can CSS Do?

Change colors, fonts, sizes
Control layout and spacing
Add animations and effects
Make pages responsive (adapt to different screen sizes)

CSS Syntax

CSS is made of rules that target HTML elements:

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 32px;
}

h1 = selector (what to style)
color and font-size = properties (what aspect to change)
blue and 32px = values (how to change it)

CSS Selectors

Selectors tell CSS which elements to style.

1. Element Selector

Targets all elements of a specific type:

p {
  color: gray;
}

This makes all paragraphs gray.

2. Class Selector

Targets elements with a specific class (use .):

HTML:

<p class="highlight">This is special!</p>
<p>This is normal.</p>

CSS:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Only the first paragraph gets the yellow background.

3. ID Selector

Targets a single element with a unique ID (use #):

HTML:

<div id="header">Welcome!</div>

CSS:

#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

Note: IDs should be unique per page. Use classes for reusable styles.

4. Multiple Selectors

Apply the same style to multiple elements:

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}

5. Descendant Selector

Target elements inside other elements:

nav a {
  text-decoration: none;
  color: white;
}

This styles only <a> tags that are inside <nav>.

Common CSS Properties

Colors

h1 {
  color: red;              /* Text color */
  background-color: black; /* Background color */
}

Color formats:

Named colors: red, blue, green
Hex codes: #FF0000 (red), #0000FF (blue)
RGB: rgb(255, 0, 0) (red)
RGBA: rgba(255, 0, 0, 0.5) (semi-transparent red)

Text Styling

p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}

Spacing

div {
  margin: 20px;    /* Space outside the element */
  padding: 10px;   /* Space inside the element */
}

Borders

img {
  border: 2px solid black;
  border-radius: 10px; /* Rounded corners */
}

Width and Height

img {
  width: 300px;
  height: 200px;
}

Three Ways to Add CSS

1. Inline CSS (in the HTML tag)

<p style="color: red; font-size: 20px;">This is red text.</p>

Pros: Quick for single elements
Cons: Hard to maintain, not reusable

2. Internal CSS (in the `<head>` section)

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is blue.</p>
  <p class="highlight">This is highlighted.</p>
</body>
</html>

Pros: Keeps CSS in one place for that page
Cons: Can't reuse across multiple pages

3. External CSS (separate file) — BEST PRACTICE

styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  color: #333;
  line-height: 1.6;
}

index.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This page uses external CSS.</p>
</body>
</html>

Pros: Reusable across all pages, easy to maintain
Cons: Requires an extra file

Putting It All Together

Let's style a simple page:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Styled Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  
  <main>
    <h2>Welcome!</h2>
    <p>This is a simple webpage with CSS styling.</p>
    <p class="highlight">This paragraph stands out!</p>
  </main>
  
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
  
</body>
</html>

CSS (style.css):

/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* Header styles */
header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

/* Navigation */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

nav a:hover {
  color: #ffcc00;
}

/* Main content */
main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
  color: #333;
}

p {
  line-height: 1.6;
  color: #666;
}

.highlight {
  background-color: yellow;
  padding: 10px;
  border-left: 4px solid orange;
}

/* Footer */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

Practice Exercise

Create your own styled page!

Requirements:

Create an HTML file with at least 3 sections (header, main, footer)
Create a separate CSS file
Use at least:
- 2 element selectors (e.g., body, h1)
- 1 class selector
- 1 ID selector
Style colors, fonts, and spacing
Add hover effects to links

Challenge: Make the header have a dark background with white text, and center all content in the main section.

What's Next?

You now know CSS basics! In Part 4, we'll dive deeper into the CSS Box Model — understanding how elements take up space on the page.

Keep practicing — CSS is all about experimentation! 🎨

Introduction to CSS - Making Your Pages Beautiful