CSS MODULE IN 2 PARTS
advertisement
CSS Module in 2 parts
due by Winter Carnival
So as to familiarize yourself with the basics of CSS before you begin your
CSS skins assignment, I’d like you to do the following. This will all be due
by Carnival break, and I will give you class-time Wednesday to finish it up
and ask any questions. There are various stages to this assignment and if
you’re unfamiliar with CSS I’d suggest you take it one step at a time.
However, if you’re relatively comfortable with CSS or think you’ve got the
gist pretty well, you may want to skip to the end of each part and create
the final products. Part 1 is for text, Part 2 is for positioning.
Part 1: Playing with text and
understanding elements.
Open an HTML editor (bbedit or notepad). Open two new documents. In
one document, type the following (use any text you want, just make sure
to have 2 paragraphs):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Any Ol' Title Will Do</title>
<style type="text/css" media="all">@import
url("stylesheet.css");</style>
</head>
<body>
<h1>
And the Sun Shines Brightly
</h1>
<p class="first">
Some text. So all of the businesses in their unlimited hell where they buy
and they sell and they sell all their trash to each other but they're sick of
it all and they're bankrupt on selling. And all of the angels they'd sell off
yer soul for a set of new wings and anything gold. They remember the
people they loved.
</p>
<p class="second">
Well, i'll go to college and i'll learn some big words and i'll talk real loud
darn right right i'll be heard, you'll remember all the guys that said all
those big words he must've learned in college. And it took a long time till I
came clean with myself, I come clean out of love with my lover. I still love
her, loved her more when she used to be sober and i was kinder.
</p>
</body>
</html>
Save this document as sample.html. Now in your o ther
document, type the following:
body {
background-color: #CCCC99
}
h1 {
font-size: 24px;
font-weight: bold;
font-family: geneva, tahoma, sans-serif;
color: #FFCCFF;
}
.first {
font-size: 18px;
font-family: geneva, tahoma, sans-serif;
line-height: 24px;
color: #FFFFFF;
background-color: #666666;
}
.second {
font-size: 10px;
font-family: times, serif;
color: #000000;
border: 2px solid;
}
Save this document in the same place as the HTML document but call it:
stylesheet.css
Preview the HTML document and see how it looks.
Now try to do the following:
visit: http://www.echoecho.com/cssintroduction.htm for help.
1) change the font color of the header
2) put a border around the header
2
3) put a background color behind the header
4) make the first and second paragraph the same font size and
color
5) get rid of the border in the second paragraph and put a
background color instead
6) add a new paragraph with other jibberish in it. Create a new style
for this paragraph.
7) finally, make this page look as aesthetically pleasing as you think
you can given what you know right now. You can change any
colors or fonts and can also include images if you’d like.
8) SAVE the css and html and send me the address to your final
version.
Part 2: Positioning
There is a lot going on in the following code, but it will give you a model
to work off of when you’re thinking about positioning and making links.
Open an HTML editor (bbedit or notepad). Open two new documents. In
one document, type the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Any Ol' Title Will Do</title>
<style type="text/css" media="all">@import
url("stylesheet2.css");</style>
</head>
<body>
<div id="container">
<div id="header">
And the Sun Shines Brightly
</div>
<div id="floater">
Change the browser size and notice where I stay. How am I
3
positioned?
</div>
<div id="words">
<p>
Some text. So all of the businesses in their unlimited hell
where they buy and they sell and they sell all their trash to
each other but they're sick of it all and they're bankrupt on
selling. And all of the angels they'd sell off yer soul for a set
of new wings and anything gold. They remember the people
they loved.
</p>
</div>
<div id="navbar">
<ul>
<li><a href="link.html">a link to nowhere</a></li>
<li><a href="link.html">a link to nowhere</a></li>
<li><a href="link.html">a link to nowhere</a></li>
</ul>
</div>
</div>
</body>
</html>
Save this document as sample2.h tml. Now in your o ther
document, type the following:
body {
background-color: #CCCC99
}
#container {
width: 750px;
height: 400px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
#header {
font-size: 50px;
font-weight: bold;
font-family: Geneva, tahoma, sans-serif;
color: #FFCCFF;
position: relative;
4
top: 20px;
left: 15px;
}
#words {
font-size: 18px;
font-family: geneva, tahoma, sans-serif;
line-height: 24px;
color: #FFFFFF;
background-color: #666666;
width: 300px;
position: relative;
top: 50px;
left: 400px;
}
#floater {
position: absolute;
top: 15px;
left: 50px;
background-color: #FFCCFF;
border: 5px #000000;
}
#navbar {
position: absolute;
width: 120px;
top: 150px;
left: 120px;
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
}
#navbar ul {
margin: 0;
padding: 5px;
font-size: 18px;
font-family: sans-serif;
text-align: right;
}
#navbar li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navbar a {
5
color: #999999;
text-decoration: none;
}
#navbar a:hover {
color: #666666;
}
Save this document in the same place as the HTML document but call it:
stylesheet2.css
Preview the HTML document and see how it looks.
Now try to do the following:
visit: http://www.echoecho.com/cssintroduction.htm for help.
visit: http://css.maxdesign.com.au/index.htm for info on making different nav bars
1) play with the top and left tags in the different divs (in the css)
and see where it moves the section in the browser. For example, go
into the CSS and in the #header change the top to 100px and the
left to 50px)
2) get rid of the pink floater (the “how am I positioned” div) in the
HTML and the CSS
3) change the background color of the words div, also change the
font color within this block.
4) make the first and second paragraph the same font size and
color
5) try to make the nav bar look different (see the above link for
info on how to make different navigation bars)
5) change the colors and size of things so that you end up with
what you think is a relative aesthetically pleasing page. Feel free to
add images if you’d like.
6) SAVE the css and html and send me the address to your final
version.
6
