The document discusses various CSS concepts including:
- Using HTML to structure content and CSS for presentation and styling
- Common CSS properties like background-color, color, text-align, font-family, and font-size
- Margins, padding, borders and how they are used to style elements
- Identifying elements with IDs and groups of elements with classes
- Common CSS display and float properties like block, inline, left and right and how they position elements.
10. p
{
margin-‐top:
100px;
margin-‐bottom:
100px;
margin-‐right:
150px;
margin-‐left:
50px;
}
Tuesday, July 15, 14
11. p
{
margin:
100px
50px;
}
Tuesday, July 15, 14
12. p
{
padding-‐top:
25px;
padding-‐bottom:
25px;
padding-‐right:
50px;
padding-‐left:
50px;
}
Tuesday, July 15, 14
13. IT’S JUST A BUNCH OF BOXES!
Tuesday, July 15, 14
14. #divOne
{
width:
220px;
padding:
10px;
border:
5px
solid
gray;
background-‐color:blue;
margin:
10px;
}
<div
id=”divOne”>
PUT
SOME
CONTENT
HERE
</div>
in
style.css
in
index.html
Tuesday, July 15, 14
15. #divTwo
{
width:
220px;
padding:
10px;
background-‐color:yellow;
margin:
10px;
}
<div
id=”divTwo”>
PUT
SOME
CONTENT
HERE
</div>
in
style.css
in
index.html
Tuesday, July 15, 14
20. #divOne
{
width:
220px;
padding:
10px;
border:
5px
solid
gray;
background-‐color:blue;
margin:
10px;
}
<div
id=”divOne”>
PUT
SOME
CONTENT
HERE
</div>
in
style.css
in
index.html
Tuesday, July 15, 14
21. .divOne
{
width:
220px;
padding:
10px;
border:
5px
solid
gray;
background-‐color:blue;
margin:
10px;
}
<div
class=”divOne”>
PUT
SOME
CONTENT
HERE
</div>
in
style.css
in
index.html
Tuesday, July 15, 14
22. YOU WILL ALWAYS FORGET THIS
IDs are for one time use
Classes are for stuff you will have a lot of
#
.
Tuesday, July 15, 14