CSS Tutorial Part 2:
So far we’ve added style to preexisting xhtml tags, such as paragraphs (<p></p>), headers (<h1></h1>), etc. We can also
create different elements to be styled. In this tutorial, you’ll be learning about 3 different ways to create your own
elements and then create a style for them.
Specifically, what if you want to set a style for all the elements within one section of a web page (e.g., the header, the
paragraphs, the lists, the links, etc. in a side panel on a web page). You can do that using “div” tags.
What if you want to style one paragraph (or header, or list, etc) differently than all the other paragraphs (headers, lists,
etc)? You can do that by giving a paragraph it’s own id and then giving a style to that id.
Finally, what if you want to style a bunch of nonsequential elements throughout the web page with the same style? You
can do that using classes and then styling the class.
All of these new styling elements involve editing and adding to your web page, not just your css style.
NOTE: every id MUST BE UNIQUE on your web page. A class can exist many times throughout the web page.
Let’s start with Div tags.
____________________________________________________________________________________________________
Div Tag (in HTML)
Div tags allow you to section off parts of your html. You place div tags around the area in your html page you want to
style. So first, you must edit the html page.
Step 1: Open theXHTMLExampleCss.html file 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. For this tutorial, give your div the id of “sidebar”.
The html code should now look like this:
<div id = “sidebar”>
<h2>
Find out more about giraffes!
</h2>
Step 3: We must close this div tag after all the elements we want to be styled similarly. 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:
1
<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>
Step 3: Save your html file. Your html code now has another element you can add style to. It is your div tag, with the
identity of “sidebar”.
Now you can give the “sidebar” div style in your css stylesheet.
Step4: In the tutorial.css file, add a style for the sidebar div. To do this, you should add the following:
#sidebar {
}
And 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. You can style the width any element by either specifying the number of pixels
wide you want it, or by specifying the % of the page you want it to be. For now, you’ll use the pixel width to
specify the width:
Step 5: specify the width of the sidebar style:
#sidebar{
background-color: #FFFF66;
width: 295px;
}
Step 6: We can’t see the font color, so let’s change it:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
}
Save the CSS file and reload the html file in the browser to see what you’ve got so far.
2
To be safe, validate your css stylesheet by going to:
http://jigsaw.w3.org/css-validator/
and validating the stylesheet. If you don’t get error messages, your page is valid.
Styling an element just within a div element
Notice that you still can’t see the text, even though you changed the color property in the sidebar style. That’s
because you’ve already set the paragraph <p> style in your css stylesheet to have a font color that is olive. The
<p> tag in the sidebar is located INSIDE the <div id = “sidebar”> tag (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 you do about this? Create a style for all the <p> elements inside the <div id = “sidebar”> element
that is different from your general style definition for the other <p> elements on the web page.
Step 7: To do this you’ll create a style specifically for paragraphs within the “sidebar” create a style:
#sidebar p {
}
and add a color to the sidebar paragraphs now:
#sidebar p {
color: #5E2605;
}
I may also want to add some padding, set the margin to 0, and put a bit of line height between the lines in my
sidebar paragraphs:
#sidebar p {
color: #5E2605;
line-height: 170%;
padding-top: 15px;
padding-bottom: 5px;
margin: 0px;
}
Save your css stylesheet and reload the html page in the browser. Which paragraphs changed style based on the
style we just created?
Step 8:. I’m also going to change the style of the h2 tag for the sidebar element (and JUST the sidebar element).
I’m going to 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;
}
3
Save the css and reload the html file.
Step 9: 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;
}
Step 10: 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;
}
Step 11: 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;
padding-right: 10px;
}
Step 12: Let’s align everything so that it’s centered:
#sidebar{
background-color:#FFFF66;
width: 295px;
color: #5E2605;
border-style: solid;
border-color: #778877;
4
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;
}
Step 13: 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. To be safe, validate your css stylesheet by going to:
http://jigsaw.w3.org/css-validator/
and validating the stylesheet. If you don’t get error messages, your page is valid.
__________________________________________________________________________________________________
Class Tags
We’ve now seen how to style a particular area in your html page by surrounding that area with a div and then giving that
div an id and giving a style to that id. But what if you want to create one style and then apply that style to different
elements scattered throughout your web page. For instance, what if you wanted to create a style for emphasized, and
then use that style for everything that you’d like emphasized throughout your web page? What if you have a page that
focuses on animals, and want to make sure all paragraphs that have to do with ferrets have a particular style so your
readers know where to focus quickly if they’re looking for info on ferrets (or more realistically, if you have certain
paragraphs on how to donate money and want readers to have no problem finding those paragraphs)? What if you want
every third paragraph in your web page to have a rainbow background with chartreuse text (please tell me you’d never
want that, but you get the idea that the possibilities are limitless).
You can do all of these things using class tags. Let’s add some class tags to your html file and then style it:
Step 1: Open the giraffes.html file for editing
5
Step 2: Locate 2 different elements:
<p >
But one thing we can not <em>ignore;</em><br>
I've thought of this oft times <em>before.</em><br>
How dreadful if their throats got <em>sore!</em><br>
<strong>Those lengthy necked giraffes.</strong>
</p>
(In the top sidebar)
<ul >
<li> savannahs
</li>
<li> grasslands
</li>
<li> open woodlands
</li>
</ul>
(in the middle)
Let’s make these 2 different (and very separate elements) all be part of the class, “important”). To do that, we
must first modify the elements’ tags so that they include their being members of the class “important”. We do
that as follows:
Step 3: Make each of these elements be part of the class “important”. Add class = “important”, so that your code now
looks like this:
<p class = “important”>
But one thing we can not <em>ignore;</em><br>
I've thought of this oft times <em>before.</em><br>
How dreadful if their throats got <em>sore!</em><br>
<strong>Those lengthy necked giraffes.</strong>
</p>
(In the top sidebar)
<ul class = “important”>
<li> savannahs
</li>
<li> grasslands
</li>
<li> open woodlands
</li>
</ul>
(in the middle)
Step 4: Save your html file.
Step 5: Now we need to add a style to your css file for “important”. Open the css stylesheet.
Step 6: Add the following:
.important {
}
6
This is where the style information for the class “important” will go.
Step 7: Add some style. Make the font-weight be bold, the font-style be italic, and the font color be #432211. So your
style will look like this:
.important {
color: #432211;
font-weight: bolder;
font-style: italic;
}
Step 8: Save your css file and reload the html file in the browser. See the “important” class style effects?
To be safe, validate your css stylesheet by going to:
http://jigsaw.w3.org/css-validator/
and validating the stylesheet. If you don’t get error messages, your page is valid.
____________________________________________________________________________________________________
ID to pre-existing elements
Finally, what if you want to just make one particular element have its own unique style? What if you have one paragraph
that sums up your entire web page and you want to make sure others pay attention to it? What if you want just one
header to have a strange color to make your entire page quirky and artistic? What if you want the contact information to
have its own special style? You can do that by giving a unique id to a preexisting element. We’re (of course) going to do
that now.
Step 1: Open giraffes.html for editing. Locate the following code (at the bottom of your html page)
<p >
D. Yarrington, 1313 Mockingbird Lane, Newark, DE
</p>
Step 2: let’s give this paragraph its own unique id as follows:
<p id = “address”>
D. Yarrington, 1313 Mockingbird Lane, Newark, DE
</p>
Step 3: Save your html file.
19716
19716
Step 4: Now let’s give your new element its own style. Open your css stylesheet.
Step 5: create a style for the address element: Add:
#address {
background-color: #003322;
color: #FF2200;
text-align: center;
margin: 0px;
padding: 3px;
}
7
Step 6: Save your css file and reload the html file in the browser. Notice the address paragraph’s style at the bottom of the page.
To be safe, validate your css stylesheet by going to: http://jigsaw.w3.org/css-validator/
and validating the stylesheet. If you don’t get error messages, your page is valid.
____________________________________________________________________________________________________
More on Background images:
Background-repeat (tiling throughout, repeating across the top (or down the side,
or not repeating at all)):
You’ve added background images as part of style elements. The default is for the background image to “tile” or repeat
both across and down, until it fills the element. To see an example of that, do the following:
Step 1 Download from my web site giraffesb.jpg and place it in the same folder as the html file and the css stylesheet
you’re creating.
Step 2 Add it to the sidebar style as a background image:
background-image: url(giraffesb.jpg);
Your sidebar style should now look like this:
#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;
background-image: url(giraffesb.jpg);
}
Step 3: Save the css stylesheet and reload your html page in the browser. That’s tiling.
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.
Step 4a. First, let’s try tiling the background image just across the top. Add to the sidebar style:
background-repeat: repeat-x;
background-position: top;
8
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).
Step 4b. We can try having it run down the side by changing the sidebar’s style to:
background-repeat: repeat-y;
background-position: right;
Save the css and reload the html file to see what this looks like.
What I think we want, though, is for it to just occur once in the top left corner.
Step 4c (Final) modify the sidebar style with the following:
background-repeat: no-repeat;
background-position: top right;
Step 5 Save the css and reload the html. The giraffe should be peaking his head in from the side right in the sidebar.
Step 6: Let’s add a tiled background image to the body’s background. Download from my webpage “spotsbg.jpg”.
Step 7: Add to the body’s style:
body {
background-color: beige;
font-size: small;
font-family: arial, helvetica, sans-serif;
background-image: url(spotsbg.jpg);
}
Step 8: Save your css file. Reload your html page. Do you like the spots tiling throughout
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
__________________________________________________________________________________________________
Positioning:
You can position elements on your web page using both html techniques and css techniques. One of the easiest ways to
position elements is to use an html table (which you saw and worked with in the html tutorial).
You can also use CSS to position elements. You can use float, or you can position absolutely or relatively. Let’s start with
float:
Float
Did you 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 well.
NOTE: When you float an element, the text and images below the element will flow up into the blank spaces surrounding
the element. Only those elements below your floated element flow up. Anything above will not flow down. This means
on occasion you may need to rearrange your html code!
Step 1: Open and locate your #sidebar style in your css stylesheet.
9
Step 2: Add the float to the sidebar style:
#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;
margin-left: 25px;
background-image: url(giraffesb.jpg);
float: right;
}
Step 3: Save your css stylesheet. Reload your html page in the browser. See how everything below the sidebar div
element in your html page now flows up to the left of the sidebar?
Now look at the page. Notice the image of the momma giraffe nudging her little one. Right now there’s a huge space to
the left of this image, and then the text starts again right at the bottom of the image. Wouldn’t it be nice to have the text
below the image flow up to the right of the image, so the image looks like it’s more integrated into the page? We can,
using float!
But first we must find out what the unique id of the image is.
Step 4: Open your html file for editing. Now find the code that inserts the image of the momma and baby giraffe. Find the
id associated with that img. 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 5: Save the css and reload the html in the browser. Notice how the bottom address style flows into the sidebar. This
is okay, but you might want this to flow all the way across the page, and to clear the sidebar (e.g., flow under the sidebar).
To do this, we’ll use the “clear” style:
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
Clear
Step 6: In your css stylesheet, find the style for “address” In tutorial.css, add the following to style the contactinfo id:
10
#address {
background-color: #003322;
color: #FF2200;
text-align: center;
margin: 0px;
padding: 3px;
clear: right;
}
Step 7: Save the CSS file and reload the html file. Scroll to the bottom. Now the bottom address style should clear the
bottom of the sidebar.
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
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:
Step1: We’re first going to add another <div> element to the html code. The <div> tag will surround the html code we
want to position absolutely. So open your html file for editing.
Step 2: In the html file, scroll to the bottom. Right above the </body> tag let’s add a new div element (we’re adding the
link as well):
<div id = "absolutetag">
<h4> Check out the <a href = "http://www.sandiegozoo.org/"> zoo! </h4>
</div>
</body>
</html>
Step3: Save and the html file. Bring it up in your browser and look at where the absolutetag element (the zoo link) is
located. It should be at the very bottom of the web page.
Step 4: Add some style to the absolutetag element: Open your css stylesheet. 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-family: arial, helvetica, sans-serif;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
}
Step 5: Save the css stylesheet. Reload your html page 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:
11
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-family: arial, helvetica, sans-serif;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
position: absolute;
top: 0px;
left: 70px;
}
Step 6: Save your css file and reload the html file in the browser. Note that the element is now positioned at the top.
Step 7: 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.
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
Using Auto to center content of page:
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 the html file 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 html page. Right above the closing body tag add the close to the div tag
…
</div>
</body>
</html>
Step 4: Save the html page.
Step 5: In tutorial.css, add the following to style the pagecontent div:
#pagecontent {
}
Step 6: set the width
12
#pagecontent {
width: 950px;
}
Step 7: Give the pagecontent a background color, text color, and a border:
#pagecontent {
width: 950px;
color: #FFFF66;
background-color: #664422;
border-style: solid;
border-width: 4px;
border-color: #778877;
padding: 10px;
}
Step 8: Save the css file and reload the 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 9: 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;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
Step 10: Save the css file and reload the 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?
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
__________________________________________________________________________________________________
Links
We might want to style our links 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:
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)
Step 1: Open your css stylesheet.
Step 2: Add a style for the basic (unvisited) link (note: no space between a:link):
a:link {
color: #AA1300;
font-size: 110%;
}
13
Step 3: Now add a different style for links you’ve visited)
a:visited {
color: #649900;
font-size: 110%;
}
Step 4: Now (and this is cool) add a style for links when you hover the mouse over them):
a:hover {
color: #FF3300;
font-style: italic;
font-size: 120%;
}
Step 5: Save the css file and reload the html file. Run your mouse over a link. See what happens.
Click on one, then go back to the web page and see what it looks like. Feel free to play with the links a bit.
Add a background color or image to the “hover” style. Couldn’t you have fun with this?
Validate your css stylesheet by going to:http://jigsaw.w3.org/css-validator/ and validating the stylesheet. If you don’t get
error messages, your page is valid.
New with CSS 3:
Note: These are two new style elements available with the latest version of css3. Almost all browsers will display them
properly unless you’ve got a very old browser, but last I checked they didn’t validate.
border-radius – border radius allows you to have a curved border. To use:
border-radius: 15px;
box-shadow – this allows for a drop-shadow around your object. To use:
box-shadow: 10px 10px 5px #888888;
This gives you a shadow that’s 10 pixels horizontal offset, 10 pixels vertical offset, and 5 pixels blur, with a gray color. To
learn more about your box-shadow options (You can have an inner shadow!), visit:
http://www.css3.info/preview/box-shadow/
opacity – this allows you to set the opacity of an object. However, note that if you set the opacity of an object, every
object on top of that will also start with that opacity. So, for instance, if you set the body’s opacity to be 50%, and then set
the paragraph’s opacity to be 100%, the paragraph’s opacity will be 100% of the 50%, or also 50%. It can get a little
frustrating. To use:
opacity: 0.4;
Other info about CSS3:
http://www.css3.info/preview/
____________________________________________________________________________________________________
Congratulations! You’re done with basic html tags and styling elements! Now use this knowledge and
create an amazing web site.
14