Style Your Page

Now it's your turn: you'll write the whole stylesheet yourself.

Your page or ours? In the editor, you'll find our cat shelter page again. If you'd rather style your own page from the HTML course, select all the code in index.html and paste the code of your page over it. At the top of style.css, there's our sample plan: replace it with yours.

The instructions are a checklist of everything your stylesheet must contain, and they are checked from top to bottom: each time you click Run, the checks stop at the first item that isn't done yet. So you can run your code at any time to see which item comes next. The checks look only at which CSS features you use and that they style elements on your page, never at the particular colors, fonts or sizes.

Text and colors. First, link style.css to the page. Then start with the rule for body: the font, the text color and the background color. The elements inside body inherit the font and the text color, so this one rule changes the whole page. For a web font, choose a font on Google Fonts, let the site show you its embed code (Get embed code) and copy the link elements into head, just like in the lesson on text and fonts. Give font sizes in rem, so that they respect the text size the visitor has set in the browser.

Boxes and spacing. The rule * { box-sizing: border-box; } makes the width of every element include its padding and border, so sizes are easier to work out. Text that runs across the whole width of a wide screen is hard to read, so put the content into a column in the middle of the page. This time, use max-width (the maximum width) instead of width: the element is as wide as there is room for, but never wider than the value you give. On a large screen, it becomes a narrow column, and on a phone, it shrinks to fit the screen.

main {
	max-width: 50rem;
	margin: 0 auto;
}

If the preview is narrower than the max-width, the column simply fills it. Then add space: padding inside the boxes, such as the header or the cards, and margin between them. Rounded corners (border-radius) give cards, buttons or images a softer look.

Classes. On our page, the cards have the class card, and the element that contains them has the class cards. If you're styling your own page, add the class attribute to the elements you want to give their own look.

Layout. Flexbox is for elements in one row, such as the links of the navigation, and the grid for rows and columns at once, such as the cards. If your own page has nothing like that, add it: for example a nav in the header with links to the parts of your page, or a few short boxes (div elements with a class) with facts about your topic. Flexbox can also put the parts of the form from the HTML course into a row.

The finishing touch. Finally, let something change when the mouse is over it, such as the links or the cards.

Tip: Your code isn't saved when you leave this exercise. When everything is checked, save it: create a folder on your computer and, in a text editor, save the code of index.html into it as the file index.html and the code of style.css as the file style.css. In the next exercise, you'll find out why both files must be in the same folder and how to open the page.