Layout Properties

There are many properties that help set the styles of your web pages.

Property	Description	W3 Schools Link
background-color	Sets the background color of the element	W3 Schools
border-color	Sets the color of the border	W3 Schools
border-width	Changes the border width of an element	W3 Schools
border-style	Changes the style of border	W3 Schools
Width	Sets the width of an element	W3 Schools
Height	Sets the height of an element	W3 Schools
Float	Floats an element to one side of the page	W3 Schools
Margin	Generates space around an element	W3 Schools

FAQ

1. What does the border-radius property do?
   • The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property.
2. What if an element inside the page has a different background color from the body?
   • You can see the answer to this question by adding a background-color rule to the p tag. The paragraphs will have the background color in the rule for the p tag, and the rest of the page will follow the rule for the body tag.
3. Why does using a width and height property at the same time sometimes stretch out the image?
   • When the width of an image changes, the height must change by the same percentage, otherwise the image will stretch. For example, if you double the width of an image, you must also double the height, or the image will be stretched horizontally. When you only define the width or the height, the computer will automatically change the other property so that the image looks the same.