week 4 css basics
DESCRIPTION
This is tTRANSCRIPT
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
2) Change some attributes of other pages
• add <h1> </h1> tag to page title
• wrap <h2> </h2> around <ul> </ul>
3) Get embed code for video
4) Paste embed code into <body> </body> tags of “about” 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
8) structure of CSS tags
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;
}