Learn Basic CSS by Buildinga Café Menu-Steps 66-71

Hello how are you? So in these steps, they have us add an hr element to our café menu: hr element is then between the words ‘Est.2020’ and the title ‘Coffee’. In step 67, they have us set the


element to be a height of 3 pixels. They then explain to us that
elements have borders, and that the top and bottom borders of an hr element are 1 pixel each. In Step 70, they then say:
’ Change the height property of the hr to be 2px, so the total height of it becomes 4px’.
But according to my notes, instead of CHANGING the height property to 2 pixels, I left the height at 3 pixels and added another line of code stating height: 2px . My code is as follows:

hr {
height: 3px;
background-color: brown;
border-color: brown;
height: 2px;
}
Now I am rereading this code from notes I took, so I can’t remember if they stated to just ADD a line of code to make the height of the hr element 2 pixels, or if I was the one to think of not changing the previous height value but of adding another line. But, possibly because of CSS Specificity rules? My code passed. However, would directly writing:

hr {
height: 2px;
background-color: brown;
border-color: brown;
}
have worked? Maybe it’s not such a crucial question, but I guess I am wondering, in terms of best practice / writing neat code, if I was supposed to leave both height values in, or if deleting the first one, the 3 pixel one, was still OK? Maybe it’s a weird question, but somehow I’m a bit stuck on it / doubting myself, so I thought I’d ask! Thank you so much!

If you have duplicate properties in the same rule set then the one that comes last will win. That’s the way CSS works. So in your code above, the height is 2px since that is the last height property in the rule set.

In terms of best practices, you should only have one of each type of property in the rule set. So in this case, there should only be one height property.

1 Like

Thank you! So it’s probably me who forgot to take it off: I just wasn’t sure if I left BOTH in for some thought out reason. And while I’ve got you, may you remind me how we can write the name of an element without it messing the format in this forum, I am trying to write hr but it keeps deleting AND formatting the forum. I must be missing something… Still, I’m glad you understood my question in spite of this! :smiley: Thank you so much! :slight_smile:

If you just want to put a tag “inline” then you can wrap it in single back ticks. If you want paste a bunch of code in here then do the following.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like

Thank you so much! I’ll write this somewhere in my notes so I remember: when I saw how my question formatted there, it near broke my heart! :smiley: I’ll try and do better! :smiley: :smiley: :smiley: Thank you! :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.