style sheets
I've uploaded a beginner's tutorial on style sheets at http://users.tpg.com.au/billkerr/style/menu.htm
One way to teach style is to give the learner some style in an exemplar and then ask them to modify the exemplar with style and content that suits them. In this case I ask the students to choose their own song or poem and to change my style to fit their work. I'm looking for other ways to teach style effectively.
The following example styles just one word in a heading, placing it in a box with a background picture. The word is not shown below, it appears in the tag in the body of the text.
h1 {
background-image: url(rudyardKipling72px.jpg);
/* this image is 160px wide and 170px high CHANGE*/
background-repeat: no-repeat;
height: 170px; /* content height CHANGE */
width: 160px; /* content width CHANGE */
border: 15px solid silver; /* border: width style colour CHANGE */
/* Choose from this list of border-style values: solid, ridge, dashed, outset, double, groove, dotted, inset */
font-family: arial, lucida, helvetica, verdana, sans-serif;
/* good fonts for headings */
font-size: 120px; /* large heading CHANGE */
color:maroon; /* colour of heading word(s) CHANGE */
float: left; /* position heading on left and body text floats on side of heading */
}
This particular heading effect is shown at http://users.tpg.com.au/billkerr/style/if3_imgBox.htm
I got the idea from Christopher Schmitt, Designing CSS Web Pages, which has a useful Appendix of 50 different examples of how to present text, a paragraph, and sometimes a headline through CSS.
One way to teach style is to give the learner some style in an exemplar and then ask them to modify the exemplar with style and content that suits them. In this case I ask the students to choose their own song or poem and to change my style to fit their work. I'm looking for other ways to teach style effectively.
The following example styles just one word in a heading, placing it in a box with a background picture. The word is not shown below, it appears in the tag in the body of the text.
h1 {
background-image: url(rudyardKipling72px.jpg);
/* this image is 160px wide and 170px high CHANGE*/
background-repeat: no-repeat;
height: 170px; /* content height CHANGE */
width: 160px; /* content width CHANGE */
border: 15px solid silver; /* border: width style colour CHANGE */
/* Choose from this list of border-style values: solid, ridge, dashed, outset, double, groove, dotted, inset */
font-family: arial, lucida, helvetica, verdana, sans-serif;
/* good fonts for headings */
font-size: 120px; /* large heading CHANGE */
color:maroon; /* colour of heading word(s) CHANGE */
float: left; /* position heading on left and body text floats on side of heading */
}
This particular heading effect is shown at http://users.tpg.com.au/billkerr/style/if3_imgBox.htm
I got the idea from Christopher Schmitt, Designing CSS Web Pages, which has a useful Appendix of 50 different examples of how to present text, a paragraph, and sometimes a headline through CSS.
0 Comments:
Post a Comment
<< Home