Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Values and Units Absolute Length Units

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Why is my web page different to Guil's?

Hi.

I've typed in the HTML and CSS exactly as Guil did, but all I get is the change in font-size. Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Absolute Length Units</title>
    <link rel="stylesheet" href="css/css_foundations_style.css">
</head>
<body>
    <h1>Absolute Length Units</h1>
    <div class="cm">
        Centimetres
    </div>
    <div class="mm">
        Millimetres
    </div>
    <div class="in">
        Inches
    </div>
    <div class="pcs">
        Picas
    </div>
    <div class="pts">
        Points
    </div>
    <div class="px">
        Pixels
    </div>
</body>
</html>

And my CSS:

/* Absolute Length Units */

.cm {
    width: 21.16cm;
}

.mm {
    width: 211.6mm;
}

.in {
    width: 8.33in;
}

.pc {
    width: 50pc;
    font-size: 2.4pc;
}

.pt {
    width: 600pt;
    font-size: 28.4pt;
}

.px {
    width: 800px;
    font-size: 38px;
}

I'd appreciate any help.

2 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

You probably won't see any width difference in the div's because each of those values are equivalent to each other so they should all be the same width. To test everything is working I would change the background color of each div and apply different widths so you can see the changes.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Keith.

I noticed that Guil's CSS doesn't contain any background colour commands, but his web page has different background colours nevertheless. I think that's what threw me. I wonder where he got those colours from.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

It looks like in the video he is linking to another css file called page-styles.css. I am assuming that he applied all of the colors to this file but didn't review it in the video because it wasn't part of the subject matter.

Alan Massie
Alan Massie
14,976 Points
Alan Massie
Alan Massie
14,976 Points

Hi Sean,

In your HTML doc the class for picas and points has an s at the end (ie) pcs and pts - but in your css file they are named pc and pt. Let me know how you get on after altering the class names.

Alan

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Alan.

Very sorry for the delay in getting back to you. I deleted the s's at the end of the last 2 classes and the words 'picas', 'points', and 'pixels' are now larger in font size, although there's still no colour.

Thanks for putting me right about the s's.

Sean