CSS Basics

Intro

Elements have dozens of properties, or attributes which you are able to modify. These attributes range from layout and placement to text and font to background to special effects. It is these attributes which you will modify to add styling to your webpage.

We’ll focus mostly on font and background. We’ll spend time on CSS layout in another requirement.

Suggested Learning

• CSS Typography
• CSS Backgrounds
• Most important attributes

Requirements

• Make sure you have an account on Codepen
• Fork this Codepen: CSS Attributes Assignment. Don’t forget to save your work.
• Make the following changes without modifying the HTML. (You might have to do some searching to find the correct style):
  • Add the following styles to the <h1>
    • Change the font to a named sans-serif font
    • Change the color to anything.
    • Change the font size to anything.
    • Make the font bold
    • Give it a text shadow
  • Add the following styles to the first div
    • Give it a width and height
    • Give it a gradient background
    • Give it a box shadow
  • Add the following styles to the second div
    • Give it a width and a height
    • Give it an image background
    • Change the background size and position
    • Give it a border with a color
    • Give it a border radius
• Send the link to your forked Codepen to the #requirements Discord channel to show you have passed this off.

Extra Learning

• CSS Visual Reference
• CSS Property Reference
• CSS Gradient Generator