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

You should have finished Codecademy — The Box Model.
This does NOT include “Changing the Box Model”.

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. Your div uses the Box Model. Your img uses the Box Model. Your p and a tags use 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 (e.g. div, img, p, a, h1–6, …). For content to actually display on the page, it needs a width and height which can be (1) inherited from parents or (2) explicitly declared in your CSS.

The parent of a tag is the one that contains it.

<div>
<p>I am a child of the div.</p>
<a href="#">I am another child of the div.</a>
</div>

In Labs 3-I and 3–II, you will learn to apply the Box Model to create buttons. Lab 3–I (this lab) sets up the foundation for buttons. Lab 3-II expands on it.

Cascading Style Sheets

Before we dive into editing the CSS, let’s go over what exactly is CSS. 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 content, a.k.a. giving a div or an p color or size or borders or some sort of style.

Thus, CSS is just having style rules trickle down… but what does that mean? Web browsers (Google Chrome, Mozilla Firefox, …) process your CSS files from the top-down. They start reading from the top of your CSS file and work their way to the bottom of the file, giving the stuff (style declarations) that you put at the bottom of your file greater precedence than the stuff you put at the top. That is because the CSS styles closer to the bottom of the file are “newer” than the ones at the top, so they are treated as more important. In this case we say that the bottom rules override (i.e. replace) the rules above them. 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 we override the color. We grabbed the same selector (.apple) and we overwrote the color with orange because orange is newer (more at the bottom of the page). The apple inherited the blue background of width 100px from above because these CSS properties were not 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

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. We recommend downloading the official solutions to Lab 2 (available here) as starter files for this lab.

The basic idea behind making a button is to have a small bit of text that a user can click on, and to make that text easily detectable. One of the most simple buttons consist of just centered text and a colored border, which is what we’ll make 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 class=”actions” to see what happens to your page. Then add it back in.

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

At this point, open index.html in your web browser and refresh the page. Your button should look like this:

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

Now open up website > assets > css > labs.css file. Locate the #llama selector, and 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 will leave the background transparent:

background-color: transparent;

Now, let’s 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 example: 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 will add:

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

BUT WAIT. What does #6b5393 mean? #6b5393 is a hexadecimal representation of colors on the web. In hexadecimal colors, #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. Feel free to use the color I chose, or choose your own color using the color picker tool linked below. If you use the color picker, pick a color and then copy the 6-digit hexadecimal number that shows up.

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 (denoted by ‘px’), em, or percentages (denoted by ‘%’). Pixels are literal pixels on screen. ‘em’ is relative to the container’s text size. For example, 9.25em says, “make the button at least 9.25 times as big as the button’s text’s font size.” It makes sense to use em here because the size of the button should depend on how large the font size is in the button. Percentage is relative to the container’s box size.

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 line of code:

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 — stuff that underlines the 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 save labs.css and refresh your web browser to check out your button! It should look like this by now. In part II, you will learn about padding and margins, and fix up the button a little more.

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