PART A –
CLASSES & DIVS
STEP 1
Add
a class name to the tag inside CSS. You
do this by adding a dot and then the class name after the tag name.
p.class1{color:red}
p.class2{color:green}
STEP 2
In
your <p> tags inside your html document, you must specify the class for
the tag.
<p
class="class1">
or
<p
class="class2">
In
html, replace an <h1> tag by a <div> tag. Make sure you have a class attribute inside the div tag.
The
<div> tag is simply there to allow you to apply CSS rules to areas of
your webpage document.
STEP 4
In
CSS, change the <h1> rule to now apply to <div>. Again, use the class name that you used in
the html document.
STEP 5
In
your html document, replace all <p> and <h#> tags by div tags. Include the attribute class in the div tag.
STEP 6
Change your CSS to work with all div tags.
PART B –
FLOATING IMAGE (FLOATING ELEMENTS)
We
will now add an image with a caption under it.
We will do this without using tables!
Yee haw!
Find
a small image on the internet.
It should be about the size of an icon.
In
your webpage, above your last paragraph, add an image using the <img>
tag.
STEP 8
In CSS, for the img element, add a rule setting the
property float to right.
img
{
float:right;
}
STEP 9
Instead
of making the image itself float to the right, we will make a div float to the
right. We can then add a caption in
that div that will stay with the image.
Get
rid of the img rule in the CSS file.
Inside
the html document, place the img tag inside of a div tag. Place the div tag, place the attribute
class=”icon”.
STEP 10
Inside your CSS document, add the following:
div.icon
{
float:right;
width:120px;
border:2px
solid black;
text-align:center;
color:blue;
}
Add
a caption inside that div tag. You
might need a space between the img tag and the text.
After seeing the results, you should understand what each rule above does.
PART C – COOL
FIRST LETTER
Around the first letter of one of your paragraphs, add:
<div class=”first”>X</div>
STEP 12
In CSS, add the following:
div.first
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
|
The em unit... 1em is equal to the
current font size. 2em means 2 times the size of the current font. E.g., if
an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em'
is a very useful unit in CSS, since it can adapt automatically to the font
that the reader uses. source: http://www.w3schools.com |
PART D –
PLAYING WITH LINKS / HOVER PSEUDO CLASS
STEP 13
We will now work in the opposite order. Lets start with the CSS portion.
We want to create rules for links that will be part of a
menu.
a.menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:pink;
padding:0.2em
0.6em;
border-right:1px
solid white;
}
STEP 14
At
the bottom of your document, make 4 links to any sites you want. Inside the a tags, make sure you add
class=”menu”.
STEP 15
We
will now use the :hover pseudo-class.
The rules in this section are simply applied when the mouse is over the
element.
In CSS, add the following:
a.menu:hover
{
background-color:red;
color:pink
}
PART E –
ABSOLUTE POSITION
STEP 16
In CSS, add a rule for h1.
h1
{
position:absolute;
left:100px;
top:150px
}
STEP 17
In your html document, add
<h1>FUN</h1>
NOTE:
We used an h1 tag here. However,
normally one should use another div for this instead.
Inside
your HTML, add a large amount of text inside a div tag. Give the div tag a class attribute with value
“test”.
Add the following CSS rules for your new div tag.
div.test
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:
scroll;
}
PART G – SET
BACKGROUND
STEP 20
Add an image to your HTML document. Set it’s class attribute to “z”.
STEP 21
In CSS, add the rule:
img.z
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}