Skip to content
Chapter 01 of 07 · 4 lessons · ~34 min

Getting Started With CSS

Connect CSS to your HTML, learn how selectors pick elements, and get comfortable with colors and units: the four basics every stylesheet is built on.

YOUR PROGRESS0%
/ Lessons in this chapter
01
How to Add CSS to HTML (3 Ways) The three ways to connect CSS to HTML, and why an external stylesheet is almost always the right choice. Coming soon
02
CSS Selectors Explained Simply How to target exactly the elements you want with element, class, ID and combined selectors. Coming soon
03
CSS Colors: Hex, RGB and HSL How to write colors in CSS, when to use hex, RGB or HSL, and how to make transparent and accessible colors. Coming soon
04
CSS Units: px vs em vs rem The difference between px, em, rem, percentages and viewport units, and which one to use where. Coming soon

Chapter practice task

Task: Give your HTML portfolio its first stylesheet

  1. Create a css folder and a style.css file inside it, then link it from your index.html.
  2. Set a background color and a text color on the body using HSL.
  3. Style your h1, paragraphs and links with element selectors.
  4. Add one class, like .intro, and give it a different color and font size in rem.
  5. Open the page on your phone (or DevTools mobile view) and check everything is readable.

By the end of this chapter

  • You can add CSS in three ways and know which one to use
  • You can target elements with element, class and ID selectors
  • You can choose colors in hex, RGB or HSL and pick the right unit for sizes

Quick answers for this chapter

Where should I put my CSS?

In a separate .css file linked in the <head>. It keeps your HTML clean and one file can style every page.

Is CSS a programming language?

Not really. It’s a stylesheet language: it describes how things look, but it doesn’t have logic like JavaScript.

Does CSS work the same in every browser?

Almost. Modern browsers follow the same rules for nearly everything a beginner uses.