CSS / Page 1 of 5: Introduction to CSS
CSS Fundamentals

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It is one of the core technologies of the World Wide Web, alongside HTML and JavaScript.

CSS enables developers to separate content from presentation, making it easier to maintain, update, and scale websites. With CSS, you can control the layout, colors, fonts, spacing, and overall visual appearance of your web pages without changing the underlying HTML structure.

Why CSS Matters

Before CSS, web designers had to use HTML tags like <font>, <center>, and <bgcolor> to style web pages. This approach led to messy, bloated code that was difficult to maintain. CSS revolutionized web design by providing a clean, efficient way to style web pages.

  • Separation of Concerns: CSS keeps presentation separate from content, making code cleaner and more maintainable.
  • Reusability: One CSS file can style multiple HTML pages, reducing code duplication.
  • Consistency: CSS ensures a consistent look and feel across all pages of a website.
  • Accessibility: CSS supports accessibility features like screen reader compatibility and high-contrast modes.
  • Responsive Design: CSS enables websites to adapt to different screen sizes and devices.

How CSS Works

CSS works by applying styles to HTML elements using a set of rules. A CSS rule consists of a selector and a declaration block. The selector targets the HTML element(s) to be styled, and the declaration block contains one or more property-value pairs that define the style.

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

In this example, all <h1> elements will have blue text and a font size of 24 pixels.

Ways to Apply CSS

There are three ways to apply CSS to HTML documents:

1. Inline CSS

Inline CSS is applied directly to individual HTML elements using the style attribute. This method is useful for quick, one-off styles but is generally discouraged for large projects because it mixes content with presentation.

<p style="color: red; font-weight: bold;">This text is red and bold.</p>

2. Internal CSS (Embedded)

Internal CSS is placed within the <style> tag inside the <head> section of an HTML page. This method is useful for styling a single page without affecting other pages.

<head>
  <style>
    p { color: green; }
  </style>
</head>

3. External CSS

External CSS is the most common and recommended method. It involves placing all CSS rules in a separate .css file and linking it to the HTML page using the <link> tag. This approach promotes reusability, maintainability, and better performance.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

CSS Selectors

Selectors are patterns used to select the elements you want to style. Here are the most common types:

  • Element Selector: Selects all elements of a given type. p { color: blue; }
  • Class Selector: Selects elements with a specific class attribute. .highlight { background: yellow; }
  • ID Selector: Selects a single element with a specific ID. #header { font-size: 2em; }
  • Universal Selector: Selects all elements. * { margin: 0; }
  • Descendant Selector: Selects elements that are descendants of a specified element. div p { margin: 10px; }

CSS Box Model

The CSS box model is a fundamental concept that describes how elements are rendered. Every element is treated as a rectangular box that consists of:

  • Content: The actual content of the element (text, images, etc.).
  • Padding: The space between the content and the border.
  • Border: The line surrounding the padding (if any).
  • Margin: The space outside the border, separating the element from others.
Content
Padding
Border
Margin

CSS Units

CSS supports various units for specifying lengths and sizes:

  • Absolute Units: px (pixels), pt (points), cm, mm, in (inches).
  • Relative Units: em (relative to parent font size), rem (relative to root font size), % (percentage), vw (viewport width), vh (viewport height).

CSS Cascade and Specificity

When multiple CSS rules target the same element, the cascade determines which rule takes precedence. The cascade considers three factors:

  1. Importance: !important declarations override normal rules.
  2. Specificity: More specific selectors override less specific ones. The order of specificity is: inline styles > IDs > classes > elements.
  3. Source Order: When two rules have equal specificity, the one declared later (in the stylesheet) takes precedence.

Browser Support and Compatibility

CSS is supported by all modern web browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, some advanced CSS features may not be available in older browsers. It's important to use feature detection and progressive enhancement techniques to ensure your styles work across different browsers and devices.

Common CSS Mistakes for Beginners

  • Forgetting the Semicolon: Each declaration must end with a semicolon. color: red; font-size: 16px;
  • Incorrect Selector Syntax: Using # for classes and . for IDs (the opposite is correct).
  • Not Using the Cascade: Overwriting styles unnecessarily instead of leveraging the cascade.
  • Overusing !important: This makes styles harder to debug and override.
  • Neglecting Responsive Design: Failing to consider how styles look on different screen sizes.

Summary

CSS is an essential technology for web development that allows you to control the visual appearance of your web pages. By separating content from presentation, CSS makes websites more maintainable, accessible, and responsive. In this introduction, we covered the basics of CSS, including its purpose, how it works, the different ways to apply it, selectors, the box model, units, cascade, and common mistakes.

As you continue learning CSS, you'll discover its power and flexibility in creating beautiful, responsive, and user-friendly web experiences.

PreviousBack to Course

Ready to master real-world web development?

Learn HTML, CSS3, Bootstrap and JavaScript hands-on with mentor-led sessions.

Explore Course