Day 6: Using CSS

Styling a website: Part 1

I started today's lesson by editing the images I've used on my About page. I set my photo to a square, so that I can make sure it fits well on the page. And I set the social media icons at the bottom of the page to white, so that they have good contrast to the footer (which will be blue, apparently).

I also loaded fonts into Visual Studio Code so I can set the font of my website.

Styling the header

I created a style sheet and added it to the <head> on the About page (as written about during Days 5 &6). then I set about adding a background image to the header.

The tutor asked me to add an image to the header and a background color - I then need to use the background-blend attribute since, by default, you can only use either a background color or a background image.

Hooking up the font

I spent a while browsing Google fonts and even longer figuring out how to import a Google font into my stylesheet.

In the end, I selected the font I wanted (Raleway), opened out the "View your selected families" option in the top right and copied the embed link.

This took bloody ages - but it's cool to know that there are so many, open source fonts out there to pick!

Navigation bar

I styled the <li> elements to sit inline and have white text. I also added padding of 0.5em to each <li> element. This added padding to the left and right of the elements but not top and bottom. For inline elements, padding only works inline, so I set the display attribute of my <li> elements to inline-block.

More about importing fonts

I had a couple of font files saved on my machine, but when I tried to change the font family of the header, the font on my website did not update.

I needed to import my fonts using the @font-face property first.

@font-face {

font-family: "Booter - Zero Zero";

src: url("fonts/Booter - Zero Zero.woff") format("woff"),

url("fonts/Booter - Zero Zero.woff2") format("woff2");

font-weight: normal;

font-style: normal;

}

After importing the font, I finished styling the header to give me a much improved About page and decided it was time to leave the lesson there.

I'll pick up the video from 18:50 tomorrow.

Page updated

Google Sites

Report abuse