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.
CRT Monochrome MonitorPost-It Note
Tweak the code of the above Live CSS Editor frame to make it look like a CRT screen:
Tweak the code of the above Live CSS Editor frame to make it look like a Post-It note:
LMC Simulator
Flowchart Studio
Python Syntax