CSS Introduction

Beginner
⏱️ 12 min read
📚 Updated: Jul 2026
🎯 5 Examples
selectors · cascade · layout
CSS introduction tutorial for beginners on CodeToFun
Overview

What You’ll Learn

This page is a self-contained introduction to CSS (Cascading Style Sheets)—the language that makes web pages look good. You will understand what CSS is, how rules target HTML, and how to write your first styled page.

01

What is CSS

Role on the web.

02

History

Håkon Wium Lie.

03

Syntax

Selector & rules.

04

Add CSS

Inline, internal, external.

05

Why CSS

Career value.

06

Building blocks

Core concepts.

Fundamentals

🤔 What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and format HTML and XML documents. While HTML provides structure—headings, paragraphs, links, and forms—CSS controls how those elements look on screen.

CSS lets you set layout, typography, colors, spacing, borders, shadows, animations, and responsive behavior. By separating presentation from content, you can redesign an entire site by changing one stylesheet instead of editing every HTML file.

Every modern website uses CSS. From personal blogs to Netflix and GitHub, stylesheets turn plain markup into polished, accessible interfaces that work on phones, tablets, and desktops.

💡
Beginner tip

Learn basic HTML tags first (<h1>, <p>, <a>). Then add a <style> block or external .css file to change colors and fonts—you will see results immediately in the browser.

Background

👴 Who is the Father of CSS?

Håkon Wium Lie is widely considered the “father of CSS.” While working on the World Wide Web project at CERN in the early 1990s, he proposed a stylesheet language to separate document structure from visual design. His work with the W3C helped CSS become a core part of the open web platform.

Bert Bos co-authored CSS1 and has continued to shape the specification for decades. Today, CSS evolves through standards like CSS3 modules, Flexbox, Grid, and modern features such as custom properties (variables) and container queries.

MilestoneYearNotes
CSS proposed1994Håkon Wium Lie at CERN
CSS11996First W3C recommendation
CSS21998Positioning, media types
CSS2.12011Stable baseline for browsers
CSS3 modules2010s+Flexbox, Grid, animations
Modern CSS2020sCustom properties, :has(), subgrid
Concept

🎰 How CSS Works?

