#15DaysOfCSS Day 3: Understanding links in navbars

Enlarge the clickable area!

and

Sep 15, 2021

You may be familiar with the display property in CSS. By default via the browser stylesheet, some HTML elements are assigned a display value of block, while others are assigned a value of inline.

Block elements are generally the major section elements like headings, paragraphs, and lists; the semantic block elements like <article>, <section>, <nav>, and <aside>; and any other element that occupies the width of its containing element.

Inline elements generally pertain to text. They are as wide as their content. Typical inline elements include <em>, <strong>, <span>, and <a>.

How do you know which is which? Simply put a border on it.

<p>What kind of element would <strong>this</strong> be?</p>

Here, a border would go all the way around the paragraph as a block element. The border would go only around the word "this" as an inline element. (See today's CodePen example for more.)

Other navbar considerations: #15DaysOfCSS

🤷🏼‍♀️ How does this pertain to a navbar? 🤷🏿‍♂️

So glad you asked! The following code example is available on CodePen.

Let's consider an unordered list with a single link.

<ul>
  <li><a href="#">I am a link</a></li>
</ul>

Now, let's add some simple styling for that navbar.

li {
   background-color: yellow;
}
li:hover {
   background-color: blue;
}
a {
   color: black;
}
a:hover {
   color: white;
}

If you roll your mouse over the far right side of the link, the color will change on hover, but the text color will not. (See Example 1 in today's CodePen to try it.) Why is that? The li element is block, while the a is inline.

OK, so consolidate these styles and we'll get them working together, no problem (see Example 2 in today's CodePen):

a {
   color: black;
   background-color: yellow;
}
a:hover {
   color: white;
   background-color: blue;
}

Now the background color is only as big as the words. It no longer stretches across the screen as it did before. That's because our link is inline.

🤔 Why didn't you put the text color/background color on the `<li>`? 🤔

Inheritance! If you put the text color on the <li>, thinking the <a> will inherit it, that won't happen. From the browser's default stylesheet, <a> inherits a blue underlined style for unvisited links and a purple underlined style for visited links. Therefore, if you apply a text color change to the <li>, the <a> is unaffected, as the default browser styles still take priority.

It doesn't matter how many classes you apply, how you reorder your styles, or how you add a !important. A direct declaration always wins over an inherited declaration.

Therefore, our text color must go on the <a> if we want it to take effect.

✅ Make big clickable links ✅

We get SO ANNOYED when we think we're clicking on a link, because the background color changed on hover, but then that background area isn't clickable. This code demonstrates why that happens. (See Example 3 in today's CodePen.)

How do we fix it? By stating that our link should have a block display, not the default inline display.

a {
   color: black;
   background-color: yellow;
   display: block;
}
a:hover {
   color: white;
   background-color: blue;
}

Now we have a GIANT clickable area that is as wide as its containing element (in this case, the <li>, which is contained by the <ul>, contained by the <body> - or it's as wide as the viewport).

🤷🏻 What's the downside to big clickable links? 🤷🏼‍♀️

Block elements occupy their own line in the text. That's why links are inline by default, so you can include a link in a sentence without it wrapping to another line.

For this reason, this code doesn't make sense, as it declares all links in the document to be block links:

a {
   display: block;
}

Now every time you're writing a sentence and you

make a link

it will look like this. Probably not what you want.

🌈 Use this technique elsewhere in CSS 💖

It's totally legit to change the value of the display property on any element, class, ID, or other selector inside of your CSS to get the behavior you want. What's more, there are a ton of display values to choose from. MDN has an extensive entry on the many types of display values, or look at Jen's LinkedIn Learning course CSS: Display.

🎉📚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.

Pre-order the book