Day 7: More CSS classes

Just keep stylin'

I picked up where I left off yesterday - by getting ready to style the body content of my About page.

Styling the text was easy enough as I feel I'm getting the hang of padding and margins.

Image styling

Styling the image was easy too, though I like that the tutor leads us through the tutorial iteratively. He'll make a change, save the page, preview the page - and then make a further change. It's reassuring that this is a way of working which is acceptable. There's no need to write lines and lines of code before seeing how it works.

I made a funky, circular image by using the border-radius property in CSS. border-radius works by specifying a percentage around the object which the curve links up. By setting border-radius to 50%, we're saying "draw a curve from 50% the width to 50% the height" - ending up with a circle.

Onto the footer

Fairly easy until I created a <div> element within the footer element. This is so that I could wrap all of the content within the footer in a class, which I could then use to style the components horizontally.

I used a "flex display" or "flex box" to lay out the elements in my footer. I don't know what this means and the tutor says we will cover it later!

A note about classes

Classes are powerful things. I created a nav class yesterday, so that I could change the way the navigation in my header was styled. This nav class contained some basic styling for the nav (including a hover state and removing the bullet points from the <ul> element). Additional styling to the header nav came via a nav-header class.

When working on the footer nav, I simply had to add class=nav" to the <ul> element and already, I could see the basic changes made to the footer nav. Additional style changes were made by creating a footer-nav class.

I will be able to reuse many of the classes I've created. This speeds website development up.

My About page

(ta da!)

Other stuff I learned

• When specifying stuff like padding and margin distances, you can use only two numbers

  • the first number will be top and bottom distance

  • the second number will be left and right distance.

padding: .25em 0;