Tricky CSS

In this lesson, we'll learn about a gotcha in Angular that can be confusing when dealing with CSS.

We’ll make one final change to our application before we talk about RxJS. For more emphasis, let’s try underlining the keyword in the results. Bootstrap doesn’t come with a class for adding an underline to some text. Luckily, it’s not hard to pull off.

We’ll update the results.component.css file to the following:

.font-weight-bold{
  text-decoration: underline;
}

This will not work. It’s a small gotcha that can trip us up because of how Angular applies CSS. If we use the developer tools, we’ll see the following in the elements panel:

Get hands-on with 1200+ tech skills courses.