Home/CSS/Introduction to CSS

Introduction to CSS

CSS Basics•Reading time: 5 min

CSS (Cascading Style Sheets) is the language used to style and enhance the visual presentation of web pages. It works alongside HTML to transform plain document structure into attractive, interactive websites.

In this tutorial, you'll learn what CSS is, why it's important, and understand the fundamental concepts that make it work.

1What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in HTML. CSS controls the visual presentation of web pages, including aspects like layout, colors, fonts, and spacing.

Think of HTML as the structure or skeleton of a webpage, while CSS is the skin, clothing, and styling that makes it visually appealing. Without CSS, websites would be plain text documents with basic formatting.

HTML vs. CSS

HTML
HTML (Structure)

Defines the content
Creates the structure
Identifies elements (headings, paragraphs, etc.)
Provides meaning and semantics

CSS
CSS (Presentation)

Controls the appearance
Defines the layout
Sets colors, fonts, and spacing
Creates visual effects and animations

css

/* Example of CSS styling */
h1 {
  color: navy;
  font-size: 2rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

p {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}

2Why Use CSS?

CSS offers numerous benefits that make it essential for modern web development:

Separation of Concerns

CSS allows you to separate content (HTML) from presentation (CSS), making your code more maintainable and easier to update.

Consistency

Define styles once and apply them to multiple elements across multiple pages, ensuring a consistent look throughout your website.

Efficiency

Make global changes by updating a single CSS file instead of modifying each element on every page, saving time and reducing errors.

Responsiveness

Create websites that adapt to different screen sizes and devices, providing an optimal experience for all users.

Accessibility

Improve accessibility by controlling text sizes, contrast, and spacing without changing the underlying HTML structure.

Performance

Reduce page size by replacing HTML presentational elements with CSS rules, leading to faster loading times.

Before CSS:

Before CSS became widely adopted, web developers used HTML attributes and elements like <font>, <center>, and bgcolor to style pages. This approach was inefficient, hard to maintain, and limited in design possibilities.

3How CSS Works

CSS works by targeting HTML elements and applying styles to them. This process involves three main components:

The CSS Rule Structure

selector  {
  property: value; 
}Who to style
What to change

1. Selectors

Selectors determine which HTML elements to style.

h1 - Element selector
.note - Class selector
#header - ID selector

2. Properties

Properties define what aspect of the element to change.

color - Text color
font-size - Text size
margin - Outer spacing

3. Values

Values specify how the property should be changed.

blue - Color name
16px - Size in pixels
2em - Relative size

The Cascade

The "cascading" in CSS refers to how styles are applied and how conflicts are resolved. When multiple rules target the same element, CSS uses a set of rules to determine which style takes precedence:

1
Specificity
More specific selectors take precedence over less specific ones. ID selectors (#header) are more specific than class selectors (.note), which are more specific than element selectors (p).
2
Importance
Rules with !important override other rules. Use sparingly as it breaks the natural cascade.
3
Source Order
If rules have the same specificity, the one that appears last in the CSS takes precedence.

CSS Processing Model

When a browser displays a document, it must combine the document's content with its style information. It processes the document in several phases:

The browser loads the HTML
It converts HTML into a DOM (Document Object Model)
The browser fetches resources linked to the HTML document, including CSS
The browser parses the CSS and sorts rules by selector types into different "buckets"
It attaches styles to the DOM tree based on the cascade rules
The styled document is displayed on the screen

4CSS History and Versions

CSS has evolved significantly since its introduction, with each version adding new capabilities:

CSS1 (1996)

The first CSS specification included basic styling capabilities:

Font properties
Text colors and backgrounds
Text alignment
Margins, borders, padding

CSS2 (1998)

Added more advanced features:

Z-index positioning
Media types
Bidirectional text
New font properties

CSS3 (2000s - Present)

CSS3 is not a single specification but a collection of modules with significant enhancements:

Animations and transitions
Multiple backgrounds
Rounded corners and shadows
Flexbox and Grid layouts
Media queries for responsive design
Custom variables (CSS Variables)
Color gradients and opacity

Modern CSS (Today)

The latest CSS features continue to expand what's possible:

Container queries
Subgrid
Logical properties
Improved color functions
Scroll snap
CSS Houdini (low-level CSS API access)

Browser Support

Not all browsers support all CSS features, especially newer ones. When working with CSS, it's important to check browser compatibility using resources like caniuse.com and consider using fallbacks or progressive enhancement techniques.

Summary

✓
CSS is a styling language that controls the visual presentation of HTML documents
✓
It provides benefits like separation of content and presentation, consistency, and maintainability
✓
CSS works through selectors, properties, and values to target and style HTML elements
✓
The cascade determines which styles apply when multiple rules conflict
✓
CSS has evolved from basic styling to powerful layout and animation capabilities

Previous: Lists in HTML Next: Adding CSS to HTML