Lesson 2- Css1
description
Transcript of Lesson 2- Css1
![Page 1: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/1.jpg)
Monday, July 14, 14
![Page 2: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/2.jpg)
Monday, July 14, 14
![Page 3: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/3.jpg)
Monday, July 14, 14
![Page 4: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/4.jpg)
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
![Page 5: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/5.jpg)
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
![Page 6: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/6.jpg)
COMMENT TAGS
<!--...-->
NO, THIS IS NOT AN EMOTICON
Monday, July 14, 14
![Page 7: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/7.jpg)
HYPER LINKS<a href="url">Link text</a>
IMAGE TAG<img src="url" alt="some_text">
Monday, July 14, 14
![Page 8: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/8.jpg)
http://www.w3schools.com/tags/
MORE TAGS:
MOST OF WHICH YOU WILL NEVER USE
Monday, July 14, 14
![Page 9: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/9.jpg)
Monday, July 14, 14
![Page 10: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/10.jpg)
Index.html
Monday, July 14, 14
![Page 11: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/11.jpg)
CSSMonday, July 14, 14
![Page 12: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/12.jpg)
CSSMonday, July 14, 14
![Page 13: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/13.jpg)
CSSMonday, July 14, 14
![Page 14: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/15.jpg)
http://www.w3schools.com/tags/ref_colorpicker.asp
Monday, July 14, 14
![Page 16: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/16.jpg)
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
Index.html style.css
Monday, July 14, 14
![Page 17: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/17.jpg)
/* 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
![Page 18: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/18.jpg)
a:link { text-‐decoration: none;}
a:visited { text-‐decoration: none;}
a:hover { text-‐decoration: underline;}
a:active { text-‐decoration: underline;}
Monday, July 14, 14
![Page 19: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/19.jpg)
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
![Page 20: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/20.jpg)
Monday, July 14, 14
![Page 21: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/21.jpg)
http://www.w3schools.com/cssref/default.asp
THERE ARE MORESO, SO MANY MORE
CSS PROPERTIES LIST:
Monday, July 14, 14
![Page 22: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/22.jpg)
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
![Page 23: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/23.jpg)
IT’S JUST A BUNCH OF BOXES!
Monday, July 14, 14
![Page 24: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/24.jpg)
#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
![Page 25: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/25.jpg)
Monday, July 14, 14
![Page 26: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/26.jpg)
Monday, July 14, 14
![Page 27: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/27.jpg)
Monday, July 14, 14
![Page 28: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/28.jpg)
Monday, July 14, 14
![Page 29: Lesson 2- Css1](https://reader034.fdocuments.in/reader034/viewer/2022052504/55498f13b4c905c26a8b532c/html5/thumbnails/29.jpg)
Monday, July 14, 14