Week 3 html_css_basics
•Download as PPT, PDF•
2 likes•380 views
Week Three, Introduction to CSS stylesheets
![1) Review your "Web" folder contents: ,[object Object],[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/week3htmlcssbasics-110125130626-phpapp02/85/week-3-htmlcssbasics-1-320.jpg)
![2) Change some attributes of other pages ,[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
More from Evan Hughes
More from Evan Hughes (20)
Week 3 html_css_basics
- 3. 3) Get embed code for VuVox presentation
- 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. 10) Enter CSS & next phase in the evolution of Web development:
- 11. 10) create a basic HTML document using <div> tags and "id": <div id="wrapper"> </div>
- 12. 11) Structure: <html> <title> </title> <head> </head> <body> <div> </div> </body> </html>
- 13. 11) Structure within <body> </body> tags : <div id="wrapper"> <div id="header"> </div><!--Header--> <div id="navigation"> </div><!--Navigation--> <div id="menu"> </div><!--Menu--> <div id="content"> </div><!--Content--> <div id="footer"> </div><!--Footer--> </div>
- 14. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the characteristics #wrapper { background: #ffffff; margin: 60px auto; width: 900px; height: 1024px; }
- 15. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #header { background: #838283; height: 200px; width: 900px; }
- 16. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #navigation { background: #a2a2a2; width: 900px; height: 20px; }
- 17. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #menu { background: #333333; float: left; width: 200px; height: 624px; }
- 18. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #content { background: #d2d0d2; width: 900px; height: 624px; }
- 19. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #footer { background: #838283; height: 180px; width: 900px; }
- 20. 11) CSS structure: A) At the top of document define the <body> attributes: body { background: #f3f2f3; color: #ffffff; font family: Trebuchet MS, Arial, Times New Roman; font size: 12px; }
- 21. 12) Name your stylesheet: style.css
- 22. 13) Link your style sheet to your .html documents in the <head> </head> tags: <link rel="stylesheet" type="text/css" href="style.css />