Microsoft 70-480: Style HTML box properties

Exam Objectives

Apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin); apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping); apply styles to establish and change an element’s position (static, relative, absolute, fixed)

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 2

Convert a Warm, Cheerful Web Design to HTML and CSS 

MSDN - Cascading Style Sheets

Getting Started with CSS (Mozilla Dev Net)

CSS-Tricks Almanac: Position, opacity, background, clip, box-shadow

MSDN - Gradients

Using CSS Gradients (Mozilla Dev Net)

w3.org Introduction to CSS3
w3.org Box Model
MSDN - About Element Positioning

CSS Box Properties

The actual display size and spacing of box elements in CSS is determined by several properties:

• margin - outermost portion of box. This is transparent, creating a space around the element
• border - the "outline" of the element.
• padding - acts as an internal margin, creating space between the elements contents and its border
• width/height - typically the dimensions of the content area of an element

The default box-sizing model is the "content-box" model, where the width and height attributes define the content area, and the padding and border width are applied on top of this. For a box with width & height of 100px, 10px padding, and a 2px border, the final outside dimensions of the box are 124px square. The graphic below illustrates this sizing model:

Standard sizing model, "content-box"

In contrast, the "border-box" sizing model starts with the width and height at the very outside of the box and works inward. The same box with width & height of 100px, 10px padding, and a 2px border would have a final content area sized 76px square.  

"border-box" box-sizing. This is used by IE in quirks mode.

In addition to width and color, the appearance of borders can be changed using the "border-style" property and the "border-radius" property. Below are some examples of these styles with and without a radius applied:

Border Styles without radius

Border Styles with border-radius: 15px in Chrome

Graphic styling

The appearance of box elements can be controlled using the following properties:

• background-color - specifies a solid color for the background
• background-image - specifies an image file or a gradient
• url("image.png")
• linear-gradient()
• radial-gradient()
• opacity - value from 0 to 1 (0% to 100%). 0 is totally transparent (invisible), 1 is solid
• box-shadow - specifies a shadow around the element.
• overflow - determines how content in the element is clipped if it flows out of the bounds of the element.

The following graphic shows off a few of these properties. The two gradients are defines as follows:

• background-image: linear-gradient(to top, royalblue 0%, blue 50%, cyan 80%);   
• background-image: radial-gradient(red, green, yellow);

The box shadow around them is purple with a blur of 10px and no offset:

• box-shadow: 0 0 10px purple;

I discussed positioning in a previous post, so I won't repeat the discussion. Most of the properties can be explored in the JSFiddle I created for that post: