Section 3 – Challenge #1

CSS elements used:

background-color: #f7f7f7; (light grey background)

border: 4px solid black;

color: #777; (dark grey text color)

cursor: pointer; (changes arrow mouse cursor to a hand pointer to click a button or link)

font-family: sans-serif;

font-size: 22px;

font-weight: bold;

line-height: 1.4;

list-style: square; (makes list bullet-points square)

text-align: center;

text-decoration: none; (removes underline under links)

text-transform: uppercase; (makes all letters uppercase)

************************************

I also used a class. Remember to use pseudo-classes (link, visited, hover, and active). More than one thing can be grouped together with a comma when you want to use the same properties:

.more-info:link, .more-info:visited {
    color: black; (to change the text black instead of the default blue color)
}
.more-info:hover, .more-info:active {
    text-decoration: none;
}

Also, don’t forget in the HTML to link to the CSS with:

<link rel=”stylesheet” href=”style.css” />