Let’s begin with Lecture 12 of the HTML5 & CSS3 series. Introduction to CSS – Making Your Page Beautiful. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what CSS is and why it’s important
- Know how to add CSS to your HTML page (inline, internal, external)
- Be able to change colors, fonts, and spacing
- Style your contact form from Lecture 11 to look clean and colorful!
🎨 What is CSS?
CSS stands for Cascading Style Sheets.
Think of it like this:
If HTML is the skeleton of a webpage, then CSS is the skin and clothes — it makes everything look beautiful and stylish!
With CSS, you can:
- Change text color and font
- Make buttons colorful
- Add background images
- Position elements on the screen
🔗 How to Add CSS to HTML
There are three ways to add CSS:
1. Inline CSS – Add styles directly to an element
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>2. Internal CSS – Add styles inside <style> in the <head>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
</style>3. External CSS – Link to a separate .css file
Create a file named styles.css:
h1 {
color: purple;
}Then link it in your HTML:
<link rel="stylesheet" href="styles.css">🌈 Basic CSS Syntax
selector {
property: value;
another-property: another-value;
}Example:
p {
color: red;
font-size: 18px;
}| Part | Description |
|---|---|
p | The HTML element we want to style |
color | Changes the text color |
font-size | Sets the size of the text |
💻 Try This: Style Your Contact Form
Let’s make the contact form from Lecture 11 look more colorful and neat using CSS.
Step 1: Open contact-form.html
Go back to your contact-form.html file.
Step 2: Add Internal CSS Inside <head>
Update your <head> section like this:
<head>
<title>Contact Me</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: #333;
}
label {
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 Wow! Your form now looks modern and professional.
🧪 Try It Yourself!
- Change the background color of the whole page to light blue.
- Make all headings green.
- Add a border-radius to the buttons to make them rounded.
- Increase the font size of the labels.
🚀 Next Lecture Preview:
In Lecture 13, we’ll learn how to use CSS selectors to target specific elements, like changing only <h1> or only links (<a>) — so you can control every part of your page!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
