• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Decorate your content with CSS

In the last chapter, you got your first taste of creating content on the web via HTML. You also changed its appearance to have a yellow background, blue text, and a particular font via CSS. After spending the last chapter looking at HTML, it's now time to take a quick look at CSS. CSS lets you control the appearance of your web content.

What is CSS? What does it look like? These are the fundamentals we'll explore in this chapter!

Cascading style sheets

CSS stands for Cascading Style Sheets. That's a complicated way of saying that CSS allows you to set styles.

Styles are like decoration. Imagine saying "I want my website background color to be yellow, the text up top to be black, the text in the bottom section of the page to be white, the images to have a bit of space around them, and the whole thing to appear differently on mobile." All of those colors and spacing and placement is style. You just write it in code, not in English!

You also use CSS to create a layout for your site, such as placing a certain section on the left of the page, determining the size of the navigation bar that appears at the top of your website, or making multiple sections appear side-by-side in one row.

CSS controls the way different pieces of content are arranged on websites. For example, the fact that there is a column with articles on the left of the New York Times and newspaper sections arranged in a horizontal bar (World, U.S., etc.) is not a coincidence! Developers created this layout with CSS:

New York Times layout
New York Times layout

While CSS is very powerful, it depends on HTML. Consider decorating a house. First, you select your element, like the bedroom walls or living room floor. Then, you specify how it should look: the dining room walls should be red, or the living room floor should be carpeted. If an interior designer asked how you want to decorate the dining room, and you just said "Red," they wouldn't know what you're talking about. You must say you're talking about the walls first.

The same is true for HTML and CSS. In some quick examples, let's see what that looks like.

CSS applied to HTML

There are two steps while using CSS to make your HTML look awesome:

  • Identify and select the relevant HTML element (ex. paragraph, header, etc).

  • Add some styles (specify how it should look).

Let's say we want the text of our paragraph to be blue:

p {
    color: blue;
    font-family: Arial;
}

This may seem completely foreign, especially the curly brackets, but take another look. Can you recognize some elements?

  • p: refers to the paragraph tag in HTML, which is <p>.

  • color: blue: color is a CSS property. Here, we've made the text color blue.

  • font-family: this is also a CSS property to set the font of your text. In the example above, it is set to Arial. We will get into the intricacies of choosing fonts later in the course.

  • { }: curly brackets open and close a set of style rules in CSS

Here are the before and after results of the above code snippet:

Before (no CSS, just the default HTML appearance)
Before (no CSS, just the default HTML appearance)
After (CSS applied to HTML)
After (CSS applied to HTML)

Let's recap!

By understanding how HTML and CSS play together, you already have a huge leg up for learning the intricacies of each language. Remember:

  1. Write your content in HTML.

  2. Decorate you content with CSS.

In the next part, we'll cover the largest building blocks in HTML to structure an entire web page!

Example of certificate of achievement
Example of certificate of achievement