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.

1. Tuesday, July 15, 14

2. HTML IS LIKE
Tuesday, July 15, 14

3. Tuesday, July 15, 14

4. CSS IS ALL
Tuesday, July 15, 14

5. body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
Tuesday, July 15, 14

6. Index.html style.css
Tuesday, July 15, 14

7. Index.html style.css
Tuesday, July 15, 14

8. http://www.filedropper.com/website_7
Tuesday, July 15, 14

9. Tuesday, July 15, 14

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

16. Tuesday, July 15, 14

17. div.layout-­‐1218
{
width:
1218px;
margin:
0px
auto;
}
div.row
{
height:
1%;
}
div.row-­‐end
{
clear:
both;
font:
1px/1px
sans-­‐serif;
height:
1px;
overflow:
hidden;
}
div.col1,
div.col2,
div.col3,
div.col4,
div.col5,
div.col6,
div.col7,
div.col8,
div.col9,
div.col10,
div.col11,
div.col12,
div.col13,
div.col14,
div.col15,
div.col16
{
float:
left;
margin-­‐left:
30px;
}
div.col1:first-­‐child,
div.col2:first-­‐child,
div.col3:first-­‐child,
div.col4:first-­‐child,
div.col5:first-­‐child,
div.col6:first-­‐child,
div.col7:first-­‐child,
div.col8:first-­‐child,
div.col9:first-­‐child,
div.col10:first-­‐child,
div.col11:first-­‐child,
div.col12:first-­‐child,
div.col13:first-­‐child,
div.col14:first-­‐child,
div.col15:first-­‐child,
div.col16:first-­‐child
{
margin-­‐left:
0px;
}
div.col1
{
width:
48px;
}
div.col2
{
width:
126px;
}
div.col3
{
width:
204px;
}
div.col4
{
width:
282px;
}
div.col5
{
width:
360px;
}
div.col6
{
width:
438px;
}
div.col7
{
width:
516px;
}
div.col8
{
width:
594px;
}
div.col9
{
width:
672px;
}
div.col10
{
width:
750px;
}
div.col11
{
width:
828px;
}
div.col12
{
width:
906px;
}
div.col13
{
width:
984px;
}
div.col14
{
width:
1062px;
}
div.col15
{
width:
1140px;
}
div.col16
{
width:
1218px;
}
STEAL EVERYTHING!!
http://978.gs/downloads/
Tuesday, July 15, 14

18. IDs vs Classes
Tuesday, July 15, 14

19. 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

23. Tuesday, July 15, 14

24. display:inline;
display:block;
VS
Tuesday, July 15, 14

25. In your CSS:
p {display:block;}
Tuesday, July 15, 14

26. float:left;
float:right;
VS
Tuesday, July 15, 14

27. In your CSS:
img {float:right;}
Tuesday, July 15, 14