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 Layout Techniques Float Layout Why Floats are Used in Web Design

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

font-size in a link

Hello!

I am still working through this code, so please don't mind the unfinished appearance. Anyway, everything was working out until I added font-size:13px to .main-logo a, .main-nav a{...... font-size:13px}.

If you run this code as is, and then remove the font-size:13px property from .main-logo a, .main-nav a{.......}, you will see a huge difference. I wonder why this is happenning? What if I wanted to give my links a font-size? Most importantly why is this happening.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">

<style>
/*=====================================================*/

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}

body{
font: normal 1.1em/1.5 sans-serif;
color:#222;
background:#edeff0;
}
.main-wrapper{
width:90%;
margin: 0 auto;

}
.main-header{
padding:20px;


}

.main-logo, .main-nav, .main-nav li{
display:inline-block;

}
.main-logo a, .main-nav a{
display:block;
padding:10px 20px;
text-decoration:none;
color:white;
font-size:13px;
border-radius:5px;

}
</style>
</head>

<body>
<div class="main-wrapper">
    <header class="main-header group">
    <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav group">
            <li><a href="#">Link1 </a></li>
            <li><a href="#">Link2 </a></li>
            <li><a href="#">Link3 </a></li>
            <li><a href="#">Link4 </a></li>
        </ul>
    </header>

  <div class="container group">
        <div class="primary-content col">
            <h2>Primary Content</h2>

            <img class="feat-img" src="http://lorempixel.com/400/300">  
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            </p>

            <hr/>

            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa 
            </p>
        </div>
        <div id="clear"></div>
</div>

    <footer class="main-footer">

        <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>

4 Answers

Simon Klit
Simon Klit
1,686 Points
Simon Klit
Simon Klit
1,686 Points

Hi Farasylvain,

On line 18 of your code, you set the font to be 1.1em and the line height to be 1.5em. In this case, for your menu items, it translates to an 18 pixel font, with a line height of roughly 26 pixels. In the case of your logo, that one is within an h1 tag, so that's a 35 pixel font, with a line height of 52 pixels (in my browser at least).

When you change the font-size, you do so for the links as well as for the logo. You set them all to 13 pixels, and the line height is then calculated to be 19.5 pixels (again, in my browser). This makes the elements smaller, as they're being sized up by the line height of the text within them.

If you want the smaller text size, you can always kick up the padding (or the line height of the text) of the elements to match the old layout.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Simon,

I set the body's font size to 1.1em = 17.6px and the line-height of 1.5em = 24px

Can you please explain why when I give .main-logo a, .main-nav a a font size of 13px, they all appear the same small size.

Cheers!

Simon Klit
Simon Klit
1,686 Points
Simon Klit
Simon Klit
1,686 Points

Hi Orange, (you just changed your name, didn't you? ;) )

Well, yes. They all appear the same small size because you give them the same small size. 13 pixels is that small, and you just set them all to be 13 pixels. Both the logo and the links. It simply happens because you set both the the main-logo a and main-nav a (on line 37), to have a font-size of 13 pixels. :)

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Simon,

ok, remove font-size:13px from the .main-nav a, .main-logo{.....}. Do you see that .main-logo and .main-nav li have different sizes? I would think they had the same font-size before, but yet the buttons appeared different in thickness.

1) What was the font -size of .main logo a, and .main-nav a before I gave them font-size 13px?

2) why do they have the same width and thickness, after I gave them a font-size 13

oh, yes I did change my name :) It is more colorful :)

Simon Klit
Simon Klit
1,686 Points
Simon Klit
Simon Klit
1,686 Points

Hi Orange,

This is because .main-logo is an h1 tag, which sets to font-size to be 2em, and the font-weight to be bold. Looking in the Google Chrome Development Tools, we find this:

img

The "user agent stylesheet" is what the browser automatically defaults to. You have to more specifically define that the h1 size also has to be 1.1em, and that it's font-weight has to be normal, if that is what you desire.

1) The logo was 2em, and the links were 1.1em. Remember that the logo is an h1 tag, and the links are li elements.

2) They don't. At least not in my browser (might be different in yours. Depending on the user agent stylesheet). The logo text is still bold, and the links are normal. They're the same size, different weight (thickness). img2

That's true, it is. :)

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Simon! Thank you so much for your clear explanation. I have to make it a habit to look at the font section of the web console, for some reason I only look at the box model of my web console. Cheers!