Week 4 css basics

1) Review "frenchie" folder contents: ,[object Object],[object Object],[object Object],[object Object],[object Object]

2) Change some attributes of other pages ,[object Object],[object Object],[object Object]

4) Paste embed code into <body> </body> tags of “about” page

5) Create an email link: <a href="mailto:ehughes@usc.edu"> contact me </a> in contact page

CSS & next phase in the evolution of Web development:

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…

7) open new unformatted text document

9) structure of CSS tags body { background-color: #c29c6b; }

10) save CSS document as: style.css

11) Link your style sheet to your .html documents in the <head> </head> tags: <link rel="stylesheet" type="text/css" href="style.css" />

12) add more attributes: body { background-color: #c29c6b; } h1 { color: #c5b288; background-color: #724f21; }

13) add more attributes: h1 { color: #c5b288 ; background-color: #724f21 ; font-family: arial, sans-serif; font-size: 48; font-variant: small-caps; }

14) add more attributes: h2 { color: #9f2325; font-family: "times new roman", serif; font-size: 32; font-variant: small-caps; }

15) add background image: body { background-color: #c29c6b; background-image: url(""); }

16) repeat image: body { background-color: #c29c6b; background-image: url(""); background-attachment: fixed; background-position: 100% 10%; background-repeat: no-repeat; }

17) create paragraph attributes: p { text-indent: 50px; }

18) create paragraph attributes: ul, li { list-style-type: none; }

19) create paragraph attributes: ul, li { list-style-type: none; display: inline; }

20) create paragraph attributes: ul, li { list-style-type: none; display: inline; margin-right: 35px; }

21) create link attributes: a { color: #ffffff; }

22) create link attributes: a { color: #ffffff; text-decoration: none; }

23) create link attributes: a:hover { color: #f56dc1 ; font-style: italic; }

24) float images: in stylesheet: #madison { float: right; margin-left: 10px; } in html document: <div id=”madison"> image</div>

25) other <div id=""> attributes: # { text-align: justify; font-style: italic; }

Week 4 css basics

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Week 4 css basics

Semelhante a Week 4 css basics (20)

Mais de Evan Hughes

Mais de Evan Hughes (20)

Último

Último (20)

Week 4 css basics