week 4 css basics
DESCRIPTION
This is tTRANSCRIPT
![Page 1: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/1.jpg)
1) Review "frenchie" folder contents:
• index.html• .jpg, .gif, or .png• at lest one more page.html• at least one more image• check folder structure
![Page 2: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/2.jpg)
2) Change some attributes of other pages
• add <h1> </h1> tag to page title
• wrap <h2> </h2> around <ul> </ul>
![Page 3: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/3.jpg)
3) Get embed code for video
![Page 4: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/4.jpg)
4) Paste embed code into <body> </body> tags of “about” page
![Page 6: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/6.jpg)
CSS & next phase in the evolution of Web development:
![Page 7: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/7.jpg)
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…
![Page 8: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/8.jpg)
7) open new unformatted text document
![Page 9: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/9.jpg)
8) structure of CSS tags
![Page 10: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/10.jpg)
9) structure of CSS tags
body {background-color: #c29c6b;
}
![Page 11: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/11.jpg)
10) save CSS document as:
style.css
![Page 12: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/12.jpg)
11) Link your style sheet to your .html documents in the <head> </head>
tags:
<link rel="stylesheet" type="text/css" href="style.css" />
![Page 13: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/13.jpg)
12) add more attributes:
body {background-color: #c29c6b;
}
h1 {color: #c5b288;background-color: #724f21;
}
![Page 14: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/14.jpg)
13) add more attributes:
h1 {color: #c5b288;background-color: #724f21;font-family: arial, sans-serif;font-size: 48;font-variant: small-caps;
}
![Page 15: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/15.jpg)
14) add more attributes:
h2 {color: #9f2325;font-family: "times new roman", serif;font-size: 32;font-variant: small-caps;}
![Page 16: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/16.jpg)
15) add background image:
body {background-color: #c29c6b;background-image: url("");
}
![Page 17: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/17.jpg)
16) repeat image:
body {background-color: #c29c6b;background-image: url("");background-attachment: fixed;background-position: 100% 10%;background-repeat: no-repeat;
}
![Page 18: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/18.jpg)
17) create paragraph attributes:
p {text-indent: 50px;
}
![Page 19: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/19.jpg)
18) create paragraph attributes:
ul, li {list-style-type: none;
}
![Page 20: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/20.jpg)
19) create paragraph attributes:
ul, li {list-style-type: none;display: inline;
}
![Page 21: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/21.jpg)
20) create paragraph attributes:
ul, li {list-style-type: none;display: inline;margin-right: 35px;
}
![Page 22: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/22.jpg)
21) create link attributes:
a {color: #ffffff;
}
![Page 23: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/23.jpg)
22) create link attributes:
a {color: #ffffff;text-decoration: none;
}
![Page 24: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/24.jpg)
23) create link attributes:
a:hover {color: #f56dc1;font-style: italic;
}
![Page 25: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/25.jpg)
24) float images:
in stylesheet:
#madison {float: right;margin-left: 10px;
}
in html document:
<div id=”madison"> image</div>
![Page 26: Week 4 css basics](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b4cb764a7959bd488b4662/html5/thumbnails/26.jpg)
25) other <div id=""> attributes:
# {text-align: justify;font-style: italic;
}