Cssii

Post on 13-Jul-2015

42 views 0 download

Tags:

Transcript of Cssii

Tuesday, July 15, 14

HTML IS LIKE

Tuesday, July 15, 14

Tuesday, July 15, 14

CSS IS ALL

Tuesday, July 15, 14

body {    background-color: #d0e4fe;}

h1 {    color: orange;    text-align: center;}

p {    font-family: "Times New Roman";    font-size: 20px;}

Tuesday, July 15, 14

Index.html style.css

Tuesday, July 15, 14

Index.html style.css

Tuesday, July 15, 14

http://www.filedropper.com/website_7

Tuesday, July 15, 14

Tuesday, July 15, 14

p  {        margin-­‐top:  100px;        margin-­‐bottom:  100px;        margin-­‐right:  150px;        margin-­‐left:  50px;}

Tuesday, July 15, 14

p  {        margin:  100px  50px;}

Tuesday, July 15, 14

p  {        padding-­‐top:  25px;        padding-­‐bottom:  25px;        padding-­‐right:  50px;        padding-­‐left:  50px;}

Tuesday, July 15, 14

IT’S JUST A BUNCH OF BOXES!

Tuesday, July 15, 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

#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

Tuesday, July 15, 14

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

IDs vs Classes

Tuesday, July 15, 14

Tuesday, July 15, 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

.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

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

Tuesday, July 15, 14

display:inline;

display:block;

VS

Tuesday, July 15, 14

In your CSS:

p {display:block;}

Tuesday, July 15, 14

float:left;

float:right;

VS

Tuesday, July 15, 14

In your CSS:

img {float:right;}

Tuesday, July 15, 14