A Closer Look at CSS
Lesson 1 of 1
  1. 1
    CSS is a language used to style websites. Colors, fonts, and page layouts for a site can all be managed using CSS. The more comfortable you are with CSS, the better equipped you will be to create s…
  2. 2
    Take a look at the web browser. Technically, this is the same site you saw in the previous exercise. It contains the exact same HTML elements and content as before. What’s missing? The CSS that was…
  3. 3
    Awesome job! Now main.css is linked to index.html. Before we start writing our own CSS, let’s take a look at how CSS code works. The diagram to the right shows the anatomy of a CSS rule: …
  4. 4
    One of the most effective ways to enhance the look and feel of a website is by changing the font. In CSS, font is managed using the font-family property: h1 { font-family: Georgia, serif; } …
  5. 5
    The new font looks great! However, black is not your only option when it comes to font color. In CSS, the color property sets the color of a CSS selector’s font: h1 { color: red; } CSS co…
  6. 6
    Up to this point, we’ve used CSS to select an HTML element by its tag name only. However, we can use class selectors to target classes of HTML elements. Consider the HTML below: Heading …
  7. 7
    The size of text has an impact on how users experience a website. The font-size property sets the size of an HTML element’s text. h1 { font-size: 60px; } In the CSS above, font-size is set…
  8. 8
    In CSS, the background-image property sets a background image of your choice for a given selector, as seen below. .hero { background-image: url(“https://content.codecademy.com/projects/make-…
  9. 9
    The background image makes a big difference. Nice work! A previous exercise introduced CSS class selectors to style HTML elements of specific classes. What if a webpage design calls for an indivi…
  10. 10
    Congratulations! You worked hard and made it to the end of a challenging lesson. There were a lot of new concepts, so let’s take a moment to review what you’ve learned.

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo