body { font-family: Verdana, Arial, sans-serif; font-size: 1em; color: #402b46; /* other than black, but make sure it's dark enough to read */ margin: 0px; /* 0px all around */ background-color: #d9b3d6; } #container { width: 960px; margin: 0px auto; background-color: #fffafc; padding: 35px; border-left: 8px solid #8f3f71; border-right: 8px solid #8f3f71; } /* width between 700 and 1200 px - our Squint site is set to 960px center it in the browser window consider giving it a background color to set it "off" of the color */ a:link, a:visited { color: #8f3f71; text-decoration: none; } a:hover, a:active { color: #d14d8b; text-decoration: underline; } /* set the global link colors with these two grouped selectors. ensure the colors go well with your design */ header { background-color: #f7d7e8; border: 3px solid #d14d8b; padding: 25px; margin-bottom: 35px; text-align: center; } header h1 { /* so that the headline is NOT the same font as the body */ color: #7a2354; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 3.3em; margin-top: 0px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } header img { width: 240px; border: 6px solid #7a2354; display: block; margin: 0px auto 20px auto; } header p { font-size: 1.2em; color: #5b2d4a; margin-bottom: 0px; } main { margin-bottom: 35px; } main h1 { color: #7a2354; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 2.2em; margin-top: 0px; margin-bottom: 15px; } /* I suggest matching the h1 in header as you don't want to get TOO many fonts arguing with one another on the page. If you'd like more variety use other styles such as color, size, weight, text-transform, background-color + padding, or other changes to add visual hierarchy and draw attention without changing font-family. */ main h2 { color: #c23b7a; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 1.7em; margin-top: 30px; margin-bottom: 20px; } /* (see notes above for h1 in main) */ main h3 { color: #8f3f71; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 1.35em; margin-top: 0px; margin-bottom: 8px; } main ul { padding-left: 0px; } main li { list-style-type: none; margin-bottom: 25px; padding: 20px; background-color: #fdf0f6; border-left: 6px solid #d14d8b; } aside { background-color: #f3d3e3; border: 3px solid #8f3f71; padding: 25px; margin-top: 20px; margin-bottom: 35px; } /* padding to push the border away from the text content which will reduce visual cramping */ aside h1 { /* to work with the background color for readability */ color: #7a2354; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 1.9em; margin-top: 0px; margin-bottom: 20px; } /* I suggest matching the h1 in header as you don't want to get TOO many fonts arguing with one another on the page. Instead use styles such as color, size, weight, text-transform, background-color + padding, or other changes to add visual hierarchy and draw attention without changing font-family. */ aside h2 { color: #8f3f71; font-family: Cambria, Georgia, "Times New Roman", serif; font-size: 1.3em; margin-top: 0px; margin-bottom: 8px; } aside ul { padding-left: 0px; } aside a:link, aside a:visited { color: #7a2354; text-decoration: none; } aside a:hover, aside a:active { color: #d14d8b; text-decoration: underline; } /* Create CSS rules for "aside a:link, aside a:visited" AND separately: "aside a:hover, aside a:active" change the link colors for the aside so that they complement the modified color scheme for