4.2: Facts CSS

Style the <h3>

Back to the style.css file. Let's make all <h3> tags on the page dark blue with centered text. Right now we only have the "Facts" h3, but later we'll add more h3's for the Lorem and Favorites sections. Likewise, let's add some padding to ALL of the sections on the page.

/* Facts Section */

h3 {
  color: #000064;
  font-size: 48px;
  text-align: center;
  margin: 0;
  margin-bottom: 16px;
}


section {
  padding: 48px;
  padding-bottom: 72px;
}

H3 and Section CSS

Resize the image

Getting that giant image sized correctly is pretty high up on the priority list - let's force the image to be 200px wide... and allow the height to be set automatically based on the image dimensions.

img {
  width: 200px;
  height: auto;
}

Resize Image

Resize Image Result

Center the content

Centering items can be difficult with CSS - very difficult. One powerful option for doing this is "flex" display (formerly referred to as "flexbox")... Let's use that now to center everything in our <div>.

#centerThis {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flex

Flex Result

Styling the Unordered List

Lastly, let's do some minor styling on the unordered list and its list-items... right now everything seems pretty squished together, let's add some margins and padding.

ul {
  margin-left: 32px;
}
li {
  padding: 5px;
  font-family: Helvetica, sans-serif;
}

List Styled

List Styled Result

Next Section

Let's move on to the Lorem portion of the website. Go to 5.1: Lorem.