WEBD106 - Introduction to Web Development Technologies

So far in our exploration of CSS, we've primarily focused on learning how to recognize and write well-formed CSS properties and apply them to HTML elements. Up until now, we've been practicing using properties that control the Box Model (such as margin, padding, and border).

While this is excellent for sprucing up content in the box that it’s originally contained, our document still reads top-to-bottom in the same order! What if we wanted to position two of our elements next to each other, have them overlap, or have one element stay stuck to the top of the page at all times, like the header?

This is where CSS Visual Formatting Properties come in. These properties can help us perform all the actions listed above, but also builds the foundation for many key scenarios in the future. Being able to position elements where you want, when you want is crucial for responsive web design, in which the formatting of your page adapts to any device regardless of screen size. In addition, we’ll explore dynamically changing these properties to make elements visually respond to the user’s input in the JavaScript section of this course.

This is a valid example of a property that instructs the boxes on how they should behave related to one another. Try it for yourself by operating the switch underneath the code chunk.

.box-1, .box-2, .box-3 {
    display: inline-block;
}

In this example, we want to hide the middle box (.box-2) from the user, but we also want to keep the space between Boxes 1 and 3. If we just delete Box 2, then Box 3 would tuck underneath Box 1, so instead we'll need a visual formatting property.

.box-2 {
    visibility: hidden;
}

So far, we've looked at examples on how elements interact with their siblings. However, visual formatting properties are also used to tell elements how they should interact with their parents or children (elements that are inside of other elements).

.box-2 {
    overflow: hidden;
}

While this CSS does hide the label for Box 2 from view, it doesn't change how any of the elements behave in relation to one another, which is a key part of the definition. (The label is actually still there, and you can click and drag your mouse across it to highlight it).

.box-2 span {
    color: rgba(0,0,0,0);
}

The width and height properties are great for setting fixed dimensions of an object, but not the best choice for altering the visual structure of the page. In this example, we try to "remove" the second box by setting its dimensions to 0x0. Not only is the box's content and border still visible, the other two boxes still allow it space because they haven't been told to ignore it.

.box-2 {
    width: 0;
    height: 0;
}

Margin can be used to cause elements to overlap one another like in the example seen here. However, like the other two non-examples, the box that's being adjusted isn't giving instructions to any other elements on what to do. It moves with complete disregard to anything around it, and would even move up off the top of the page if the amount of movement was high enough.

.box-2 {
    margin-top: -30px;
}

A box and a graphical shadow are re-ordered so that the text box properly sits on top of its shadow.

.box-1 {
    z-index: 0;
}
.box-2 {
    z-index: 1;
}

Is a Visual Formatting Property being used here?

The size of some hard-to-read text inside a box is increased.

.box-1 {
    font-size: 14px;
    line-height: 18px;
}

Is a Visual Formatting Property being used here?

The height of a box is increased so that the white background can cover all of the text inside (which is currently overflowing outside of the box).

.box-1 {
    height: 150px;
}

Is a Visual Formatting Property being used here?

Absolute positioning is used to pull an element out of the structure and overlay it on top of all other elements.

.box-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

Is a Visual Formatting Property being used here?