Borders, Colors, Fonts, etc. - Chapter 4

➜ Chapter Booklet HERE

Borders, Colors, Fonts and The Box Model

Now let’s get into some serious styling. There are so many things you can do with CSS and just knowing some fundamentals about important properties can help you really develop your website.

If you remember, we took a look at developer tools in our last course. These tools allow you to access the Document Object Model that is created by browsers for every webpage. We noticed, in those tools, that everything we put in our HTML file was a box when examined within the tools.

Well, this is how the browser renders the elements we created and we are able to style just about anything as it relates to these boxes...their width, height, background color, text, etc. If you think of a box, there is an outside container (a border that may or may not be very thick), there is content inside of the box, there could be padding around that content and there may be a need for space between that box and the other boxes/content around it.

Box

When you think about it, there can be margin all around the box, there can be a border all around the box, there can be padding all around the content that’s within the box and you can’t forget to add in the content itself, when you want to account for how wide or tall the box is. This approach is called the Box Model. We won’t get into the various ways you can add up the height or width of an element’s box. For right now I think it’s important to understand the concept and to get accustomed to writing rules.

  • So there could be a top margin, right margin, bottom margin and left margin.

  • There could also be a top, right, bottom and left border and top, right, bottom and left padding.

You can establish these properties for just about any HTML element you put on your website.

In order to manage these properties you have to assign values to them. These values can be expressed in specific fixed or relative units.

Let’s take a look at two popular units that are often used when values like these need to be assigned.

Units: Pixels and Ems

If you are familiar with the concept of pixels, then you know that pixels are areas of a screen, or a picture, that are illuminated or colored in some way.

Since a pixel is a specific area of illumination, it can be used to help space and lay out a website’s content on a computer’s screen.

You can size the content of your box (i.e., think box model with margins, padding, etc.) by using pixels as a way of spacing your content or even setting font-size.

h1 { font-size: 29px

}

But what if the screen size changes because users view your website on different-sized screens? Or what if you wanted an easier way to make your font proportional to other fonts on your site?

Enter relative units. The most common types of relative units you will likely use are em or rem (“root em”).

These types of units derive their size from the font-size of their root or parent element. An em is literally the size of the capital letter M for the font you are using for your website.

If the <body> element is set at 1em for its font-size, then the <p> element (that’s directly within the <body>) that has 2em as it font-size will have text that is twice as large.

p { font-size: 2em;

}
Some examples of relative and fixed ways of assigning units are below.

  • Fixed units: pt, px

  • Relative: em, rem, %

There are many more units you can use, but we will stick with these for right now.

Borders, Margins & Padding

As we know borders, margins and padding can have top, right, bottom and left values. To display a border you should have the following established: border- style, border-color and border-width.

p {
border-top: solid red 4px; 

border-right: solid red 4px; 

border-bottom: solid red 4px;

border-left: solid red 4px;

}

This would establish a solid red border that’s 4px wide around ALL <p> elements in our document.
Of course there is a shorthand way of doing this:

p{
border: solid red 4px;

}

This would do the exact same thing on all sides.

If I wanted to add some padding, I could write: 

p {

padding-top: 40px; 

padding-right: 30px; 

padding-bottom: 40px; 

padding-left: 30px;

}

But, of course, there is also a shorthand way:

/*Padding for all four sides = 40px/

padding: 40px;

/*Padding for top & bottom = 40px and right & left = 90px*/

padding: 40px 90px;

/*Padding for top = 40px, right & left = 90px and bottom = 30px*/

padding: 40px 90px 30px;

Listing four values would correspond to the top, right, bottom and left respectively (in clockwise fashion).

Fonts

There is a lot you can do with the fonts on your webpage and several properties that you can assign to them: font-size, font-style, font-family, font-weight, etc.

When it comes to font-size, you can use either fixed or relative units, but relative units might be more helpful.

body {
font-size: 1em;

}

p {
font-size: 3em;

}

This would set the font size of all <p> elements to 3 times the default size of their parent elements. Most browsers have a default font size of 16px =1em. So if the <body> is set at the default 16px or 1em, the <p> within the <body> would be 3 times as large (or 48px). If I wanted to adjust any element’s font-size that was based off of the <body>, I could adjust the <body>’s font-size and the other elements would respond.

Choosing the type of font you want is also important. There are specific fonts that you can choose and generic categories of fonts that are useful to know.

Sans serif - fonts without certain extensions at the ends of letters (e.g., Arial, Helvetica)—these are preferred for the Web.

Serif - fonts with specific extensions at the ends of their letters (i.e., Times, Georgia, etc.)

Monospace, cursive and fantasy are three other generic fonts.

To designate the font for your website, you should first choose a specific font family then choose the generic family that corresponds to that font (just in case the user does not have that specific font-family on their computer).

body {
font-family: Helvetica, Arial, sans-serif;

}

Colors

Colors make a website come alive and there are several ways you can add color to your website.

(RGB) Red Green Blue

If you have ever done an experiment with mixing colors, then you know that many of the colors we use are actually mixtures of other colors. The same is true in computer science. One of the basic ways of determining what color you want to use is to designate the red, green and blue values of the color you want (i.e., RGB).

To do this you put three values inside of parentheses like this:

rgb(200, 200, 20)

This will give you a kind of pale greenish-yellow. So rgb values are expressed via the numbers 0 - 255, with rgb (0, 0, 0) being black and rgb (255, 255, 255) being white...and any combination between those two extremes can be used (which is > 16 million colors).

Hexadecimal

Hexadecimal values have the number 16 as their base instead of 10. In other words, there are 16 possibilities you can put in each slot.

You still have red (in the first two slots), green (in the second two slots) and blue (in the last two slots). You can fill each of these slots with the numbers 0 - 9 or the letters a - f. That’s sixteen different values that can go in any one of the slots. So six 0’s, #000000, would be the color black and six f’s, #ffffff, would be white.

Finally, you can use simple color names in CSS.

body {
color: blue;

}
or color: rgb(0, 0, 255);

or color: #0000ff;

All of these values represent the color blue.

There is also a way to add transparency to your colors, but we will stick with the basics for right now.

Be sure to complete the exercise for this chapter, before moving on to the next chapter.

Danita Smith