borders

Objectives:

  • Work with basic CSS borders.

File Location

You should be located in the following files:

   javascript-library
        └── 0-PreWork
            ...
            └── 2-CSS-Basics
                └── 07-border.css 
                └── 07-border.html

To get started, let's stub out our html and css files.

<!DOCTYPE html>
<html>
  <head>
    <title>Borders</title>
    <link rel="stylesheet" type="text/css" href="07-borders.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Borders</h1>
      <p id="title-p">The border property allows you to specify the style, width, and color of an element's border. </p>
    </div>
    <div class="border-style"></div>
    <div class="border-width"></div>
    <div class="border-color"></div>
  </body>
</html>

Then in the css file, set it up to look like this:

Notice, the comment about border css, that's the structure we'll be working with in the future.

Border Styles

Let's start with our border-style <div>. Add the following html to our border-style divs.

Let's look through these properties. Most of these are fairly self-explanatory here, so let's see this in action.

Let's talk about this css, notice how they say:

This is what we call a psuedo-class.

Psuedo classes allow us to more easily style things. A pseudo-class is used to define a special state of an element. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Nth-child is a psuedo-class that matches one or more elements based on their position among a group of siblings.

So here we're using the nth-child psuedo class to identify each list item and style them independently. Check out all of the cool border styles, and how using psuedo-classes we can style them all specifically without needing to assign an id to each one.

Border Widths

In the border-width div, let's fill in the following html:

Important to note here, is that border-width will not work unless you have border-style set. Let's add some style to this, add the following to your css file.

Hopefully you can see the differences in the two border widths after we apply our css. Notice the order of the widths described. This order, as always goes: top-right-bottom-left. Try drastically changing the widths of each side to see the changes.

Border Colors

Let's talk about border color next, as you may expect it allows us to assign a color to our border. Let's add the following html to our border-color div.

Again, note that you need border-style to use border-color. Let's add some CSS to it, so that we can see it in action.

Notice here, we're using the psuedo class nth-child again! This time you should be able to see the color differences between borders.

Border Shorthands

As you see if we use all three properties, we're using three lines of css. Fortunately there is a shorthand way of using border and its properties. Let's look at the comment at the top of our css again. Notice how we can just do border: 5px solid red instead of border-width: 5px, border-style: solid and border-color: red.

Make sure your HTML and CSS files look like below.

HTML:

CSS:

Next, we'll talk about position.

Previouswidth & heightNextposition

Last updated