Live CSS Editor

Learning Objectives

In this challenge we are learning how to format a frame on a web page using a range of CSS properties.

Remember the key syntax for CSS is as follows:

In this challenge we will use various CSS properties such as:

• width:
• height:
• margin:
• padding:
• background-color:
• box-shadow:
• font-family:
• font-size:
• color:
• font-weight:
• text-align:

You can learn more about all these CSS properties on w3schools.com.

CSS Box Model

To understand how margin, borders and padding works you need to understand the CSS Box Model. Click on this picture to find out more:

Live CSS Editor

You can edit the CSS code below to see the impacts of your changes on the look & feel of this frame. Note that you can edit the properties below or add new properties such as text-decoration, font-style, text-shadow, etc.