Embed Size (px)
DESCRIPTION
CSS2
Citation preview
Monday, July 14, 14
Monday, July 14, 14
Monday, July 14, 14
TAGSopen tag: <html lang="en">close tag: </html>
open tag: <head>close tag: </head>
open tag: <body>close tag: </body>
open tag: <p>close tag: </p>
Monday, July 14, 14
COMMON TAGS<h1> - heading tag<h2> - a smaller heading tag<h3> - even smallerThese go up to <h6>
<p> - paragraph tag<br> - line break
<li>, <ol>, <ul> - these are for lists
<a> - anchor tag (used for links)<img> - image tag (used for images, duh)
<html> <head> <body> Monday, July 14, 14
COMMENT TAGS
<!--...-->
NO, THIS IS NOT AN EMOTICON
Monday, July 14, 14
HYPER LINKS<a href="url">Link text</a>
IMAGE TAG<img src="url" alt="some_text">
Monday, July 14, 14
http://www.w3schools.com/tags/
MORE TAGS:
MOST OF WHICH YOU WILL NEVER USE
Monday, July 14, 14
Monday, July 14, 14
Index.html
Monday, July 14, 14
CSSMonday, July 14, 14
CSSMonday, July 14, 14
CSSMonday, July 14, 14
body { background-color: #d0e4fe;}
h1 { color: orange; text-align: center;}
p { font-family: "Times New Roman"; font-size: 20px;}
p { font-‐family: "Times New Roman", Times, serif;}
Monday, July 14, 14
http://www.w3schools.com/tags/ref_colorpicker.asp
Monday, July 14, 14
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
Index.html style.css
Monday, July 14, 14
/* unvisited link */a:link { color: #FF0000;}
/* visited link */a:visited { color: #00FF00;}
/* mouse over link */a:hover { color: #FF00FF;}
/* selected link */a:active { color: #0000FF;}
Monday, July 14, 14
a:link { text-‐decoration: none;}
a:visited { text-‐decoration: none;}
a:hover { text-‐decoration: underline;}
a:active { text-‐decoration: underline;}
Monday, July 14, 14
a:link { text-‐decoration: none;
background-‐color: #B2FF99;}
a:visited { text-‐decoration: none;
background-‐color: #FFFF85;}
a:hover { text-‐decoration: underline;
background-‐color: #FF704D;}
a:active { text-‐decoration: underline; background-‐color: #FF704D;}
Monday, July 14, 14
Monday, July 14, 14
http://www.w3schools.com/cssref/default.asp
THERE ARE MORESO, SO MANY MORE
CSS PROPERTIES LIST:
Monday, July 14, 14
div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0px; }
<div> PUT SOME CONTENT HERE</div>
in style.css
in index.html
Monday, July 14, 14
IT’S JUST A BUNCH OF BOXES!
Monday, July 14, 14
#myDiv { width: 220px; padding: 10px; border: 5px solid gray; margin: 0px; }
<div id=”myDiv”> PUT SOME CONTENT HERE</div>
in style.css
in index.html
Monday, July 14, 14
Monday, July 14, 14
Monday, July 14, 14
Monday, July 14, 14
Monday, July 14, 14
Monday, July 14, 14
