CSS Tutorial Part 2 - University of Delawareyarringt/103/CSSTutorialPart2.pdf · Save the CSS file...

1

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>

2

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{


width: 295px;

}

Also you can’t see the text, so we better change the font color:

#sidebar{


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 {

3

}

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{


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{


width: 295px;

color: #5E2605;



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{


width: 295px;

color: #5E2605;







padding-left: 10px;

padding-top: 0px;

padding-bottom: 10px;

4

padding-right: 10px;

}

Let’s align everything so that it’s centered:

#sidebar{


width: 295px;

color: #5E2605;







padding-left: 10px;

padding-top: 0px;



text-align: center;

}

and let’s make sure nothing butts too closely up against the left side:

#sidebar{


width: 295px;

color: #5E2605;







padding-left: 10px;

padding-top: 0px;



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

5

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{


width: 295px;

color: #5E2605;



border-right-style: solid;





padding-left: 10px;

padding-top: 0px;



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;

6

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;



}

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;


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:

7

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 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>

8

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-width: 4px;


}

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;



border-width: 4px;


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?

9

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 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 19716

</p>

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:

10

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-width: 8px;


color: #5E2605;

font-size: 150%;

font-weight: bold;

font-style: italic;

font-face: arial, helvetica, sans-serif;

padding: 5px;

padding-left: 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-width: 8px;


color: #5E2605;

font-size: 150%;

font-weight: bold;

font-style: italic;

font-face: arial, helvetica, sans-serif;

padding: 5px;

padding-left: 30px;


position: absolute;

top: 0px;

left: 70px;

}

11

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">


</p>

and add the closing div:

<p id = "contactinfo">


</p>

12

</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-width: 4px;


line-height: 200%;

}

CSS Tutorial Part 2 - University of Delawareyarringt/103/CSSTutorialPart2.pdf · Save the CSS file...

Documents

Transcript of CSS Tutorial Part 2 - University of Delawareyarringt/103/CSSTutorialPart2.pdf · Save the CSS file...