CSS Introduction

CSS stands for Cascading Style Sheets. It is used to style HTML pages with colors, layouts, fonts, spacing, responsive design, animations, and visual effects.

What Is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of HTML documents. HTML creates the structure of a web page, while CSS controls how that structure looks.

h1 {
  color: #0d6efd;
  font-size: 2.5rem;
}

p {
  line-height: 1.6;
}

With CSS, you can style headings, paragraphs, buttons, images, forms, navigation menus, cards, grids, layouts, and full website designs.

Why CSS Is Important

CSS separates design from HTML structure.
CSS improves website appearance and user experience.
CSS helps create responsive layouts for mobile, tablet, and desktop screens.
CSS controls spacing, typography, colors, and visual hierarchy.
CSS supports accessibility through focus states, contrast, and readable text.
CSS improves maintainability by reusing styles across many pages.
CSS supports animations, transitions, and modern UI effects.

CSS Introduction Cheatsheet

The following table gives a quick overview of the most important CSS concepts beginners should know.

CSS Concept	Example	Purpose
Selector	`h1`	Selects the HTML element to style.
Property	`color`	Defines what style should change.
Value	`#0d6efd`	Defines the setting for the property.
Declaration	`color: #0d6efd;`	Combines a property and value.
Rule Set	`h1 { color: blue; }`	Applies styles to selected elements.
Class Selector	`.card`	Styles reusable components or groups.
ID Selector	`#header`	Styles one unique element.
External CSS	`<link rel="stylesheet" href="style.css" />`	Loads styles from a separate CSS file.
Media Query	`@media (min-width: 768px)`	Creates responsive styles for different screen sizes.
CSS Variable	`--primary-color: #0d6efd;`	Stores reusable design values.

How CSS Works

CSS works by selecting HTML elements and applying style rules to them. The browser reads HTML, builds the page structure, loads CSS, applies matching rules, and then paints the styled page on the screen.

The browser loads the HTML document.
The browser reads linked or embedded CSS.
CSS selectors match HTML elements.
The browser calculates final styles using the cascade and specificity.
The browser renders the styled page.

<h1 class="page-title">Learn CSS</h1>

<p class="intro-text">
  CSS makes HTML pages beautiful and responsive.
</p>

.page-title {
  color: #0d6efd;
  font-size: 2.5rem;
}

.intro-text {
  font-size: 1.125rem;
  line-height: 1.7;
}

CSS Syntax

A CSS rule contains a selector and a declaration block. The declaration block contains one or more property-value pairs.

selector {
  property: value;
}

.button {
  background-color: #0d6efd;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

Types of CSS

CSS can be added to an HTML page in three main ways: inline CSS, internal CSS, and external CSS.

CSS Type	Example	Best Use
Inline CSS	`<p style="color: red;">Text</p>`	Quick testing or rare one-off styles.
Internal CSS	`<style>p { color: red; }</style>`	Small single-page examples.
External CSS	`<link rel="stylesheet" href="style.css" />`	Most real websites and maintainable projects.

External CSS Example

External CSS is the recommended approach for most websites because it keeps HTML clean and allows styles to be reused across multiple pages.

HTML File

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Introduction</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello CSS</h1>
    <p>This page is styled with external CSS.</p>
  </body>
</html>

style.css File

body {
  font-family: system-ui, sans-serif;
  color: #212529;
  background-color: #ffffff;
  line-height: 1.6;
}

h1 {
  color: #0d6efd;
}

CSS vs HTML

HTML and CSS work together, but they have different responsibilities.

Comparison	HTML	CSS
Full Form	HyperText Markup Language	Cascading Style Sheets
Main Role	Creates structure and content.	Controls design and layout.
Example	`<h1>Title</h1>`	`h1 { color: blue; }`
Used For	Headings, paragraphs, links, images, forms.	Colors, fonts, spacing, grid, flexbox, animation.
SEO Role	Defines semantic content and metadata.	Improves readability, layout, speed, and user experience.

What Can CSS Do?

Change text color, font size, font family, and line height.
Add backgrounds, borders, shadows, and gradients.
Create layouts with Flexbox and CSS Grid.
Make pages responsive with media queries.
Style forms, buttons, cards, menus, tables, and images.
Create hover effects, transitions, transforms, and animations.
Support accessibility with focus styles, contrast, and reduced motion.
Improve page speed by using efficient and maintainable styles.

CSS and Responsive Design

CSS makes websites responsive by adapting layouts to different screen sizes. Responsive CSS helps pages work well on mobile phones, tablets, laptops, and desktops.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

CSS and Accessibility

CSS affects accessibility through readable typography, color contrast, focus states, spacing, reduced motion, and responsive design.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

body {
  color: #212529;
  background-color: #ffffff;
}

Keep focus states visible.
Use enough color contrast.
Use readable font sizes and line height.
Support prefers-reduced-motion.
Avoid hiding important content visually.

CSS and SEO

CSS does not directly create SEO metadata, but it affects user experience, mobile usability, page speed, accessibility, and readability. These factors help users engage with your content more easily.

Fast CSS improves page speed.
Responsive CSS improves mobile usability.
Readable typography improves engagement.
Stable layouts reduce layout shift.
Accessible styling improves usability for more visitors.

Useful CSS Tools for Beginners

Tool	Use
Visual Studio Code	Write HTML, CSS, JavaScript, and frontend projects.
Chrome DevTools	Inspect HTML, edit CSS live, and debug layout issues.
Firefox DevTools	Debug CSS Grid, Flexbox, accessibility, and layout behavior.
CodePen	Practice CSS examples quickly in the browser.
Can I Use	Check browser support for CSS features.
PageSpeed Insights	Check performance and Core Web Vitals.
W3C CSS Validator	Validate CSS syntax and standards.

Common CSS Mistakes Beginners Should Avoid

Using too many inline styles.
Writing overly specific selectors.
Using fixed-width layouts that break on mobile.
Forgetting responsive design.
Removing focus outlines without replacement.
Using low contrast colors.
Repeating the same CSS in many places.
Not organizing CSS files clearly.
Loading unused CSS on every page.
Using animations without reduced motion support.

CSS Best Practices for Beginners

Use external CSS for real projects.
Keep selectors simple and readable.
Use reusable classes for components.
Use semantic HTML and style it with CSS.
Use mobile-first responsive CSS.
Use CSS variables for repeated design values.
Keep focus states visible for accessibility.
Use enough color contrast.
Remove unused CSS before publishing.
Test pages in different browsers and screen sizes.

Key Takeaways

CSS stands for Cascading Style Sheets.
CSS controls the visual design of HTML pages.
CSS is used for colors, fonts, spacing, layout, responsiveness, and animation.
External CSS is the best option for most real websites.
CSS supports responsive design, accessibility, SEO-friendly user experience, and page speed.
Learning CSS is essential for frontend, UI, full-stack, and web development roles.

Pro Tip

Learn CSS in this order: syntax, selectors, colors, units, box model, typography, layout, Flexbox, Grid, responsive design, accessibility, and performance.