Lesson 2: Styling with CSS

What You'll Learn Today

If HTML is the skeleton, CSS (Cascading Style Sheets) is the clothes! Today you'll learn to add style and color to your web pages, transforming them from plain documents into vibrant designs.

Why Learn CSS?

CSS is what makes the web beautiful. It allows you to control the look and feel of every element on your page. Mastering CSS is key to creating professional, unique, and engaging websites that people will love to visit.

Learning Objectives

Understand what CSS is and how it makes websites look good.
Learn basic CSS syntax, including selectors, properties, and values.
Connect CSS to your HTML using the <style> tag.

Understanding CSS Syntax

CSS rules have three main parts: the Selector (what to style), the Property (how to style it), and the Value (the style to apply).

Selector e.g., h1, p, body

This is the HTML element you want to change. The rule you write will apply to all elements of that type on the page.

Property e.g., color, font-size

This is the specific visual aspect you want to modify, like the text color or the background color.

Value e.g., blue, 24px

This is the setting you want to apply. For example, if the property is color, the value could be purple.

Your Mission: Style Your Page!

Time to be an artist! In the editor on the right, you'll find the HTML code from our last lesson. Your mission is to add CSS rules inside the <style> tags to make the page look amazing. Follow these steps:

Pro Tip

The preview on the right will update automatically as you type your CSS. Don't be afraid to experiment with different colors and properties!

Step 1: Style the Container
Find the .container selector in the editor. This targets the div with class="container". Add these properties to create a beautiful light blue box:
• background: lightblue;
• padding: 20px;
• border-radius: 10px;
• text-align: center;
Step 2: Style the Main Title
Find the h1 selector. This targets the main heading. Add these properties to make it purple and use Arial font:
• color: purple;
• font-family: Arial;
Step 3: Style the Paragraphs
Find the p selector. This targets all the paragraph text. Add these properties to make it dark blue and larger:
• color: darkblue;
• font-size: 18px;
Step 4: Style the Button
Add a new button selector with these properties for a beautiful purple button:
• background: purple;
• color: white;
• padding: 10px 20px;
• border: none;
• border-radius: 5px;
• cursor: pointer;
• transition: all 0.3s ease;
Step 5: Add a Hover Effect
Add a button:hover selector with these properties for an interactive hover effect:
• background: darkpurple;
• transform: scale(1.05);
This will make the button darker and slightly larger when you hover over it!
Step 6: Style the Info Text
The .info selector is already partially completed. Make sure it has these properties for the small gray text:
• margin-top: 15px;
• font-size: 14px;
• color: #777;

Take It Home

Continue to style your "About Me" page. Try to use your favorite colors and fonts. In our next lesson, we'll learn how to use Bootstrap, a popular CSS framework, to make our pages look even more professional with less effort.