CSS Tutorial

How CSS Works

CSS, or Cascading Style Sheets, is like a magic wand that you use to make your web pages beautiful and organized. This is the device that controls everything on your webpage -the text, pictures, buttons, and more. Think of it as a stylist that determines the colors, fonts, and layouts of the “outfit” of your website. Let’s break it down in an easy, friendly way.

1. CSS Specifies How Your Page Should look.

Imagine that your webpage is just a plain document with words and pictures, such as some sketch. This is the one that performs HTML (hypertext markup language) – it creates structure, such as paragraphs, headings or images. But without CSS, it looks boring, like a black and white drawing.

2. CSS steps to add style:

Want a bright blue background? CSS can do this.
Need your titles in bold, red, Italic text? CSS has covered you.
Want buttons to look smooth and modern? CSS is like this.

It prefers to give a makeover to your webpage, the system of color, size and everything.

3. CSS Uses Rules to Style Things

CSS works with the aid of growing policies that tell the browser the way to display one of a kind elements of your website. Each rule is like a little preparation that asserts, “Hey, make this part appear like this.”

A CSS rule has the foremost elements:

Selector: These choices a part of the website you need to style. For instance, h1 selects all degree-one headings, or .Button selects anything with the class “button.”
Declaration: This says what style to apply. For example, color: blue; makes the text blue, or background-color: yellow; sets a yellow background.

				
					h1 {
    color: blue;
    font-size: 36px;
}

<!--This rule says, “Make all <h1> headings blue and set their font size to 36 pixels.”-->

4. How CSS is connected to HTML

CSS needs to know which parts of your web page you are going to style, and it does this by linking to your HTML. There are three main ways to add CSS to your web page:

Inline CSS: You add styles directly to an HTML tag using the style attribute.

For example:

<p style=”color: green;”>This text is green!</p>

This is fast, but messy for big projects.

Internal CSS: You put CSS in a <style> code in the <Head> section of your HTML file.

For example:

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

This is good for small pages.

External CSS: You write CSS in a separate file (as styles.css) and connect it to the HTML a <link> tag:

				
					<head>
    <link rel="stylesheet" href="styles.css">
</head>

This is the best approach for larger websites, as it keeps things organized.

CSS Demo - One Page, Multiple Styles

CSS Demo - Multiple Styles

This page demonstrates how CSS can change the look and feel of a webpage. Click the buttons below to switch styles!

Try It Yourself

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Style 4 - Gradient Modern</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
            text-align: center;
            padding: 50px;
            height: 100vh;
            margin: 0;
        }
        h1 {
            font-size: 42px;
            color: #fff;
            text-transform: uppercase;
        }
        p {
            font-size: 20px;
            line-height: 1.6;
        }
        .back-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #fff;
            color: #764ba2;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Style 4 - Gradient Modern</h1>
    <p>A trendy design with a smooth gradient background and clean typography.</p>
 
</body>
</html>

How to Create a...

The Ultimate Travel Companion:...

How CSS Works

CSS Tutorial

How CSS Works

1. CSS Specifies How Your Page Should look.

2. CSS steps to add style:

3. CSS Uses Rules to Style Things

4. How CSS is connected to HTML

CSS Demo - Multiple Styles

Try It Yourself

Share with friends

Leave a comment Cancel reply

How to Create a Clone Website (Fake Website)

The Ultimate Travel Companion: Top 5 Must-Have Apps

CSS Tutorial

How CSS Works

1. CSS Specifies How Your Page Should look.

2. CSS steps to add style:

3. CSS Uses Rules to Style Things

4. How CSS is connected to HTML

CSS Demo - Multiple Styles

Try It Yourself

Share with friends

Leave a comment Cancel reply