Common Display Property Values

In Lesson 2 of Getting Down with HTML we learned that HTML elements are divided into block-level elements and inline elements. Elements in each group have their display property set to block or inline respectively. These default display properties can be overridden with CSS, as we will see in the exercises.

The following table describes the two display properties we just discussed and two more we will explore in the exercises.

Visibility Property Values

A subset of more speciailized properties are visibility properties. These properties also determine how (or if at all) an element appears on the screen.

Position Property Values

Float Properties

Grid Layout

CSS grid layout is what we've been waiting for in layout technology since HTML and CSS first appeared. Support for it began in most major browsers in Fall of 2017. While it is too powerful, and thus too complicated to provide more than a brief introduction here, you should use the resources in the Where to Go From Here lesson to explore grid further.

A Simple Grid Example

The following html:

<section id="gridexample">
<h2>Simple Grid Demo</h2>
<main>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</main>
</section>

Combined with the following CSS in style element:

section#gridexample > h2 {
    text-align: center;
    font-size: 2.5vw;
}
section#gridexample > main {
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    display: grid;
    grid-template-columns: 30vw 30vw 30vw;
    grid-template-rows: auto;
    grid-gap: 1vw;
}
section#gridexample > main  > div {
    text-align: center;
    background-color: #78467B;
    border: 5px solid #583770;
    color: #FFF;
    border-radius: 0.5vw;
    padding: 3vw;
    font-size: 4vw;
    font-weight: bold;
    font-family: sans-serif;
}

will produce the following:

Additional examples of grid layout are given in the exercises that follow.

Exercises:

1. Download display1.html, load it in a browser, and take a good look at it. Then do each of the following, reloading it each time and noting the changes:
   • Add the following declarations, one at a time, inside the style element, immediately following the h1 style:

     ul {
         text-align: center;
     }
     li {
         display: inline;
     }
     

     What happened after you applied each? How would you describe the difference in the appearance after you changed the display type?
   • Now add a border around the li elements and set their width and height:

     li {
         display: inline;
         border: 0.1vw dotted #555;
         width: 12vw;
         height: 4vw;
     }
     

     What do you see? Change the display value from inline to block, inline-block, and none, reloading your page each time and making note of the changes.
   • See if you can apply your CSS skills to make the page appear something like this.
2. Download display2.html, then do each of the following to it:
   • Add the following declaration to the div#box2 style already in the style sheet:

     display: none;
     

     Reload the page and note how it looks.
   • Now replace display: none with visibility: hidden. Again, reload the page and note how it looks.
   • Finally, change the hidden value to visible. Reload for the last time, and take notice of what changed.
3. Download positioning.html and positioning.css, then do each of the following:
   • Add the following declaration inside the style element, immediately under the @import statement:

     div#container {
         position: relative;
         top: 20px;
         left: -40px;
     }
         

   • Comment out the previous declaration (by adding /* before it and */ after it), and then add the following in its place:

     div#box_1 {
         position: absolute;
         top: 210px;
         left: 210px;
     }
         

   • Next, replace absolute with fixed. See if anything changed. Hint: Try scrolling up and down the page.
   • Again comment out the previous declaration and then add the following:

     div#before {
         float: right;
         top: 210px;
         left: 210px;
     }
         

     Refresh the page, what change occured? Now, replace the float value with left and then inherit, reloading each time to see what changed.
4. Download grid1.html, then add each of the following to its style element, reloading the page as usual to see what it does:
   • First style the h1 element:

     h1 {
         text-align: center;
         font-size: 2.5vw;
     }
         

   • Next style the main element:

     main {
         margin-left: 3.5vw;
         margin-right: 3.5vw;
         display: grid;
         grid-template-columns: 30vw 30vw 30vw;
         grid-template-rows: 14vw 14vw 14vw;
         grid-gap: 1vw;
     }
         

     This creates a grid with three columns and three rows.
   • Set the style of each div element with class equal to box:

     .box {
         text-align: center;
         background-color: #78467B;
         border: 5px solid #583770;
         color: #FFF;
         border-radius: 0.5vw;
         padding: 3vw;
         font-size: 4vw;
         font-weight: bold;
         font-family: sans-serif;
     }
     

   • Now use the grid-area property to position each div so the page looks like this. The value of grid-area is four numbers seperated by slashes (/) that describe the upper left and lower right coordinates of the element within the grid. The a and e boxes should be positioned with the following. See if you can position the rest of the boxes yourself.

     .a {
         grid-area: 1 / 1 / 2 / 3;
     }
     .e {
         grid-area: 3 / 2 / 4 / 4;
     }
     

5. Download grid2.html, then add each of the following declarations inside the style element:
   • First style the body element, defining a grid layout for it:

     body {
         display: grid;
         grid-template-columns: 19vw 80vw;
         grid-template-rows: 8vw 36vw 4vw;
         grid-gap: 0.3vw;
         margin: 0.3vw;
     }
     

   • Next position the header element within the grid, and style and the h1 inside it:

     header {
         grid-area: 1 / 1 / 2 / 3;
         background-color: #333;
     }
     header > h1 {
         color: #FFF;
         text-align: center;
         font-size: 3vw;
     }
     

   • Now position the nav element, and style its link elements:

     nav {
         grid-area: 2 / 1 / 3 / 2;
         background-color: #78467B;
         padding-top: 1.6vw;
         padding-left: 1.6vw;
     }
     nav > a {
         display: block;
         margin-top: 0.5vw;
     }
     nav > a, nav > a:visited {
         font-family: sans-serif;
         font-size: 1.3vw;
         color: #FCF;
         text-decoration: none;
     }
     nav > a + a {
         margin-top: 1vw;
     }
     

   • The main element and its children are next:

     main {
         grid-area: 2 / 2 / 3 / 3;
         background-color: #FF0;
     }
     main > h2 {
         text-align: center;
         font-size: 2.2vw;
     }
     main > p {
          background-color: #FF9;
          margin: 0.5vw;
          border: 1px dotted #000;
          padding: 0.8vw;
          font-size: 1.5vw;
     }
     

   • Finally, see if you can position the footer in the grid and style the link elements in it so that the result looks something like this.