RWDHTMLCSS.COM

There are 4 link states. They must be in this order: Link, Visited, hover and active. .navbar a:link refers to all the a tags inside the navbar element. If you were going to style all the links on your page the same, you would write: a:link instead of .navbar a:link.
Link is the state of the link before it is clicked or hovered over.
Visited is after the page has been clicked and visited.
Hover is while the mouse is hovering over the link.
Active is while the mouse button is pressed down clicking the link.

.navbar a:link {
       color:white;
       text-decoration:none;
       font-weight:bold;
       outline: none;
       font-size-size:16px;
}
.navbar a:visited {
       color:white;
       text-decoration:none;
       font-weight:bold;
       outline: none;
       font-size-size:16px;
}
.navbar a:hover {
       color:lightblue;
       text-decoration:none;
       font-weight:bold;
       outline: none;
       background-color:black;
       font-size-size:16px;
}
.navbar a:active {
       color:red;
       text-decoration:none;
       font-weight:bold;
       outline: none;
       background-color:white;
       font-size-size:16px;
}

Constructing a horizontal menu Demonstration.

This shows you how you turn these 5 links into the menu below. The menu we construct for our page is on the next page and is like the one I used for my pages. I thought I would throw this in on how to construct a menu and you are welcome to use this one instead of the one on next page. I explain how to use this one instead farther down on this page. There are 2 mobile stylings to choose from. One will make it stack up and the other will keep it horizontal and reduce the size of fonts. I like the stack up method because if you keep it as is, you have to use short words for your links and make the fonts real small for the horizontal menu to work on the mobile.

The HTML

<div class="navbar">
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
</div>

The CSS explained

• To make the div(box as a whole) have white borders and apply box-sizing:border-box. This is the box that the 5 links are in;
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  
  
• To make links in the navbar a block element. .navbar a {} refers to the a elements in the navbar:
  .navbar a {
  display:block;
  }
  
  
• To style the size of the block element:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  }
  
  
• To float the block elements left so they line up horizontally across the page like on a nav menu:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  }
  
  Don't forget to use clear:left; on the next block that should be under the blocks floating left. float:left; makes the blocks flow more like text and everything will keep floating until you tell it to stop.
  
  
• To add a background-color and font color: (don't forget the styling you are doing to link states above. The color here will style any text that is not a link while the links will be blue unless you state a color on the link states.)
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  }
  
  
• To add box-sizing:border-box; to keep the padding, borders and margins within the dimensions of the box:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  }
  
  
• To change the font-family (font type):
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  }
  
  
• To change font-size and center align the text:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  }
  
  
• To add a 1px white border to the <a> elements:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  
  
• To add the 4 link states under the .navbar a code. This is also the finished CSS:
  
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  
  .navbar a:link {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:visited {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:hover {
         color:white;
         font-weight:bold;
         text-decoration:underline;
         outline: none;
  }
  .navbar a:active {
         color:red;
         text-decoration:none;
         outline: none;
  }


• Also, for this menu remove the border around the header section on the css sheet.
  Tested it, Here it is

• Remove the two instances of this from the Html sheet:
  <div class="navbar">
  </div>


• Remove the borders from the header on the CSS sheet. Remove this:
  border:solid 5px #4682b4;


• Remove this from the Css sheet:
  .navbar {
  }
  


• Enter this Html on the Html sheet inbetween the closing </header> tag and opening <article> tag.

<div class="navbar">
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
</div>

• Enter this Css on the main Css sheet:
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  .navbar a:link {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:visited {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:hover {
         color:white;
         font-weight:bold;
         text-decoration:underline;
         outline: none;
  }
  .navbar a:active {
         color:red;
         text-decoration:none;
         outline: none;
  }


• After we do the mobile sheet, come back here and copy one of these two stylings to the the css mobile sheet in place of the styling for other menu.

• Mobile styling 1:
  To reduce the size of the font and height of box on the mobile screen
  
  .navbar a {
  font-size:1rem;
  height:30px;
  }
  
  
• Mobile Styling 2:
  To make the links stack up instead of floating horizontally, use this mobile styling instead of the mobile styling above. See menu below. Collapse browser to see menu stack up. The previous menu farther up on page will not stack up.
  
  .navbar a {
  float:none;
  width:100%;
  font-size:1.5rem;
  height:40px;
  border:solid 1px white;
  }