nmanzano/lesson-two

THE BEAST – CSS

Practice directions

Let's make some CSS changes:

• Change the color of h1 and h2 to pink

CSS for "puppy-box"

• Put a border around it
• Add 20 pixels of padding
• Add 50 pixels of margin

CSS for "reason"

• Set the widths to 30%
• Set display to inline-block
• Set vertical-align to the top
• Add a border-left

TERMINAL AND GITHUB help

You have learned some valuable CSS properties along the way. You'll be using all of your knowledge to style the raw HTML in index.html to look like the screenshot below.

Your CSS might include some of the following properties:

• background-image
• background-color
• padding (hint! this could look like: padding-top, padding-left, padding-right, padding-bottom)
• margin
• width
• border
• display (hint! probably used with inline-block)
• vertical-align
• text-align
• color
• font
• font-weight
• font-style
• border
• opacity or rgba()
• AND ANY MORE THAT YOU FIND HELPFUL! (remember google is your friend)

If any of these seem unfamiliar or you forget what they do, don't hesitate to google! Developers look up things like this all the time. Albert Einstein says:

"Never memorize something that you can look up."

Of course, after using these over and over again, you'll begin to know them without looking it up!

AHHH I don't know where to start...

• Start with the background image
• Center the headings
• Look at all the divs:
  • Start with the first one
  • Put an id or class on it
  • Pick out which part of the screenshot this div relates to
• Background colors, padding, margin, and widths are good places to start

EXTENSION

Return to your recipe webpage and start styling!