Day 9: Even more CSS!

Missed a day yesterday

Oops!

It's lockdown in the UK due to the coronavirus outbreak. Shopping for food has been a real ordeal during lockdown and my partner and I try to do all our shopping for the week in one session. It's exhausting and it takes ages. So that's why I didn't do any yesterday.

</excuse>

More styling of my homepage

I'll start styling my list of fictional gigs. As with the lesson in Day 9, I was struck by ghow easy it is to copy CSS classes over from other HTML files.

So far, so simple. But then we got to the last row of the fictional tour dates. All tour dates should be underlined, except for the last one. But once I added the CSS styling to the tour rows, there was an underline on the last row. I could remove the class ("tour-row") since this will remove the styling around the text on that row.

But I could create a 'last child' selector - so I could style the last row differently to the rest without creating a whole new class. Cool!

.tour-row {

border-bottom: 1px solid black;

padding-bottom: 1em;

margin-bottom: 1em;

}

.tour-row:last-child {

border-bottom: none;

}

I need to understand more about inline elements and block elements. I needed to change my rows of tour info into inline-block elements so that I could set the width of them. But I don't understand why.

Other stuff I learned

• <strong> tags are only meant for emphasising elements. If you only want a visual bold, then use the <span> tag with CSSS styling.