Lab 3-I: Button I : Box Model Intro + Border

You should’ve finished CodeAcademy #6 The CSS Box Model Understanding the Box Model and Borders sections by now. We’ll finish the other two parts in the next lab.

The box model is an EXTREMELY important concept to understand when working with CSS in that, most if not all, objects are displayed using the box model.

This is an example of how you would view a box model representation of content 158px wide with padding and borders.

In the lesson, you have learned about setting widths and heights for your content. For a content to actually display on the page, it needs a width/height to show up, which can be inherited from parents or you can explicitly tell it.

In Lab 3-I and 3–II, you will be learning how apply the box model to make buttons. Lab 3–I sets up the foundation for buttons where Lab 3-II expands on it. We’re only going to be editing labs.css so open that up in Sublime Text.

By now, you should have your HTML for your website set up with classes and ids assigned (Lab 2 completed). Make sure you have the solutions to Lab 2 or that you have finished Lab 2.

Cascading Style Sheets

Before we dive into editing the CSS, let’s go over what it really means. CSS stands for cascading style sheets, but what does that mean? Let’s break it down. Cascading means something trickling down… like a waterfall cascading over a cliff right? Style sheets are just files containing code for styling something, aka giving something color or size or borders or looks.

Thus, CSS is just having style rules trickle down… but what does that mean? The Browser interprets CSS files from top-down, giving the stuff that you put at the bottom of your file greater precedence than the stuff you put at the top. That’s because the rules at the bottom of the file are “newer” than the ones at the top so they are more important. In this case we say that the bottom rules override (ie replace) the top. For example:

HTML:

<p class="apple"> I'm an apple! </p>

CSS:

.apple {
    width:100px;
color:red;
background-color: blue;
/*At this point, the apple's text color is red and has a blue
background of width 100px.*/
}
.apple {
color:orange;
    /*At this point, the apple's color is orange because it was
overwritten. We selected the same selector (.apple) and we
overrided the color with orange because orange is
newer (more at the bottom of the page). The apple inherited the
blue background of width 100px because it wasn't overwritten. */
}

Click on this link to see the code in action! https://jsfiddle.net/10ht051y/

What happens if you delete color:orange; from .apple? What color is the apple?

Now, we’re going to go into writing CSS.

Lab 3: Making a Button

The basic idea behind making a button is to have a small bit of text that a user will click on, and to make that text easily detectable. The one of the most simple buttons consist of just centered text and a colored border, which is what we’ll be making in this lab from scratch.

Open up index.html, and copy-paste the following bolded code in the right place.

<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Hi, I'm [Name]</h2>
</header>
<p>ELEVATOR PITCH: Here's where you should tell people who you are, what you do, and what you're looking for. No more than 2-3 paragraphs laying out the most important things (if you're not doing a professional page, then set the tone to be [silly/political/academic/whatever] here). Treat it as if it's the only thing people will read before they decide to continue browsing -- it's the 'take away.'</p>
<ul class="actions">
<li><a href="https://www.linkedin.com" class="mybutton">Link To My LinkedIn</a></li>
</ul>
</div>
<span class="image"><img src="images/llama.jpg" alt="" /></span>
</div>
</section>

What does <ul class=”actions”> do? Behind the scenes, we have a class for unordered lists that basically gets rid of the bullet point for lists. This is so your buttons don’t have bullet point next to it. Try removing the <ul class=”actions”> to see what happens to your page. Then add it back in.

In general, all our content is going to be under the id main because all the content is in the main section on your website. Thus, to select the class “mybutton”, we use the selector #main .mybutton .

At this point if you open index.html in Chrome/Safari/Firefox, refresh the page, the button should look like this:

The reason our button looks like this is because we haven’t added any styling yet.

Open up labs.css and above #llama selector copy/paste the bolded:

#main .mybutton {
    /*Inline block gives buttons inline properties except also with
width and height. Basically, we can line up buttons on the same
row and change their height. Neat stuff.*/
display: inline-block;
    font-weight: 300;
    /* height is the height of the button */
height: 2.75em;
    /* line-height sets how tall a text height should be */
line-height: 2.75em;
}
#llama {
border-radius: 50%;
}

These are some attributes to get us started, along with comments that explain what the attributes do.

Now, let’s get coding.

Add the attribute background-color: ; to #main .mybutton{}

You can choose any color you want, but I’m going to choose to leave the background transparent.

background-color: transparent;

Now we need to give the button a border. The two attributes you’ll need are border: pixel color style and border-radius: pixel. I’m sticking with a purple theme, but feel free to change the color/style to suit your needs.

I chose a border-radius of 8px to make rounded corners. The bigger the number, the more ROUND the button is. Play around with the numbers (for ex: 5px or 10px) until you’re satisfied with how round your button is.

Add a border and border-radius attribute to #main .mybutton .
This is what I’m going to add:

border: 1px #6b5393 solid;
border-radius: 8px;

BUT WAIT. What does #6b5393 mean? #6b5393 is a way of representing colors on the web called hexadecimal. In hexadecimal color, #6b5393 is a shade of purple. Basically, using six letters/numbers you can represent any color. However, the only numbers you can use are from 0–9 and the only letters you can use are a-f. In total, hexadecimal colors range from #000000 which is black to #FFFFFF which is white. You can play with hexadecimal colors at this link. Feel free to use the color I chose, or choose a color of your own.

Now, we should give the button a minimum width so that if you shrink the page, it won’t look silly and shrink to a tiny size. Remember that for sizes, you can use pixels, em, or percentages. Pixels are literal pixels on screen. Em is relative to the container’s text size. Percentage is relative to the container’s box size. What 9.25em says is to make the button at least 9.25 times as big as the button’s text size. It makes sense to use em here because the size of the button should depend on how big the font is in the button.

Add the min-width attribute to #main .mybutton

min-width: 9.25em;

Another aspect of the button we can change is the text color.

Add a color to #main .mybutton

color: #6b5393;

I chose #6b5393 because I want to stick with the purple theme.

Almost there! Finishing touches!

For good UI (User Interface), remember that when a user hovers over a clickable object, the cursor should change from default (normal cursor) to pointer (which is the pointed hand cursor).

On the left is the default cursor. On the right is the pointer cursor. Which cursor tells you something is a CLICKABLE link?

Thus, to do so, add this rule to #main .mybutton .

cursor: pointer;

Now we need to center our button’s text with a simple one-liner.

Add this rule to #main .mybutton

text-align: center;

Also, we don’t want clickable buttons to have the dotted underlined decorations on their text (because it looks tacky). Thus, we need to get rid of text decorations (which is stuff like the underline under a text).

Add this rule to #main .mybutton

text-decoration: none;

Finally, we want to nowrap the button because if the button container becomes too small, we don’t want the text pushed out of the container. No wrap means that the text should not wrap around to the next line.

Add this rule to #main .mybutton

white-space: nowrap;

You did it! Now check out your button! It should look like this by now. In part II, you will be learning about padding and margins, and fixing up the button a little more.

(If you want a more solid understanding of colors, you can go back to CodeAcademy Lesson#4: Colors (the one we skipped) or feel free to play with the color picker).

Keep customizing your website to your favorite colors, etc. to make this website YOURS.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.