All right! Now that you know all about CSS, it's time to learn the last (but certainly not least) major piece of the puzzle: positioning.
Controlling the position of HTML elements allows you incredibly fine control over how your pages look. No longer will your <div>s sit directly on top of one another! (Unless you want them to.)
As we mentioned, elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.
Check out the image in the Result tab: that's what the box model looks like! (We'll cover the details of margins, borders, and padding in the next section.)
Instructions
See for yourself—use the universal selector to draw a
1px dashed border of hex color#0000FF around every HTML element.
*{
border:1px dashed #0000FF;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3>The Box Model</h3>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png"/>
<p>Image courtesy of www.w3.org!</p>
</body>
</html>
No comments:
Post a Comment