What is CSS?
CSS stands for Cascading Style Sheets. It’s a language used to style HTML elements. With CSS, you can change colors, fonts, layouts, spacing, and much more to make your website visually appealing.
Why Use CSS?
- CSS makes your website look better and more professional.
- It separates content (HTML) from design, making your code easier to manage.
- You can style multiple elements at once, saving time and effort.
- It makes your website responsive, so it looks great on all devices.
How to Add CSS to Your Website?
There are three ways to use CSS:
1. Inline CSS
CSS is written directly inside an HTML tag using the style attribute.
<h1 style="color: blue; font-size: 30px;">This is Inline CSS</h1>
View Demo
3. External CSS
CSS is written in a separate file (with a .css extension) and linked to your HTML file.
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS File (styles.css):
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
h1 {
color: purple;
text-align: center;
}
View Demo
2. Internal CSS
CSS is written inside a <style> tag in the <head> section of your HTML document.
<head>
<style>
body {
background-color: #f0f8ff;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
View Demo
Basic CSS Properties
Here are some important CSS properties to get started:
1. Colors
You can change the text and background colors using CSS.
h1 {
color: red; /* Text color */
}
body {
background-color: #e0f7fa; /* Background color */
}
View Demo
2. Text Styling
CSS allows you to change the font, size, and alignment of text.
p {
font-size: 18px;
font-family: 'Georgia', serif;
text-align: justify;
}
View Demo
3. Margins and Padding
You can control the spacing around and inside elements.
div {
margin: 20px; /* Space outside the element */
padding: 10px; /* Space inside the element */
border: 1px solid #ccc;
}
View Demo
4. Borders
Add borders to elements to make them stand out.
img {
border: 2px solid black;
border-radius: 10px;
}
View Demo
Example: A Simple Styled Webpage
Here’s how you can create a basic webpage with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Page</title>
<style>
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Header */
header {
background: linear-gradient(90deg, #4caf50, #388e3c);
color: white;
text-align: center;
padding: 20px;
font-size: 1.5rem;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Main Content */
.container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
color: #4caf50;
margin-bottom: 10px;
}
p {
font-size: 18px;
text-align: justify;
margin-bottom: 15px;
}
/* Image Styling */
img {
width: 100%;
max-width: 400px;
display: block;
margin: 20px auto;
border: 3px solid #4caf50;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Footer */
footer {
text-align: center;
padding: 15px;
background: #ddd;
font-size: 1rem;
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<header>
Welcome to Advanced CSS Page
</header>
<div class="container">
<h2>About This Page</h2>
<p>
This page demonstrates advanced CSS styling techniques with a clean and modern UI. The header uses a gradient background,
the main content has a card-like layout, and images have stylish borders and shadows.
</p>
<h2>Styled Image</h2>
<img src="https://via.placeholder.com/400" alt="Sample Image">
</div>
<footer>
© 2025 Your Website | All Rights Reserved
</footer>
</body>
</html>
View Demo
This is Level 3 For Beginner I will Make level 4 Soon On CSS Standard introduction .