CSS Tutorial Part 2:
So far we’ve added style to formatting elements that xhtml has, such as paragraphs (<p></p>), headers (<h1></h1>), etc.
What if we want to add style to a whole group of elements. For instance, in the html page we’ve been editing so far, what
if we wanted to make the area from right before the “Find out more about giraffes!” down to right below the links ending
with San Diego Zoo: Giraffe into a sidebar, and everything in between could have its own style? We can. This, however,
involves editing the XHTML file by creating a new area for formatting, and then styling that new area. To do this we’ll use
the div tag.
Div Tag (in HTML)
Step 1: Open theXHTMLExampleCss.html file with notepad/textedit for editing.
Step 2: Locate the lines:
<h2>
Find out more about giraffes!
</h2>
Right above the <h2> opening tag, we’re going to create our own tag for styling. We start the creation of our own
tag with <div… and then add a unique name, or id. I will call this tag “sidebar”.
My html code now looks like this:
<div id = “sidebar”>
<h2>
Find out more about giraffes!
</h2>
To specify the end of the area that we wish to style, scroll down until you hit the end of the links inside the
paragraph. The code looks like:
<a href = "http://www.sandiegozoo.org/animalbytes/t-giraffe.html" id =
"link4">San Diego Zoo: Giraffe
</a><br/>
</p>
Add a closing div tag to end the sidebar div. Your code should now look like this:
<a href = "http://www.sandiegozoo.org/animalbytes/t-giraffe.html" id = "link4">San Diego Zoo: Giraffe
</a><br/>
</p>
</div>
1
Step 3: Save your xhtml file.
Styling a Div Tag:
Now let’s go edit the “sidebar” style in css.
Step4: In the tutorial.css file, add a style for the sidebar div. To do this, you should add the following:
#sidebar{
}
And let’s give the sidebar a different background color so that you can see what all is being affected. modify the
style so that it now looks like:
#sidebar{
background-color:#FFFF66;
}
Save the tutorial.css and reload the xhtml file in the browser to see what it looks like now. You can see what area
is affected by the sidebar style.
width:
For a sidebar, it’s awfully wide, so let’s give the sidebar a width:
#sidebar{
background-color:#FFFF66;
width: 295px;
}
Also you can’t see the text, so we better change the font color:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
}
Save the CSS file and reload the html file in the browser to see what we’ve got so far.
Styling a tag within a div tag
Notice that you still can’t see the text, even though we changed the color property in the sidebar style.
That’s because we’ve already set the paragraph (p) style such that the font color is #FFFF66. The <p>
tag in the sidebar is located INSIDE the <div id = “sidebar”> tag in the XHTML file (e.g., between <div id
= “sidebar”> tag and the </div> closing tag, we’ve got <p> tags). The style of the innermost tag wins.
So what can we do about this? Create a style for <p> tags inside the <div id = “sidebar”> tag. To do this
we create a style:
#sidebar p {
2
}
and add a color to the sidebar paragraphs now:
#sidebar p {
color: #5E2605;
}
Back to the overall sidebar style: Let’s first give it a border:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
}
Styling the sides of an element differently:
And let’s adjust the border so that it’s different widths on different sides:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
border-right-width: 4px;
border-top-width: 4px;
border-left-width: 8px;
border-bottom-width: 8px;
}
Let’s adjust the padding (the space between the text and images and the border) so that we’ve got a bit of
padding on 3 sides:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
border-right-width: 4px;
border-top-width: 4px;
border-left-width: 8px;
border-bottom-width: 8px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
3
padding-right: 10px;
}
Let’s align everything so that it’s centered:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
border-right-width: 4px;
border-top-width: 4px;
border-left-width: 8px;
border-bottom-width: 8px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
text-align: center;
}
and let’s make sure nothing butts too closely up against the left side:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
border-right-width: 4px;
border-top-width: 4px;
border-left-width: 8px;
border-bottom-width: 8px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
text-align: center;
margin-left: 25px;
}
Save the css file and reload your html file.
Float
Looks pretty good, but did ya notice the big gaping space to the right of the sidebar? We probably want the text
and images below the sidebar to float up and around the sidebar. To do this we float the sidebar, and the text
below it will flow up around it. I choose to float the sidebar to the right, but you can float elements to the left as
4
well. When you float an element, the text and images below the element will flow up into the blank spaces
surrounding the element. Try it:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
border-right-style: solid;
border-right-width: 4px;
border-top-width: 4px;
border-left-width: 8px;
border-bottom-width: 8px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
text-align: center;
float: right;
}
Background-repeat
Finally, let’s add a background image to just the sidebar.
a. Download from my web site giraffesb.jpg and place it in the same folder as tutorial.css and the html file.
b. add it to the sidebar style as a background image:
background-image: url(giraffesb.jpg);
Awfully busy, huh. We probably don’t want it to tile throughout the entire background (although sometimes
people do pick images with very low contrast and tile it throughout the background). But for our purposes, we
don’t want it to fill the whole sidebar.
b.1 First, let’s try adding to the sidebar style:
background-repeat: repeat-x;
background-position: top;
Save the css and reload the html file. Now the image should repeat across the top. Still not what we wanted (but
it could be).
b.2 We can try having it run down the side:
background-repeat: repeat-y;
background-position: right;
5
What I think we want, though, is for it to just occur once in the top left corner.
b.3 (Final) modify the sidebar style with the following:
background-repeat: no-repeat;
background-position: top right;
b.4 Save the css and reload the html. The giraffe should be peaking his head in from the side right in the sidebar.
Now I don’t like the header in the sidebar, so I’m going to modify the sidebar’s <h2> style:
c. Add a style for the sidebar’s h2 tag:
#sidebar h2 {
}
d. change the sidebar h2’s font color and font size, the line height (the space between lines), the alignment, and
the padding around the h2 text:
#sidebar h2 {
color: #5E2605;
font-size: 245%;
line-height: 145%;
text-align: left;
padding: 2px;
padding-top: 25px;
padding-right: 65px;
padding-bottom: 15px;
}
e. save the css and reload the html file.
f. Let’s modify the paragraphs in the sidebar a bit – I want the text spread out a bit more, so I’ll modify the line
height. I also want more space between the picture of the giraffe and the top of the text:
#sidebar p {
color: #5E2605;
line-height: 170%;
padding-top: 15px;
padding-bottom: 5px;
margin: 0px;
}
Links
Now the links stand out. We might want to style them as well. We can style everything about a link that we can
style about everything else – border, background-color, padding, font color, etc. We can style the:
6
link (before we’ve visited the page the link links to
visited (the style of the link after we’ve visited the page)
hover (what the link looks like when we run our mouse over it)
a. Modify the link: (note: no space between a:link)
a:link {
color: #AA1300;
font-size: 110%;
}
b. Modify the visited links:
a:visited {
color: #649900;
font-size: 110%;
}
c. Modify the links when hovered over by the mouse:
a:hover {
color: #FF3300;
font-style: italic;
font-size: 120%;
}
d. Save the css file and reload the html file. Play with the links a bit.
Using Auto to center content of page:
A few final things I’d like to fix with this page.
1. Right now in the browser, if I make the browser window wider, everything slides around. I think I want to set
the width of the page, and then center the content. To do that I must first add another div to the entire content
of the html page.
Step 1: Open theXHTMLExampleCss.html file with notepad/textedit for editing.
Step 2: right below the opening body tag add the following div tag:
<body>
<div id = “pagecontent”>
…
Step 3: Scroll down to the bottom of the XHTMLExampleCss.html page. Right above the closing body tag add the
close to the div tag
…
</div>
</body>
</html>
7
Step 3: Save the XHTMLExampleCss.html page.
Step 4: In tutorial.css, add the following to style the pagecontent div:
#pagecontent {
}
Step 5: set the width
#pagecontent {
width: 950px;
}
Step 6: Give the pagecontent a background color, text color, and a border:
#pagecontent {
width: 950px;
color: #FFFF66;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #778877;
}
Step 7: Save the css file and reload the XHTMLExampleCss.html page in the browser.
Now resize the browser by making it wider and narrower. Notice how the page just stays at the left side, and
doesn’t automatically center itself. I want it to center itself. I can’t specify how many pixels in the margin’s left
and in the margin’s right, because the number of pixels depends on the total width of the browser window (which
keeps changing every time you resize the window). Equally I can’t use a percent value because, again, I don’t
know how wide the browser will be and thus I don’t know how much of the total area the pagecontent div will
take up. What I can use is auto:
step 8: Add to the pagecontent style: margin-left: auto; and margin-right: auto;
#pagecontent {
width: 950px;
color: #FFFF66;
background-color: #664433;
border-style: solid;
border-width: 4px;
border-color: #778877;
margin-left: auto;
margin-right: auto;
}
Step 9: Save the css file and reload the XHTMLExampleCss.html page in the browser. Now try resizing the
browser. See how the page content stays in the center of the page, no matter how wide you make the page?
8
Clear
In the browser, scroll down to the bottom of the page. Probably the sidebar and the page content are different
heights. I want to make a bar across the bottom of the page with my name and address in it, and I want the bar
to run under the sidebar. To do this, I must first create yet another div tag in the html code:
Step 1: Open theXHTMLExampleCss.html file with notepad/textedit for editing.
Step 2: Scroll down to the bottom. inside the <p> D. Yarrington, 1313… </p> paragraph, add the following id tag:
<p id = “contactinfo”>
D. Yarrington, 1313 Mockingbird Lane, Newark, DE
</p>
19716
Step 3: Save the XHTMLExampleCss.html page.
Step 4: In tutorial.css, add the following to style the contactinfo id:
#contactinfo {
background-color:#003322;
color: #FF2200;
text-align: center;
margin: 0px;
padding: 3px;
}
Step 5: Save the css file and reload the XHTMLExampleCss.html page in the browser. Scroll down to the bottom.
The bottom contactinfo div flows under the floating sidebar. This isn’t what we want. To make sure the
contactinfo div clears the sidebar, we need to use the clear style. Since the sidebar is to the right, we’ll use clear:
right:
#contactinfo {
background-color:#003322;
color: #FF2200;
text-align: center;
margin: 0px;
padding: 3px;
clear: right;
}
Step 6:Save the CSS file and reload the html file. Scroll to the bottom. Now the bottom contactinfo style should
clear the bottom of the sidebar.
Adding Absolute Positioning:
Absolute positioning is different from the way we’ve positioned elements on the page so far – it is as if we’ve
placed the element on top of the page in a specific place and it stays there. Everything else on the page will flow
under the element (not around it). You might use absolutely positioned elements to add something last-minute
that grabs the user’s attention. To get a feel for what I mean, let’s add an element and then position it
absolutely:
9
Step1: In the XHTMLExampleCss.html file, scroll to the bottom. Right above the </body> tag let’s add one more
element:
<div id = "absolutetag">
<p> Check out the <a href = "http://www.sandiegozoo.org/"> zoo! </p>
</div>
</body>
</html>
Step2: Save and close XHTMLExampleCss.html Bring it up in your browser and look at where the absolutetag
element is located (it should be at the very bottom).
Step 3: Add some style to the absolutetag element: Open tutorial.css. Add (nothing we haven’t seen before so
far):
#absolutetag {
border-style: solid;
background-color: #778877;
border-width: 8px;
border-color: #996633;
color: #5E2605;
font-size: 150%;
font-weight: bold;
font-style: italic;
font-face: arial, helvetica, sans-serif;
padding: 5px;
padding-left: 30px;
padding-right: 30px;
}
Step 4: Save tutorial.css. Reload XHTMLExampleCss.html into the browser and see what it looks like. Not exactly
where we might want this. Instead, let’s position this element at the top of the page, (0 pixels down from the
top) and maybe 70 pixels over from the left. First you should tell the browser that the element is positioned
absolutely, and then the top and left position:
position: absolute;
top: 0px;
left: 70px;
So your style should now look like this:
#absolutetag {
border-style: solid;
background-color: #778877;
border-width: 8px;
border-color: #996633;
color: #5E2605;
font-size: 150%;
font-weight: bold;
font-style: italic;
font-face: arial, helvetica, sans-serif;
padding: 5px;
padding-left: 30px;
padding-right: 30px;
position: absolute;
top: 0px;
left: 70px;
}
10
Step 4: Save your css file and reload the html file in the browser. Note that the element is now positioned at the
top.
Step 5: Resize your browser a few times. Notice how the element stays exactly 0 pixels down and 70 pixels from
the left, while other elements slide around. Notice also how other elements slide UNDER the absolutely
positioned element.
Finale:
That’s pretty much it. If you want to perfect the details, you might want to make the text float around the image
of the mom and baby giraffe:
Step1: In the XHTMLExampleCss.html file, find the image of the momma and baby giraffe. Find the id associated
with that picture. In this case, it’s giraffeimage. Now in the css file, make a style for giraffeimage. Make the text
below it float around it by using float: left. And then add some margin space so there’s space between the image
and the text:
#giraffeimage {
float: left;
margin-right: 20px;
margin-bottom: 10px;
margin-top: 5px;
margin-left: 0px;
}
Step 2: Save the css and reload the html in the browser.
Notice how the border around the center content from “Description” all the way down through the last
paragraph “Giraffes are non-territorial…” doesn’t quite line up with the other borders. To make it line up:
Step 3: In the XHTMLExampleCss.html file, add yet another div tag. Find the lines,
</div>
<h2>Description</h2>
and add the line:
</div>
<div id = “rest”>
<h2>Description</h2>
Step 4: Scroll down to the lines,
<p id = "contactinfo">
D. Yarrington, 1313 Mockingbird Lane, Newark, DE
</p>
and add the closing div:
<p id = "contactinfo">
D. Yarrington, 1313 Mockingbird Lane, Newark, DE
</p>
19716
19716
11
</div>
Step 5: Save the HTML file
Step 6: in the CSS file, add a style for the rest tag, add a solid, 4px
border. Add a line-height of 200% as well:
#rest {
border-style: solid;
border-width: 4px;
border-color: #778877;
line-height: 200%;
}
12