CSS works by providing rules that tell the browser how HTML elements should appear. Each rule has two main parts:

  • Selector — targets HTML elements, classes, IDs, or states (for example p, .btn, #header, a:hover).
  • Declarations — property–value pairs inside curly braces (for example color: blue;, font-size: 18px;).

When a page loads, the browser matches selectors to elements in the HTML, computes final styles (the cascade), and paints the result on screen. Multiple rules can apply to one element; specificity and source order decide which values win.

Getting Started

📖 Is CSS Easy to Learn?

CSS can be relatively easy to learn for beginners, especially if you already understand basic HTML. Changing text color or background takes minutes. Layout topics like Flexbox and Grid require more practice, but you do not need them on day one.

Start with simple pages: style headings, links, and buttons. Use browser DevTools to inspect elements and experiment live. Small wins build confidence before you tackle responsive design and complex layouts.

Foundation

📝 CSS Syntax & Rule Structure

Every CSS rule follows the same pattern: a selector, an opening brace, one or more declarations, and a closing brace.

CSS
p {
  color: #334155;
  font-size: 18px;
  line-height: 1.6;
}
Try It Yourself

Syntax rules

  • Selector — names the element(s) to style (h1, .card, #nav).
  • Property — the style you want to change (color, margin, display).
  • Value — the setting for that property (red, 16px, flex).
  • Semicolon — ends each declaration; the last one may omit it, but including it avoids errors when you add lines.
  • Comments — /* block comment */ for notes the browser ignores.
Methods

🔗 Three Ways to Add CSS to HTML

There are three common ways to connect CSS to HTML. External stylesheets are preferred for real projects; internal and inline styles are useful while learning.

MethodWhere it livesBest for
Inlinestyle="..." on an HTML tagQuick one-off tweaks; avoid overuse
Internal<style> in <head>Single-page demos and tutorials
ExternalSeparate .css file linked with <link>Production sites; reuse across pages
HTML
<link rel="stylesheet" href="styles.css">
Try It Yourself

Online HTML Editor — paste HTML and CSS together and preview the result instantly in your browser.

Concepts

🧰 Core Building Blocks

As you continue learning CSS, these are the main ideas you will encounter. You do not need to master them all today—this overview shows the big picture.

ConceptWhat it does
SelectorsTarget elements by tag, class, ID, attribute, or state
Properties & valuesDeclare visual styles (color, width, border-radius)
Box modelContent, padding, border, and margin around every element
Cascade & specificityHow conflicting rules are resolved
Display & layoutBlock, inline, Flexbox, Grid for page structure
TypographyFonts, sizes, line height, and text alignment
Colors & backgroundsHex, RGB, HSL, gradients, and images
Responsive designMedia queries adapt layouts to screen size
Cheat Sheet

⚡ Quick Reference

ConceptExample
Text colorcolor: #2563eb;
Backgroundbackground-color: #f1f5f9;
Font sizefont-size: 1.125rem;
Center texttext-align: center;
Class selector.btn { padding: 0.5rem 1rem; }
Hover statea:hover { text-decoration: underline; }
Hands-On

CSS Example & Examples Gallery

Seven starter snippets. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.

Example 1 — Basic styled page

Classic first demo: light blue page background, centered white heading, and readable paragraph text.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My CSS Example</title>
    <style>
      body {
        background-color: lightblue;
        margin: 0;
        font-family: system-ui, sans-serif;
      }

      h1 {
        color: white;
        text-align: center;
        padding-top: 2rem;
      }

      p {
        font-family: Verdana, sans-serif;
        font-size: 20px;
        max-width: 36rem;
        margin: 1.5rem auto;
        padding: 0 1rem;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text styled with CSS.</p>
  </body>
</html>
Try It Yourself

Example 2 — Text color and font size

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Text Styling</title>
    <style>
      h2 {
        color: #1d4ed8;
        font-size: 1.75rem;
      }

      .highlight {
        color: #dc2626;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h2>CSS makes text stand out</h2>
    <p>Normal paragraph text with a <span class="highlight">highlighted phrase</span> inside.</p>
  </body>
</html>
Try It Yourself

Example 3 — Class selector (styled button)

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Styled Button</title>
    <style>
      .btn {
        background-color: #2563eb;
        color: white;
        border: none;
        padding: 0.65rem 1.25rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button class="btn" type="button">Click Me</button>
  </body>
</html>
Try It Yourself

The .btn class selector targets any element with class="btn", so you can reuse the same style on links or divs styled as buttons.

Example 4 — Box model (padding, border, margin)

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Box Model</title>
    <style>
      .card {
        background: #f8fafc;
        padding: 1.25rem;
        border: 2px solid #cbd5e1;
        border-radius: 0.75rem;
        margin: 1.5rem auto;
        max-width: 20rem;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h3>Card title</h3>
      <p>Padding adds space inside the border.</p>
    </div>
  </body>
</html>
Try It Yourself

Example 5 — Hover state on a link

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hover Link</title>
    <style>
      a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 600;
      }

      a:hover {
        color: #1d4ed8;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p><a href="#">Hover over this link</a></p>
  </body>
</html>
Try It Yourself

Pseudo-classes like :hover apply styles when the user interacts with an element—essential for accessible, responsive UI feedback.

Standards

💰 Is CSS Open Source?

Yes. CSS is an open web standard and an integral part of the web platform. Anyone can use it without licensing or ownership restrictions. Browsers implement the same specifications so your styles work across Chrome, Firefox, Safari, and Edge.

Many open-source CSS frameworks and libraries—Bootstrap, Tailwind CSS, Open Props, and others—help teams build efficient, visually appealing designs faster. You can also write plain CSS with no dependencies at all.

Motivation

📚 Why Learn CSS?

  • Every web page needs it — HTML alone looks unstyled; CSS turns structure into design.
  • Pairs with HTML & JavaScript — the classic front-end trio for interactive sites and apps.
  • Immediate visual feedback — change a color and refresh; great for beginners.
  • Career paths — front-end developer, UI engineer, web designer, and full-stack roles all expect CSS skills.
  • Responsive & accessible design — CSS helps pages work on phones and meet readability standards.
  • Creative control — typography, animation, and layout let you express brand and personality.
Compare

📋 CSS vs Other Styling Approaches

ApproachHow it worksBest for beginners when…
Plain CSSStandard rules in .css filesYou want to learn fundamentals without extra tools
Inline stylesstyle attribute on HTML tagsYou need a quick demo on one element only
CSS frameworksPre-built classes (Bootstrap, Tailwind)You want fast layouts after knowing basic CSS
CSS-in-JSStyles written inside JavaScript componentsYou later learn React or similar libraries

🧠 How the Browser Applies CSS

1

Load HTML

The browser parses your markup and builds the DOM tree of elements.

Parse
2

Load CSS

Stylesheets from <link> or <style> are parsed into rules.

Styles
3

Match & cascade

Selectors match elements; specificity and order pick the winning declarations.

Cascade
=

Paint the page

The browser computes layout and draws colors, text, and spacing on screen.

Recap

Summary

  • CSS (Cascading Style Sheets) styles HTML and separates presentation from content.
  • Håkon Wium Lie proposed CSS at CERN; it became a W3C standard in 1996.
  • Rules use selector { property: value; } with declarations separated by semicolons.
  • Add CSS inline, in a <style> block, or via an external .css file.
  • CSS is an open web standard—free to use with no licensing restrictions.
  • Practice in the browser; DevTools let you inspect and tweak styles live.
Pro Tips

💡 Best Practices

✅ Do

  • Use external stylesheets for multi-page sites
  • Prefer classes (.card) over inline styles for reuse
  • Check color contrast for readable text
  • Start mobile-friendly; add media queries as you grow
  • Use browser DevTools to debug layout issues
  • Keep selectors simple and meaningful

❌ Don’t

  • Overuse !important to fix specificity wars
  • Style everything with inline style="..." attributes
  • Memorize every property before building a small page
  • Ignore validation errors in HTML—broken markup breaks CSS
  • Copy huge frameworks before understanding plain CSS
  • Forget to test on more than one browser size

❓ Frequently Asked Questions

CSS (Cascading Style Sheets) is a stylesheet language used to style HTML and XML documents. It controls layout, colors, typography, spacing, and other visual aspects of web pages while keeping content and presentation separate.
Yes for basics. If you already know HTML tags, you can start styling text and backgrounds in an afternoon. Mastering layout, responsive design, and the cascade takes practice, but beginners see results quickly.
Yes. CSS selects and styles HTML elements, so you need markup to apply rules to. Learn basic HTML structure first, then add CSS to make pages look polished.
HTML defines structure and content (headings, paragraphs, links). CSS defines presentation (colors, fonts, spacing, layout). Together they build modern websites.
CSS is an open web standard maintained by the W3C and WHATWG. Anyone can use it without licensing fees. Popular frameworks like Bootstrap and Tailwind CSS are also open source.
Use the CodeToFun Online HTML Editor or any browser DevTools. Write HTML with a style block or linked stylesheet, save the file as .html, and open it in Chrome, Firefox, or Edge.
Did you know?

CSS can be used with other web technologies such as JavaScript and SVG to create interactive, dynamic pages. JavaScript can add or remove classes to trigger animations; SVG elements accept CSS fill and stroke properties for scalable graphics that stay sharp at any size.

Try It Yourself

Edit any example from this page in the live Try It editor.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

HTML Tutorial Online HTML Editor