Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Introduction

What is CSS

Written by Updated

Learn how CSS controls presentation, layout, spacing, typography, color, and responsive behavior while HTML continues to provide the document structure.

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. The supporting concepts are explained in CSS Syntax and How to Add CSS.

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

PropertyDescriptionExample
colorSets the text colorcolor: red;
backgroundSets background color/imagebackground: yellow;
font-sizeSets text sizefont-size: 18px;
marginControls outer spacingmargin: 10px;
paddingControls inner spacingpadding: 10px;

CSS is a constraint system

CSS does more than decorate individual elements. It resolves competing declarations, computes values, creates formatting contexts, and adapts the result to content, available space, device capabilities, and user preferences. Good CSS describes relationships and constraints instead of hard-coding one screenshot. The browser then performs the final layout for the actual document and environment.

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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
Core CSS styling11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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