2. The Box Model
padding
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In ut lacus ac felis auctor egestas ac
border
consequat nisi. Donec dapibus congue sapien.
Suspendisse vulputate egestas eros ac egestas.
Suspendisse vitae justo nunc, et consectetur mi. margin
Aenean consequat, leo in malesuada faucibus,
eros lorem malesuada ligula, et sagittis velit lorem
nec nisi. Curabitur non enim nibh, posuere
interdum dolor. Cras neque tortor, ornare eu
condimentum non, pellentesque nec risus. In
convallis mi at sapien consequat elementum
blandit nulla porttitor. </p>
p {
padding: 15px;
border: 4px solid #000;
margin: 20px;
}
3. The Box Model
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In ut lacus ac felis auctor egestas ac
consequat nisi. Donec dapibus congue sapien.
Suspendisse vulputate egestas eros ac egestas.
Suspendisse vitae justo nunc, et consectetur mi.
Aenean consequat, leo in malesuada faucibus,
eros lorem malesuada ligula, et sagittis velit lorem
nec nisi. Curabitur non enim nibh, posuere
interdum dolor. Cras neque tortor, ornare eu
condimentum non, pellentesque nec risus. In
convallis mi at sapien consequat elementum
blandit nulla porttitor. </p>
p {
padding-left: 10px;
padding-right: 50px;
border: 4px solid black;
border-top: 5px solid green;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 3px;
margin-right: 3px
}
4. The Box Model
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In ut lacus ac felis auctor egestas ac
consequat nisi. Donec dapibus congue sapien.
Suspendisse vulputate egestas eros ac egestas.
Suspendisse vitae justo nunc, et consectetur mi.
Aenean consequat, leo in malesuada faucibus,
eros lorem malesuada ligula, et sagittis velit lorem
nec nisi. Curabitur non enim nibh, posuere
interdum dolor. Cras neque tortor, ornare eu
condimentum non, pellentesque nec risus. In
convallis mi at sapien consequat elementum
blandit nulla porttitor. </p>
top right bottom left
p {
margin-top: 5px;
p {
margin-right: 50px;
margin: 5px 50px 0px 5px;
margin-bottom: 0px; OR }
margin-left: 5px;
}
5. The Box Model
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In ut lacus ac felis auctor egestas ac
consequat nisi. Donec dapibus congue sapien.
Suspendisse vulputate egestas eros ac egestas.
Suspendisse vitae justo nunc, et consectetur mi.
Aenean consequat, leo in malesuada faucibus,
eros lorem malesuada ligula, et sagittis velit lorem
nec nisi. Curabitur non enim nibh, posuere
interdum dolor. Cras neque tortor, ornare eu
condimentum non, pellentesque nec risus. In
convallis mi at sapien consequat elementum
blandit nulla porttitor.
border-width
border-style
border-color
p { p {
border-style: dashed; border: 5px dashed blue;
border-width: 5px; OR }
border-color: blue;
}
6. CENTERING DIVS USING MARGINS
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In ut lacus ac felis auctor egestas ac
consequat nisi. Donec dapibus congue sapien.
Suspendisse vulputate egestas eros ac egestas.
Suspendisse vitae justo nunc, et consectetur mi.
margin
Aenean consequat, leo in malesuada faucibus,
eros lorem malesuada ligula, et sagittis velit lorem
nec nisi. Curabitur non enim nibh, posuere
interdum dolor. Cras neque tortor, ornare eu
condimentum non, pellentesque nec risus. In
convallis mi at sapien consequat elementum
blandit nulla porttitor.
#box {
<div id="box"> padding: 15px;
<p> border: 4px solid #000;
Lorem ipsum dolor ... width: 250px;
</p> height: 250px;
</div> margin: 10px auto 10px auto;
}
7. IDs - FOR INDIVIDUAL ELEMENTS
HTML CSS
<p id="apple">Apples.<p> #apple {
font-size; 12px;
<h1 id="orange">Hello!</h1> }
#orange {
font-size: 20px;
}
8. CLASSES - FOR GROUPS OF ELEMENTS
HTML CSS
<p class="animals">Monkeys.<p> .animals {
font-size; 12px;
<p class="animals">Lions.<p> }
<p class="animals">Eagles.<p> .plants {
font-size: 20px;
<p class="plants">Pine-Tree.<p> }
9. IDs & Classes
HTML CSS Browser
<body> body {
background-color: This sentence is the introduction
<p id="intro"> grey; to this paragraph.
This }
sentence is the Lorem ipsum dolor sit amet, consectetur
introduction to this p { adipiscing elit. Curabitur eu ante odio.
paragraphs. font-size: 12px;
</p> color: blue; Lorem ipsum dolor sit amet, consectetur
text-align: center; adipiscing elit.
<p class="main"> }
Lorem ipsum dolor sit The End.
amet, consectetur #intro {
adipiscing elit. font-size: 14px;
Curabitur eu ante odio. color: red;
</p> }
.main {
<p class="main"> font-size: 10px;
Lorem ipsum dolor sit color: black;
amet, consectetur }
adipiscing elit.
</p>
<p>The End.</p>
</body>
10. IDs & Classes
HTML CSS Browser
<body> body {
background-color: This sentence is the introduction
<p id="intro"> grey; to this paragraph.
This }
sentence is the Lorem ipsum dolor sit amet, consectetur
introduction to this p { adipiscing elit. Curabitur eu ante odio.
paragraphs. font-size: 12px;
</p> color: blue; Lorem ipsum dolor sit amet, consectetur
text-align: center; adipiscing elit.
<p class="main"> }
Lorem ipsum dolor sit The End.
amet, consectetur #intro {
adipiscing elit. font-size: 14px;
Curabitur eu ante odio. color: red;
</p> }
.main {
<p class="main"> font-size: 10px;
Lorem ipsum dolor sit color: black;
amet, consectetur }
adipiscing elit.
</p>
<p>The End.</p>
</body>
11. IDs & Classes
HTML CSS Browser
<body> body {
background-color: This sentence is the introduction
<p id="intro"> grey; to this paragraph.
This }
sentence is the Lorem ipsum dolor sit amet, consectetur
introduction to this p { adipiscing elit. Curabitur eu ante odio.
paragraphs. font-size: 12px;
</p> color: blue; Lorem ipsum dolor sit amet, consectetur
text-align: center; adipiscing elit.
<p class="main"> }
Lorem ipsum dolor sit The End.
amet, consectetur #intro {
adipiscing elit. font-size: 14px;
Curabitur eu ante odio. color: red;
</p> }
.main {
<p class="main"> font-size: 10px;
Lorem ipsum dolor sit color: black;
amet, consectetur }
adipiscing elit.
</p>
<p>The End.</p>
</body>
12. IDs & Classes
HTML CSS Browser
<body> body {
background-color: This sentence is the introduction
<p id="intro"> grey; to this paragraph.
This }
sentence is the Lorem ipsum dolor sit amet, consectetur
introduction to this p { adipiscing elit. Curabitur eu ante odio.
paragraphs. font-size: 12px;
</p> color: blue; Lorem ipsum dolor sit amet, consectetur
text-align: center; adipiscing elit.
<p class="main"> }
Lorem ipsum dolor sit The End.
amet, consectetur #intro {
adipiscing elit. font-size: 14px;
Curabitur eu ante odio. color: red;
</p> }
.main {
<p class="main"> font-size: 10px;
Lorem ipsum dolor sit color: black;
amet, consectetur }
adipiscing elit.
</p>
<p>The End.</p>
</body>
13. IDs
HTML CSS Browser
<body> body {
background-color: This sentence is the introduction
<p id="intro"> grey; to this paragraph.
This }
sentence is the Lorem ipsum dolor sit amet, consectetur
introduction to this p { adipiscing elit. Curabitur eu ante odio.
paragraphs. font-size: 12px;
</p> color: blue; Lorem ipsum dolor sit amet, consectetur
text-align: center; adipiscing elit.
<p class="main"> }
Lorem ipsum dolor sit The End.
amet, consectetur #intro {
adipiscing elit. font-size: 14px;
Curabitur eu ante odio. color: red;
</p> }
.main {
<p class="main"> font-size: 10px;
Lorem ipsum dolor sit color: black;
amet, consectetur }
adipiscing elit.
</p>
<p>The End.</p>
</body>
14. DIVs
HTML Browser
<body>
<div id="box">
<h1>My First Div</h1>
</div>
</body>
CSS My First Div
body {
background-color: #fff;
}
#box {
height: 250px;
weight: 250px;
border: 10px solid #00FF00;
background-color: blue;
margin: 50px;
}
h1 {
margin-top: 125px;
text-align: center;
font-size: 36px;
color: #fff;
}
15. DIVs
HTML Browser
<body>
<div id="box">
<h1>My First Div</h1>
</div>
</body>
CSS
body {
My First Div
background-color: #fff;
}
#box {
height: 250px;
weight: 250px;
border: 10px solid #00FF00;
background-color: blue;
margin: 50px;
}
h1 {
margin-top: 125px;
text-align: center;
font-size: 36px;
color: #fff;
}
