.section {

width: 600px;

padding: 20px;

background: white;

border: 1px solid #ccc;

margin: 20px auto;

border-radius: 10px;

}

.example {

padding: 10px;

background: #fcfcfc;

border-radius: 10px;

}

table {

width: 100%;

border-collapse: collapse;

text-align: center;

}

table, th, td {

border: 1px solid #ccc;

}

.code-show-button {

display: block;

margin: 20px auto 0px;

padding: 10px 20px;

border-radius: 3px;

border: none;

background: #1998E2;

color: white;

font-size: 14px;

}

.code-show-button:hover {

background: #198acc;

cursor: pointer;

}

Note: now in the above challenge, I would be extremely surprised if you managed to get everything right without having to look ahead at the code. There are a lot of new things here that we haven’t discussed before. Border collapsing is new to us, as is the button element, styling tables as a whole, not to mention styling the cursor! I’d be downright amazed if you weren’t confused or overwhelmed here. But let’s quickly break down what we have seen before we move on and create our jump list. So styling tables, yes, it’s actually very simple to do. You just use the tag name for the rule (td, tr) and then style it just like you would any other element. The new part here is the border-collapse property. Well, this simply avoids double borders, which would show up if we didn’t select the border-collapse property to ‘collapse’ as table, tr and td all nest within one another. If they all set their borders, we would get lots of double borders. Collapsing the borders merges them into one nice line for us. Next let’s tackle the cursor property – this is simple to do. There are a small handful of cursor types we can set on our webpage. We can set them anywhere. In this case we are setting the cursor to change on hover, but we could add it to the body of the page and have it change everywhere. Some examples of the types of cursor we can set are crosshair, grab, move, text, pointer. However, there are many, many more, which you can use at will. In this example we have used the pointer as that is default when hovering over a clickable object. By default our button wasn’t showing a pointer cursor, so we had to force the functionality. This is extremely useful as you can turn any element into a button by simply changing the cursor type and attaching some JavaScript to it.

Jump menu

Now that we have our first section, it is a good time for us to create a convenient jump menu to enable us to quickly and easily skip to a certain section in the page with ease. For this we will make use of an unordered list and bookmarks.

HTML

The steps:

• We start by creating the containing div for this menu. So let’s create a new div with an id of ‘quick-menu’, place this div directly below the closing tag of the ‘navigation’ div.
• Inside the div add an tag and enter the text ‘Quick links’.
• After the closing tag create an unordered list.
  1. –  add a single list item (for now) with a link to the id for our tables section

Expected result: and that’s it for now. Nice and simple. We will obviously be adding to this list with each new section we create, but as far as the HTML structure of this section goes, this is all there is to it. Let’s quickly check that your code matches up with mine before we move on to styling the menu.

Expected code: