What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to style and layout web pages. While HTML provides the structure and content of a webpage, CSS controls how that content looks and is presented to users.

Think of it this way: if HTML is the skeleton of a website, CSS is the skin, clothing, and overall appearance. Without CSS, every website would look like a plain text document.

Why Learn CSS?

CSS is one of the three core technologies of the web, alongside HTML and JavaScript. Here is why CSS is essential:

Visual Appeal: CSS transforms plain HTML into beautiful, engaging websites
User Experience: Good styling improves readability and navigation
Brand Identity: CSS helps maintain consistent branding across your site
Responsive Design: CSS enables websites to work on all devices
Career Opportunities: CSS skills are in high demand

How CSS Works

CSS works by selecting HTML elements and applying styles to them. Here is a simple example:

CSS

/* This is a CSS comment */
h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: gray;
  line-height: 1.6;
}

In this example, we are selecting all h1 elements and making them blue with a font size of 24 pixels. Similarly, all paragraphs will be gray with a line height of 1.6.

The Cascade

The "Cascading" in CSS refers to how styles are applied when multiple rules target the same element. The cascade considers:

Specificity of selectors (more specific rules win)
Order of rules (later rules override earlier ones)
Importance (!important declarations override normal rules)

CSS Syntax Basics

Every CSS rule consists of three parts:

Selector: What element(s) to style
Property: What aspect to change
Value: The new setting

CSS

selector {
  property: value;
  another-property: another-value;
}

Adding CSS to HTML

There are three ways to add CSS to your HTML:

External Stylesheet (Recommended)

HTML

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

Internal Stylesheet

HTML

<style>
  h1 { color: blue; }
</style>

Inline Styles

HTML

<p style="color: red;">This text is red.</p>

Your First CSS Code

Let us write some CSS together:

CSS

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

p {
  line-height: 1.8;
  margin-bottom: 15px;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Summary

CSS is the styling language of the web. It separates presentation from content, making websites easier to maintain and more visually appealing. In the next lesson, we will dive deeper into CSS selectors and how to target specific elements precisely.

What is Next?

In the upcoming lessons, you will learn:

Different types of CSS selectors
The CSS box model
Colors and typography
Flexbox and Grid layouts
Responsive design with media queries
CSS animations and transitions