Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
The CSS Setup

What is CSS?

So far, you've learned about the fundamentals of HTML, including the basic structure required to set up HTML files, as well as the common HTML elements used to add content to a web page.

Unfortunately, the HTML elements that we've used to add content to a web page have resulted in fairly bland results in the browser. For example, it appears that all content seems to be the same color, have the same font, and offer no direct control over the size of the font (apart from the six different heading options). How can we make our HTML more visually appealing?

CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page. If you're interested in modifying colors, font types, font sizes, shadows, images, element positioning, and more, CSS is the tool for the job!

In this unit, you'll first learn how to incorporate CSS so that you can style content. You'll also learn about CSS's basic structure and learn how to use its syntax. In later units, we'll explore in detail exactly how to change color, font options, and much more.

Let's begin!


Take a look at the code and the browser to the right. The code contains HTML elements that you've already learned to use, with a couple of exceptions. Don't worry about the details of the code just yet; instead, let's take a quick look at the power of CSS.

Copy the following line of code and paste it on line 5.

<link href="style.css" type="text/css" rel="stylesheet">

What happened?

Report a Bug
If you see a bug or any other issue with this page, please report it here.