Home » All Lessons » Introduction to CSS

LESSON 3.01

Introduction to CSS

Give your HTML a completely new look

Learn what CSS is, how it works alongside HTML, and how to add your first inline style to a web page.

💡 The Concept

If you are following these lesson, you’ve built your first web pages with HTML, and they work, but they look pretty academic. That’s because HTML was never meant to handle visual design. It handles structure and content. The magic of making websites look beautiful? That’s where CSS comes in. If you’ve ever wondered how websites get their colors, fonts, layouts, and even animations, you’re about to find out.

What Is CSS?

CSS stands for Cascading Style Sheets. Let’s break it down a bit.

Cascading

The browser cascades through the various CSS styles set throughout the website code. In class we have one stylesheet, but a business website will typically have several CSS stylesheets.

Screenshot of the definition of a Cascade from a dictionary.

Stylesheets

Stylesheets are used by organizations and publishers. A style sheet will specify how a logo is used and which fonts and colors can be used for the organization’s branding. With CSS we use code to create the stylesheet.

CSS is the language used to describe the presentation of web pages, including colors, layout, fonts, spacing, and much more. While HTML provides the skeleton and content of a web page, CSS is responsible for how everything looks.

Think of it this way: HTML is the content, CSS is the design. These two languages work hand-in-hand to build every website you visit. You can even create animations with CSS!

One of the biggest advantages of CSS is that styles are generally kept in a separate file from your HTML. This means a single stylesheet can control the look of your entire website. Change one line of CSS, and every page that links to that stylesheet updates automatically. You can change 100 pages, or even 10,000 pages of a website, with one change to the CSS file.

Adding Your First CSS

The simplest approach is inline CSS, written directly inside an HTML tag using the style attribute. Before writing any code, here are two basic properties to know:

background-color — sets the background color of an element
color — sets the text color of an element

<h1 style="color: blue; background-color: red;">Hello World</h1>

🎬 Video Demonstration

This video demonstrates how to add inline CSS to an HTML page:

Exercise: Try It Yourself

Step 1. Open JSFiddle and paste this into the HTML panel:

<h1>Hello World</h1>

Step 2. Add a text color using the style attribute directly on the tag:

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

Step 3. Add a background color by adding a second property, separated by a semicolon:

<h1 style="color: blue; background-color: red;">Hello World</h1>

Step 4. Click Run to see the result. Your JSFiddle should look like this:

JSFiddle showing an h1 with blue text and red background using inline CSS

❓ Frequently Asked Questions

Where did CSS come from?

CSS was proposed in 1994 by Håkon Wium Lie and finalized as a standard in 1996. Before CSS, web designers applied visual styles directly in HTML using tags like <font> and attributes like bgcolor. This made HTML code messy and hard to maintain. CSS separated the design from the content, which was a major improvement. Browsers took several years to support it consistently, which is why early web design was often chaotic and inconsistent across browsers.

How does CSS decide which style wins when there are conflicts?

CSS uses a system called the cascade to resolve conflicts. Three factors determine which rule wins: where the style is written (inline styles beat stylesheet rules), how specific the selector is (a class selector beats a plain element selector), and order (later rules beat earlier ones when specificity is equal). This system is covered in detail in the next lesson, How CSS Cascades.

Why keep CSS in a separate file instead of writing it inline?

A single external stylesheet can control the look of every page on a website. Change one rule and every page that links to that stylesheet updates automatically. Inline styles only affect the one tag they are written on, so they do not scale. For a site with hundreds or thousands of pages, maintaining inline styles would be nearly impossible. Keeping CSS separate also makes the HTML cleaner and easier to read.

What are the three ways to add CSS to a page?

Inline CSS is written directly in an HTML tag using the style attribute, as you did in this lesson. Internal CSS is written in a <style> block inside the <head> of a single HTML file, which keeps styles on one page but does not share them across the site. External CSS is written in a separate .css file and linked to as many HTML pages as you want. External CSS is the standard approach for real projects because one file controls the whole site.

Is CSS a programming language?

No. CSS is a declarative styling language, not a programming language. It describes what elements should look like, but it does not have logic, loops, or calculations the way JavaScript does. That said, modern CSS is surprisingly powerful. It can handle animations, responsive layouts, and custom properties (variables). It is not a programming language, but it is a real skill that takes time to learn well.

Does CSS affect SEO?

Not directly. Search engines read the HTML content of a page, not the CSS. However, CSS affects user experience in ways that indirectly influence search rankings. A well-styled page is easier to read, loads faster when CSS is optimized, and works better on mobile devices. Google takes page experience into account as a ranking factor, so good CSS practice and bad CSS practice can both have real consequences for how your pages perform in search results.

★ Key Takeaways

CSS is the language that controls how web pages look. This lesson introduced what CSS is, how it works alongside HTML, and how to write your first inline style. Next, you will learn how CSS cascades, which is the system the browser uses to decide which styles apply when multiple rules target the same element. Understanding cascade order early will save you from a lot of confusing bugs.

Next Lesson: How CSS Cascades

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.