New:Embedded & IoT Bootcamp
Tutorial 1 of 44 in series

Introduction to CSS

Learn what CSS is and why it matters

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS
2%

CSS

CSS (Cascading Style Sheets) is the language used to style and layout web pages. While HTML provides the structure, CSS controls how that structure looks - colors, fonts, spacing, positioning, and more.

What Can CSS Do?

CSS can transform a plain HTML page into a visually engaging experience:

Demo: CSS in Action
HTML
<p class="plain">Plain HTML</p>
<p class="styled">Styled with CSS</p>
CSS
.plain {
font-size: 1rem;
color: #64748b;
}
.styled {
font-size: 1.5rem;
color: #6366f1;
font-weight: bold;
padding: 12px 20px;
background: #eef2ff;
border-radius: 8px;
border-left: 4px solid #6366f1;
}
Live Output Window

CSS is Declarative

You describe what you want, not how to do it. The browser figures out the rendering:

h1 {
  color: navy;
  font-size: 2rem;
  text-align: center;
}

This tells the browser: “Make all <h1> elements navy, 2rem, and centered.”

Separation of Concerns

CSS separates content (HTML) from presentation (styles). This makes code easier to maintain, reuse, and update.

Keep learning

Related tutorials from across the library.

All tutorials
Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development
Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development
Tutorial2026-05-30

CSS Selectors

Target HTML elements with CSS selectors

Web Development / Frontend / CSS

CSSWeb Development