A Closer Look at CSS
Lesson 1 of 1
  1. 1
    Why Use CSS?
    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…
    Start
  2. 2
    Link to a Stylesheet
    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…
    Start
  3. 3
    Anatomy of a CSS Rule
    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: …
    Start
  4. 4
    font-family
    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; } …
    Start
  5. 5
    color
    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…
    Start
  6. 6
    CSS Class Selectors
    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 …
    Start
  7. 7
    font-size
    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…
    Start
  8. 8
    A Background Image
    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-…
    Start
  9. 9
    CSS id Selectors
    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…
    Start
  10. 10
    CSS Review
    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.
    Start

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