CSS Introduction

What is CSS

CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of web pages.

While HTML is used to structure content (like headings, paragraphs, images), CSS is used to style that content - such as adding colors, fonts, spacing, and positioning.

With CSS, you can:

Change text colors and fonts
Add background colors or images
Control layout and spacing
Make responsive designs for different devices

👉 In simple terms:
HTML = Structure
CSS = Design / Styling

CSS Syntax

css

selector {
    property: value;
}

Attributes

Property	Description	Example
color	Sets the text color	color: red;
background	Sets background color/image	background: yellow;
font-size	Sets text size	font-size: 18px;
margin	Controls outer spacing	margin: 10px;
padding	Controls inner spacing	padding: 10px;

CSS Example

html

<!DOCTYPE html>
<html>
<head>
    <title>What is CSS Example</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
        }
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This is a paragraph styled using CSS.</p>
</body>
</html>

Output

Browser Output

css

The page will have a light gray background
The heading will appear in blue color
The paragraph text will appear in green with larger font size

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

CSS stands for Cascading Style Sheets It allows separation of content (HTML) and design (CSS) CSS can be applied in three ways:
Inline CSS
Internal CSS
External CSS
External CSS is the most recommended method for large projects

Conclusion

CSS is an essential part of modern web development that transforms simple HTML pages into visually appealing and user-friendly websites. By mastering CSS, you gain full control over how your web content looks and behaves across different devices.

NextCSS Syntax