What Is CSS? A Simple Guide for Complete Beginners

CSS is the language that controls how a web page looks: colors, fonts, spacing and layout. In this guide you will learn what CSS is and how it works with HTML.

What does CSS do?

CSS stands for Cascading Style Sheets. A style sheet is a list of rules that tell the browser how to show things on the screen. For example, a rule can say "make every heading dark blue" or "put 20 pixels of space around this box".

Without CSS, every web page would look like a plain text document: black text, white background, blue underlined links, and everything stacked from top to bottom. CSS is what turns that plain page into a real website with a design.

With CSS you can:

• Change colors of text and backgrounds
• Choose fonts and text sizes
• Add space inside and around elements
• Add borders, rounded corners and shadows
• Place elements side by side, in columns or in a grid
• Make the same page look good on phones and large screens

What is the difference between HTML and CSS?

Think of a house. HTML is the structure: the walls, doors and windows. CSS is the decoration: the paint, the curtains and the furniture. You need the structure first, and then you make it look nice.

HTML	CSS
Describes what the content is	Describes how the content looks
Uses tags like <h1>, <p>, <img>	Uses rules like color: red;
Saved in .html files	Usually saved in .css files
A heading, a paragraph, a list	Blue text, big font, 20px of space

Keeping these two jobs separate is a big advantage. You can change the whole design of a website by editing one CSS file, without touching the HTML content.

What does "cascading" mean in CSS?

"Cascading" means that styles flow down and combine, like water in a waterfall. Many rules can apply to the same element. When two rules disagree, the browser follows a clear order to choose a winner: more specific rules usually beat general ones, and if two rules are equally specific, the one that comes later wins. You do not need to master this today. Just remember that CSS rules can stack on top of each other, and the browser has a fair system to decide which one to use.

Note: You will meet the cascade again many times. For now, a simple rule works well: if a style does not seem to apply, another rule may be winning.

CSS before and after: a simple example

Here is a small HTML page with no CSS at all.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
</head>
<body>
  <h1>My First Blog Post</h1>
  <p>Today I started learning CSS. It is easier than I thought!</p>
</body>
</html>

In the browser you will see a big black heading and a normal paragraph in the default font, pressed against the left edge of the window. It works, but it looks plain.

Now let's add a few lines of CSS inside a <style> tag in the <head>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f1ea;
      padding: 40px;
    }
    h1 {
      color: #2a4d69;
    }
    p {
      font-size: 18px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>My First Blog Post</h1>
  <p>Today I started learning CSS. It is easier than I thought!</p>
</body>
</html>

The HTML content is exactly the same. But now the page has a soft cream background, a clean font, a dark blue heading, bigger and easier-to-read text, and space around the edges. That is the power of CSS: same content, new look.

Tip: Save the file as index.html and open it in your browser. Then change #2a4d69 to tomato and refresh. Playing with values is the fastest way to learn.

Practice exercise

Create an HTML page with a heading and two paragraphs about your favorite food. Then add a <style> tag and change the background color of the page, the color of the heading, and the font size of the paragraphs.

Hint: copy the second example above and change the values. Try color names like darkgreen, navy or orange.

Frequently asked questions

Is CSS a programming language?

Not in the usual sense. CSS is a style sheet language: you describe how things should look, and the browser does the work. You don't write loops or logic like in JavaScript.

Do I need to learn HTML before CSS?

Yes, a little. CSS styles HTML elements, so you need to know basic tags like <h1>, <p>, <a> and <div>. You don't need to be an HTML expert.

Is CSS hard to learn?

The basics are friendly. You can make visible changes in your first five minutes. Layout takes more practice, but you will learn it step by step in this course.

Key takeaways

• CSS controls how a web page looks; HTML controls what is on the page.
• CSS stands for Cascading Style Sheets.
• "Cascading" means many rules can apply to one element, and the browser has a fixed order to choose which one wins.
• The same HTML can look completely different with different CSS.