#15DaysOfCSS Day 4: Basic vertical navbars

Simple, clean, and vertical

FINALLY. We have HTML, we have the box model, we know about big clickable areas. Let's make it all pretty!!! 🤩

Here's our HTML for this example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Step 1: Fonts

Follow along in today's CodePen example.

Choose your appropriate font and set it in the CSS. You'll also want to modify size. (For our lessons here, Jen sets the font-family on the nav element, but normally she sets it on the body element so she doesn't have to worry as much about styling fonts anywhere else in the document.)

nav {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

We always recommend using relative units for font sizes. In this case, rem is relative to the root of the document, where 1em = 16px. We'll talk more about units on Day 6.

Jen discusses rem vs em as a unit of measure.

🤷🏿‍♂️ How is it that you can set the font on the nav element, and it carries through your entire list? 🤷🏻

As mentioned yesterday, this is inheritance in action! Some properties are inherited in CSS, while others are not. MDN tells you whether a property is inherited in their CSS property pages. However, there is a rule of thumb:

• If the property concerns text, it's usually inherited: family, size, style, weight, text-transform, text-align, etc.

• If the property concerns the box model, it's usually not inherited: padding, margin, borders, positioning, floats, backgrounds, display.

• Animation, transform, transitions, and filters are not inherited.

• visibility: hidden is inherited, while display: none is not. They are different!

• display: flex and display: grid have their own special inheritance rules pertaining to their properties. (It's all about parents and children.)

Obviously these rules leave a lot out of CSS, but it's a starting point.

Step 2: Remove defaults

Follow along in today's CodePen example.

Next, you'll want to remove the bullets and margin or padding (depending on browser). These are browser default styles, and you'll likely remove them on every navbar you ever construct.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Step 3: Get that big clickable area!

Follow along in today's CodePen example.

We talked about this extensively in Day 3.

a {
  display: block;
}

Step 4: Should it be on the li or the a style?

Follow along in today's CodePen example.

This is such a good question. And of course, the answer is It Depends.

In general, if you want styling to change on hover, include your styles on the a style.

a {
  display: block;
  border-bottom: 1px dotted black;
  text-align: center;
  padding: 0.5rem;
  background-color: tomato;
  color: white;
  text-decoration: none;
}

Here we've done the following:

• Set our link to a big clickable target

• Put a thin dotted border on the bottom of each link (which now expands across the page)

• Align the text in the center

• Add some padding for separation

• Set our background and text colors

• Turn off the underline on the link.

Why not put these styles on the li style instead? We could, but when we move to the link's hover state, we may get some inconsistent results.

When we go to hover, these are our styles:

a:hover {
  background-color: gold;
  color: #333;
}

These hover styles override what came before in the general a styles. Be sure to place hover styles AFTER your main link styles, to ensure an appropriate cascade and inheritance.

Could we move the other styles to the li style then? We could move the border-bottom and text-align declarations to the li and see no change to our design or functionality. The other declarations, however, are important to keep on the a style.

Step 5: Adding the final polish

Let's make our vertical styles into a panel. To do this, we'll set a width on the nav and center it on the page.

nav {
  width: 400px;
  margin: 0 auto;
}

margin: 0 auto is useful for centering a block on the page. However, in order for it to work, the block must have a width assigned to it, or it must come from the block itself (for example, an image width). Here we've used pixels for width, but you could use %, em, rem, vw, and other units instead.

For our last trick, let's round the corners of our panel.

And this one gets a little tricky! What we want to achieve is this:

Well, the <nav> element goes all the way around our links, so let's round those corners and call it a day!

nav {
   border-radius: 10px;
}

However, this "doesn't work." It also "doesn't work" to place the border radius on the ul style. Why is this?

Because the background color is on the a style. This shows up on top of the transparent nav and ul styles. Therefore, the pointy corners are coming from the a style, not from nav or ul.

So -- to round those four corners, we need to round the corners of some a element, not the nav, ul, or li elements.

You could accomplish this with a class on those link elements, or you could use some super cool selector trickery:

li:first-child a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
li:last-child a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: none;
}

CSS selectors are written from left to right, but they are read from right to left. In this case, these selectors say "for any a elements descended from an li that's a first (or last) child of its parent, apply this style."

Why not a:first-child or a:last-child? Look at the HTML structure. Every link in the HTML is both a first child AND a last child - in fact, it's the ONLY child of the li element! (Yes, a:only-child is a legitimate selector!) Therefore, we'll use the li to get close to the link we want in our selector.

🎉📚Get the #15DaysOfCSS e-book📚🎉

These #15DaysOfCSS posts will be compiled into an e-book — pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

🖥 Today’s CodePen examples

Today’s CodePen examples map out the code described in this email.

👩🏽‍💻 Challenge: Styling gelato navigation!

👩🏽‍💻  Style these links for Jen’s next career, running a gelato stand.

📚 More information and examples

The below are LinkedIn Learning courses with Jen. Subscription is required to access to view these. You may have access through your university or through your local public library.

📽 HTML and CSS: Creating Navigation Bars

📽 CSS: Selectors