![1) Review your "Web" folder contents: ,[object Object],[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/weeks35cssbasics-110919112401-phpapp01/85/Weeks3-5-cs_sbasics-1-320.jpg)
![2) Change some attributes of other pages ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Similaire à Weeks3 5 cs_sbasics
Similaire à Weeks3 5 cs_sbasics (20)
Plus de Evan Hughes
Plus de Evan Hughes (20)
Dernier
Dernier (20)
Weeks3 5 cs_sbasics
- 3. 3) Get embed code for video
- 4. 4) Paste embed code into <body> </body> tags
- 5. 5) Now try it between the <head> </head> tags
- 6. 6) Create a link: <a href="http://www...">text</a>
- 7. 7) Create an email link: <a href="mailto:ehughes@usc.edu"> contact me </a>
- 8. 8) Create an "unordered" list in header: <ul> </ul>
- 9. 9) Link list contents to other pages: <ul> <a href="about.html"> about </a> <a href="media.html"> media </a> </ul>
- 10. CSS & next phase in the evolution of Web development:
- 11. 10) use basic HTML documents for CSS stylesheet
- 12. 11) open new unformatted text document
- 13. 12) structure of CSS tags
- 14. 13) structure of CSS tags body { background-color: #FF0000; }
- 15. 14) save CSS document as: style.css
- 16. 15) Link your style sheet to your .html documents in the <head> </head> tags: <link rel="stylesheet" type="text/css" href="style.css" />
- 17. 16) add more attributes: body { background-color: #FF0000; } h1 { color: yellow; background-color: black; }
- 18. 17) add more attributes: h1 { color: yellow; background-color: black; font-family: arial, sans-serif; font-size: 48; font-variant: small-caps; }
- 19. 18) add more attributes: h2 { color: blue; background-color: yellow; font-family: "times new roman", serif; font-size: 32; font-variant: small-caps; }
- 20. 19) add background image: body { background-color: #FF0000; background-image: url(""); }
- 21. 20) fix image location upon scroll: body { background-color: #FF0000; background-image: url(""); background-attachment: fixed; }
- 22. 21) fix image location in browser: body { background-color: #FF0000; background-image: url(""); background-attachment: fixed; background-position: 15% 35%; }
- 23. 22) repeat image: body { background-color: #FF0000; background-image: url(""); background-attachment: fixed; background-position: 15% 35%; background-repeat: no-repeat; }
- 24. 23) create paragraph attributes: p { text-indent: 50px; }
- 25. 24) create link attributes: a { color: white; }
- 26. 24) create link attributes: a:link { text-decoration: none; }
- 27. 25) create link attributes: a:hover { color: orange; font-style: italic; }
- 28. 25) float images: in stylesheet: # { float: right; width: 350; } in html document: <div id=""> </div>
- 29. 26) other <div id=""> attributes: # { text-align: justify; font-style: italic; }
- 30. 26) other <div id=""> attributes: # { text-align: justify; font-style: italic; background: 5e6363; color: ffffff; padding: px px px px; }