Embedded Files
video_5_CSS.mp4CSS Syntax
CSS Syntax
The CSS Box Model
The CSS Box Model
The "box" model is used in CSS to style your content. The box wraps around each piece of content you add to the page.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Example Code
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
div1 {
border: 3px solid #73AD21;
background-color: #AA2980;
padding: 10px;
margin: 30px;
position: relative;
top: 20px;
left: 200px;
display: block;
width: 200px;
height: 200px;
}
div2 {
border: 3px solid #458292;
background-color: #299984;
padding: 30px;
margin: 5px;
position: relative;
top: 50px;
left: 75px;
display: block;
width: 200px;
height: 200px;
}
div3 {
border: 3px solid #2FFF02;
background-color: #AD29FF;
padding: 4px;
margin: 4px;
top: 100px;
left: 20px;
display: block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>H2 text is here</h2>
<p>Below we have three div's, div1, div2 and div3.</p>
<div1>
Here is the contect of div1...
</div1>
<div2>
Here is the contect of div2...
</div2>
<div3>
Here is the contect of div3...
</div3>
</body>
</html>
The code above should look like this:
CSS Properties
CSS Properties
HTML / CSS Blank Template Code
HTML / CSS Blank Template Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<h1>H1 Header Text Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Report abuse