Introduction to CSS

Learn what CSS does and how it styles HTML pages.

When you first start building websites, you quickly discover that HTML alone creates only the structure of a webpage. While HTML can display text, images, and links, the page often looks plain and unstyled. This is where CSS comes in.

CSS stands for Cascading Style Sheets. It is a stylesheet language used to control how HTML elements appear on a webpage. CSS allows you to add colors, fonts, spacing, layouts, animations, and many other visual effects that make websites attractive and user-friendly.

Today, almost every website on the internet uses CSS to create a professional and engaging design.

Why Do We Need CSS?

Imagine building a house.

  • HTML creates the walls, doors, and windows.
  • CSS paints the walls, arranges the furniture, and decorates the rooms.

Without CSS, websites would look like plain documents with little visual appeal.

CSS helps developers:

  • Improve the appearance of web pages
  • Create consistent designs across multiple pages
  • Make websites responsive for different devices
  • Improve readability and user experience
  • Separate design from content

For example, an online shopping website uses CSS to style product cards, buttons, menus, and promotional banners. Without CSS, all the products would appear as simple text and images with no organization.

How CSS Works

CSS works by selecting HTML elements and applying styles to them.

A CSS rule consists of three parts:

css
h1 {
  color: blue;
}

In this example:

  • h1 is the selector
  • color is the property
  • blue is the value

This rule tells the browser to display all h1 headings in blue.

A Simple Example

HTML

html
<h1>Welcome to DevBrainBox</h1>
<p>This is my first webpage.</p>

CSS

css
h1 {
  color: green;
}

p {
  font-size: 18px;
}

When the browser loads the page:

  • The heading appears in green.
  • The paragraph text becomes larger.

This simple styling immediately improves the page's appearance.

Types of CSS

There are three main ways to add CSS to a webpage.

Inline CSS

Inline CSS is written directly inside an HTML element.

html
<h1 style="color:red;">Hello World</h1>

This method is useful for quick testing but is not recommended for larger websites because it becomes difficult to manage.

Internal CSS

Internal CSS is written inside a style tag within the HTML document.

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

This approach works well for styling a single page.

External CSS

External CSS is stored in a separate file and linked to the HTML document.

html
<link rel="stylesheet" href="style.css">

This is the most common and professional method because one CSS file can be used across multiple pages.

Understanding the Word Cascading

The word cascading refers to how CSS determines which style should be applied when multiple styles target the same element.

For example, if one rule makes a heading blue and another rule makes it red, CSS follows a set of priority rules to decide which style should be displayed.

As you learn more advanced CSS, understanding the cascading behavior becomes very important.

Real-World Example

Consider a news website with hundreds of articles. Instead of manually styling every page, developers create a single CSS file that controls the design of the entire website.

If they decide to change the main heading color from blue to purple, they only need to update one line in the CSS file, and every page updates automatically.

This saves time, reduces errors, and keeps the website design consistent.

Benefits of Using CSS

CSS provides many advantages for web development:

  • Creates attractive and professional designs
  • Improves website readability
  • Reduces repetitive code
  • Makes websites easier to maintain
  • Supports responsive design for mobile devices
  • Allows easy customization and updates

Because of these benefits, CSS has become an essential technology for modern web development.

Conclusion

CSS is the language that brings websites to life. While HTML provides the structure and content, CSS controls how everything looks and feels. From colors and fonts to layouts and animations, CSS helps create visually appealing and user-friendly websites.

As you continue learning CSS, you will discover powerful features that allow you to build responsive, modern, and professional web experiences. Mastering CSS is one of the most important steps toward becoming a skilled web developer.