Removing the Layout Indicators

Removing the border

Wherever you see a border: 1px solid black; rule, remove it. We won’t need these borders anymore, as our page is well defined and the layout does not need to be changed.

Introducing CSS variables

CSS variables help us define a consistent palette for our application. Create descriptive names for your variables, and use them everywhere in your CSS. Once you need to change a color, you only need to perform the update in one place.

Variables are added to the :root element of the document and are accessible everywhere in the document.

:root {
  --dark-color: #222222;
  --light-color: #dddddd;
  --highlight-color: #eeeeee;
}

To access a variable as a value, use the notation var(--variable-name). For instance, to set the color of an element .x, the following rule is needed:

.x {
  color: var(--variable-name);
}

Changing the colors and backgrounds

We will use one dark and one light color to define a header and a footer with a dark background and light text; and a main light area with dark text.

We will also use a --highlight-color background to highlight the featured blog post.

After defining the palette, change the color and background-color properties of the layout items that previously had creative colorful backgrounds.

After finishing this step, you will see that the links stay dark blue. As dark blue is hard to read on a black background, we will need to change the color of links. It makes sense changing all link variant styles, including visited links, active links, and hover links.

.nav-link, .nav-link:visited, .nav-link:active, .nav-link:hover,
.footer-link, .footer-link:visited, .footer-link:active, .footer-link:hover {
  color: var(--light-color);
}

The end result looks as follows: