Question about the starting code... why is the unordered list set to block?

The purpose of this is to overwrite custom css because the default format is less relevant, so if you have a lot of css pages, maybe with some that you cannot modify you need to overwrite it or to let you sure that the block is block, not different by another sheet and yu have to be careful because if you write a lot of !important you risk that some of them are overwrited

to be simple the purpose is to be SURE that is block, giving a biggest point to not be overwrited by another information in another sheet

an exemple is this:

I have the default ul that is block

I write a css:

ul { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; text-align: center; }

maybe I'm using a cms ore the project is edited by a lot of persons and one of this writed in another sheet (!MAYBE PUT AFTER OURS, IN THE HTML PAGE, SO READED AFTER OURS):

ul { display: inline; }

(maybe to make an inline horizontal menu)

our sheet is overwrited and the ul is inline

in this case we need:

ul { display: block !important; }

because the sheet is readed before the others but this information need to be so

in another case there is the sheet written by another that we cannot modify for some reason but we can add our css after it

is obvious that if this person have writed

ul { display: inline; }

we need to write

ul { display: block; }

also if it so by default, just to overwrite the inline information

the code is redundant because by default ul is a block-level element. The instructor must have missed it. Happens to the best of us.

Cheers

I haven't gotten to that point in this course. It's possible that it may be redundant code. But if there is a rationale basis, it's due to the nature of CSS... Remember that it cascades... consider the following example. It's always possible that other dependencies could be at play and they're being overwritten.

<link ref="stylesheet" href="reset.css">
<link ref="stylesheet" href="framework.css">
<link ref="stylesheet" href="project.css">

Default style - set by browser or reset.css:

ul {display: block;}

Framework style like Bootstrap (hypothetical example) - set by framework.css:

ul {display: inline-block;}

Your custom style - written by developer - set by project.css:

ul {display: block;}

The end result would be that the display property is rendered as "block" because it's the last style loaded.

You can usually see this in Developer tools by toggling the property on and off and seeing if another style takes its place.

Hope this helps! Happy coding!