Congratulations!

Congratulations, you've completed the CSS course! You've designed the look of a whole web page on your own: its fonts, colors, spacing and layout.

Here's what you've learned in the course:

• CSS describes how a page looks. A rule consists of a selector and declarations in the form property: value. CSS can be written in the style attribute, in the style element or, most often, in an external stylesheet linked with the link element.
• Selectors choose elements by type, class, id or attribute, or by their state, such as :hover. They can be grouped, chained and combined to select descendants or children.
• When several rules style the same element, the rule with the more specific selector wins, and when they are equally specific, the rule written later wins. That is the cascade. Some properties, such as the text color and the font, are inherited by child elements.
• Colors can be written as names, in RGB, as hex codes or in HSL, also semi-transparent. The opacity property makes a whole element see-through.
• Text: font families with fallbacks, web fonts, the weight and size of the font (in px or rem), the line height and alignment.
• The box model: content, padding, border and margin. Width and height in various units, rounded corners, box-sizing and overflow.
• Normal flow, and how display and position change it.
• Flexbox for laying out elements in a row or a column, and CSS Grid for rows and columns at once.

Save your page. A page with a stylesheet is made of two files, and they must be in the same folder:

1. Create a new folder on your computer, e.g. my-page.
2. Open a plain text editor, such as Notepad on Windows or TextEdit on a Mac (switched to plain text in the Format menu), or a code editor such as Visual Studio Code. Paste the code of index.html and save it into the folder as index.html.
3. In the same way, create a second file with the code of style.css and save it into the same folder as style.css.
4. Double-click index.html, and the page opens in your browser, styles included.

Why the same folder? href="style.css" is a relative address: the browser looks for the file style.css in the folder where index.html is. If it isn't there, the page shows up without styles. If you didn't save your own code, you can save our page from the editor here.

The font from Google Fonts loads from the internet. Without a connection, the browser uses the fallback font from your font-family, which is exactly what the fallback is for. And as in the HTML course, watch out for images: an address like /learn/html/cats.webp only works on our website. Use the full address of the image, https://www.startcoder.com/learn/html/cats.webp, or save the image into the same folder and write just its file name.

What next?

• Responsive design. Media queries (@media rules) let you use some styles only on narrow or only on wide screens, for example to show the cards in a single column on a phone.
• Transitions and animations. With the transition property, a change on :hover doesn't happen all at once but smoothly, and with animation, you can set elements in motion.
• JavaScript. HTML gives a page its content, CSS its look, and JavaScript brings it to life: it can respond to clicks, change the content of the page or work with the data from a form. Continue with the JavaScript course.