Week 4 css basics
•Download as PPT, PDF•
0 likes•486 views
The document provides instructions for customizing a website using CSS including: 1) Linking a CSS stylesheet to HTML pages in the <head> tags 2) Adding CSS tags to style page elements like the body, headings, paragraphs, lists, links and images 3) Styling elements with properties like font, color, background and positioning.
![1) Review "frenchie" folder contents: ,[object Object],[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/week4cssbasics-120205173934-phpapp02/85/Week-4-css-basics-1-320.jpg)
![2) Change some attributes of other pages ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Week 4 css basics
Similar to Week 4 css basics (20)
More from Evan Hughes
More from Evan Hughes (20)
Recently uploaded
Recently uploaded (20)
Week 4 css basics
- 3. 3) Get embed code for video
- 4. 4) Paste embed code into <body> </body> tags of “about” page
- 5. 5) Create an email link: <a href="mailto:ehughes@usc.edu"> contact me </a> in contact page
- 6. CSS & next phase in the evolution of Web development:
- 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. 7) open new unformatted text document
- 9. 8) structure of CSS tags
- 10. 9) structure of CSS tags body { background-color: #c29c6b; }
- 11. 10) save CSS document as: style.css
- 12. 11) Link your style sheet to your .html documents in the <head> </head> tags: <link rel="stylesheet" type="text/css" href="style.css" />
- 13. 12) add more attributes: body { background-color: #c29c6b; } h1 { color: #c5b288; background-color: #724f21; }
- 14. 13) add more attributes: h1 { color: #c5b288 ; background-color: #724f21 ; font-family: arial, sans-serif; font-size: 48; font-variant: small-caps; }
- 15. 14) add more attributes: h2 { color: #9f2325; font-family: "times new roman", serif; font-size: 32; font-variant: small-caps; }
- 16. 15) add background image: body { background-color: #c29c6b; background-image: url(""); }
- 17. 16) repeat image: body { background-color: #c29c6b; background-image: url(""); background-attachment: fixed; background-position: 100% 10%; background-repeat: no-repeat; }
- 18. 17) create paragraph attributes: p { text-indent: 50px; }
- 19. 18) create paragraph attributes: ul, li { list-style-type: none; }
- 20. 19) create paragraph attributes: ul, li { list-style-type: none; display: inline; }
- 21. 20) create paragraph attributes: ul, li { list-style-type: none; display: inline; margin-right: 35px; }
- 22. 21) create link attributes: a { color: #ffffff; }
- 23. 22) create link attributes: a { color: #ffffff; text-decoration: none; }
- 24. 23) create link attributes: a:hover { color: #f56dc1 ; font-style: italic; }
- 25. 24) float images: in stylesheet: #madison { float: right; margin-left: 10px; } in html document: <div id=”madison"> image</div>
- 26. 25) other <div id=""> attributes: # { text-align: justify; font-style: italic; }