CSS Tutorial

Learn to style and design beautiful web pages

🎨 Welcome to CSS!

CSS (Cascading Style Sheets) is used to style and layout web pages. With CSS, you can control colors, fonts, spacing, positioning, and much more! 


/* Simple CSS example */
h1 {
    color: blue;
    font-size: 24px;
}

CSS Tutorial Topics

📚

CSS Introduction

What is CSS and why use it

📝

CSS Syntax

Learn CSS rules and structure

🎯

CSS Selectors

Target HTML elements with selectors

🛠️

CSS How To

How to add CSS to HTML

💬

CSS Comments

Add notes to your CSS code

🌈

CSS Colors

Work with colors in CSS

🖼️

CSS Backgrounds

Style element backgrounds

🔲

CSS Borders

Add borders around elements

📏

CSS Margins

Control space outside elements

📐

CSS Padding

Control space inside elements

📊

CSS Height/Width

Set element dimensions

📦

CSS Box Model

Understand element spacing

🔍

CSS Outline

Add outlines around elements

🔹 What You'll Learn

By the end of this tutorial, you'll know how to:

  • Write CSS syntax correctly
  • Select HTML elements to style
  • Use colors, backgrounds, and borders
  • Control spacing with margins and padding
  • Understand the CSS box model
  • Create beautiful, responsive designs

🔹 Quick CSS Example

Quick CSS examples demonstrate how simple styling transforms plain HTML into visually engaging, user-friendly content. For instance, applying color: navy; and text-align: center; to a heading, paired with descriptive paragraph styling, creates immediate visual hierarchy and readability. These examples help learners and developers grasp CSS fundamentals rapidly, encouraging experimentation and skill development. Well-styled pages improve user retention, reduce bounce rates, and enhance overall site quality—all positive signals for SEO. Additionally, clean, semantic CSS contributes to faster page loads and better accessibility, further boosting search engine rankings and organic reach. 

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    color: darkgreen;
    font-size: 18px;
}
</style>
</head>
<body>
    <h1>Welcome to CSS!</h1>
    <p>This page is styled with CSS.</p>
</body>
</html>

Output:

Welcome to CSS!

This page is styled with CSS.