Week 4 css basics

678 views

Published on

This is t

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
678
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week 4 css basics

  1. 1. 1) Review &quot;frenchie&quot; folder contents: <ul><ul><li>index.html </li></ul></ul><ul><ul><li>.jpg, .gif, or .png </li></ul></ul><ul><ul><li>at lest one more page.html </li></ul></ul><ul><ul><li>at least one more image </li></ul></ul><ul><ul><li>check folder structure </li></ul></ul>
  2. 2. 2) Change some attributes of other pages <ul><ul><li>add <h1> </h1> tag to page title </li></ul></ul><ul><ul><li>wrap <h2> </h2> around </li></ul></ul><ul><ul><li><ul> </ul> </li></ul></ul>
  3. 3. 3) Get embed code for video
  4. 4. 4) Paste embed code into <body> </body> tags of “about” page
  5. 5. 5) Create an email link:   <a href=&quot;mailto:ehughes@usc.edu&quot;> contact me </a> in contact page
  6. 6. CSS & next phase in the evolution of Web development:  
  7. 7. 6) The CSS stylesheet creates the scripting commands for your HTML pages. You will link to the CSS stylesheet in the <head> </head> tag of each page you want linked. But let's not get ahead of ourselves….first…
  8. 8. 7) open new unformatted text document
  9. 9. 8) structure of CSS tags
  10. 10. 9) structure of CSS tags body { background-color: #c29c6b; }
  11. 11. 10) save CSS document as: style.css
  12. 12. 11) Link your style sheet to your .html documents in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; />
  13. 13. 12) add more attributes: body { background-color: #c29c6b; } h1 { color: #c5b288; background-color: #724f21; }
  14. 14. 13) add more attributes: h1 { color: #c5b288 ; background-color: #724f21 ; font-family: arial, sans-serif; font-size: 48; font-variant: small-caps; }
  15. 15. 14) add more attributes: h2 { color: #9f2325; font-family: &quot;times new roman&quot;, serif; font-size: 32; font-variant: small-caps; }
  16. 16. 15) add background image: body { background-color: #c29c6b; background-image: url(&quot;&quot;); }
  17. 17. 16) repeat image: body { background-color: #c29c6b; background-image: url(&quot;&quot;); background-attachment: fixed; background-position: 100% 10%; background-repeat: no-repeat; }
  18. 18. 17) create paragraph attributes: p { text-indent: 50px; }
  19. 19. 18) create paragraph attributes: ul, li { list-style-type: none; }
  20. 20. 19) create paragraph attributes: ul, li { list-style-type: none; display: inline; }
  21. 21. 20) create paragraph attributes: ul, li { list-style-type: none; display: inline; margin-right: 35px; }
  22. 22. 21) create link attributes: a { color: #ffffff; }
  23. 23. 22) create link attributes: a { color: #ffffff; text-decoration: none; }
  24. 24. 23) create link attributes: a:hover { color: #f56dc1 ; font-style: italic; }
  25. 25. 24) float images: in stylesheet: #madison { float: right; margin-left: 10px; } in html document: <div id=”madison&quot;> image</div>
  26. 26. 25) other <div id=&quot;&quot;> attributes: # { text-align: justify; font-style: italic; }

×