Skip to main content

Making the Web Beautiful

If HTML is the skeleton of your house, CSS (Cascading Style Sheets) is the paint on the walls, the furniture, and the decorations. Without CSS, the web would be a very boring, black-and-white research paper!

CSS tells the browser how to make things look: "Make this text huge," "Make that button glow," or "Move this image to the right."

How CSS Works: The Rulebook​

To style something, you need to follow a specific "Recipe" called a Rule.

The Anatomy of a CSS Rule:​

  1. Selector: The HTML element you want to style (e.g., h1).
  2. Property: What you want to change (e.g., color).
  3. Value: How you want to change it (e.g., blue).
/* This is a CSS Rule */
h1 {
  color: blue;
  font-size: 30px;
}

Try it on CodePen!​

Below is a live example. Notice how the HTML defines what the content is, but the CSS defines how it looks. Experiment by changing the background-color in the CSS tab!

3 Ways to Add CSS​

How do you actually connect your CSS "Paint" to your HTML "Walls"? There are three ways, but professionals almost always use Number 3.

1. Inline CSS (The "Quick Fix")​

Writing styles directly inside the HTML tag.

  • Best for: Quick tests. Worst for: Maintenance.
<h1 style="color: red;">Hello World</h1>

2. Internal CSS (The "One Page" Method)​

Writing styles inside a <style> tag in your <head>.

<head>
  <style>
    p { color: green; }
  </style>
</head>

3. External CSS (The "Pro" Way)​

Creating a separate file (e.g., style.css) and linking it to your HTML. This is the gold standard for CodeHarborHub projects!

In your HTML <head>:

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

The "Cascade" Secret​

Why is it called Cascading Style Sheets?

Imagine a waterfall. If you tell the <body> tag to have blue text, that "blue" flows down into every paragraph and list on your page. However, if you specifically tell a paragraph to be red, that specific instruction "wins" for that element.

Your First Styling Challenge​

  1. Open your portfolio.html from the previous HTML lesson.
  2. Create a new file in the same folder called style.css.
  3. Paste the following code into style.css:
style.css
body {
  background-color: #f0f8ff; /* Light blue background */
  font-family: 'Segoe UI', sans-serif;
}

h1 {
  color: #2c3e50;
  text-align: center;
}

p {
  color: #34495e;
  line-height: 1.6;
}

Beginner Mistake

Don't forget the semicolon ; at the end of every CSS line! If you miss one, the browser gets confused and stops styling everything below it.

Summary Checklist​

  • I understand that CSS handles the visuals and Wardrobe of the site.
  • I know the difference between a Selector, Property, and Value.
  • I have successfully linked an external .css file using the <link> tag.
  • I practiced a "Transformation" using the CodePen embed.
Last updated on by Ajay Dhangar