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

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:CSS-Box-Model

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.

Did you like this challenge?

Click on a star to rate it!

Average rating 4.6 / 5. Vote count: 14

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!