Cssii

Tuesday, July 15, 14

HTML IS LIKE


CSS IS ALL


body { background-color: #d0e4fe;}

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

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


Index.html style.css


http://www.filedropper.com/website_7




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


p { margin: 100px 50px;}


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


IT’S JUST A BUNCH OF BOXES!


#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


#divTwo { width: 220px; padding: 10px; background-‐color:yellow; margin: 10px; }

<div id=”divTwo”> PUT SOME CONTENT HERE</div>

in style.css

in index.html


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.col16:first-‐child { margin-‐left: 0px; }

div.col1 { width: 48px; }
















STEAL EVERYTHING!!http://978.gs/downloads/


http://978.gs/downloads/

http://978.gs/downloads/

IDs vs Classes


#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


.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


YOU WILL ALWAYS FORGET THIS

IDs are for one time use

Classes are for stuff you will have a lot of

#

.


display:inline;

display:block;

VS


In your CSS:

p {display:block;}


float:left;

float:right;

VS


In your CSS:

img {float:right;}


Cssii

Education

Transcript of Cssii