In previous lessons in this course, I was going over some elements of the box model in more depth such as Margins and padding. Today I started with the border, which is defined as the outside edge of elements and are usually used to apply a decorative effect to specific elements.
Element borders are usually defined by three properties: style, width and color.
Like margins and padding, borders can be defined for the top, right, bottom and left sides individually, or defined for the entire element at the same time. Below is some syntax used when designing borders.
Now, because there is so much syntax for borders, authors typically use border shorthand notation that allows you to set all three border properties at the same time. The important thing to remember about borders, is that they do affect the overall width of an element. Border widths begin at the edge of padding widths, and then extend outward.
Border styles can be set in one of 10 values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. None and hidden are very similar, except for when tables come into play, where there are some subtle differences, regarding when borders are drawn around table cells. A solid, dotted, and dashed create a single flat line, that’s either solid, broken into dots, or broken into dashes. Although support for border styles is almost complete in browsers, some older browsers don’t support the dotted value, resulting in dashed lines when found.
The remaining values, double, groove, ridge, inset and outset create dimensional line effects that often require width values greater than one.
Most designers use borders for decorative effects, or as a way of providing visual separation between elements. Borders can also be used as a way of creating text rules between blocks of text, and as a way of replacing the default underlines, under linked text. A relatively new addition to borders, is the border image property. This allows you to specify an image, that will be sliced and then aligned with the elements corners, and created or stretched in the middle sections.
It is hard to overstate just how important the background property is to web design. This one simple property allows us to add visual sophistication and style to even the most content. Take the sample webpage below:
Here it is with just the browser’s default styles displayed. If CSS is turned on, you can see the dramatic difference below:
It’s the same content, but noticeably different in look and feel. Now of course, there’s more going on here than just the background property, but all the images, accents and defined regions are mad possible by using backgrounds.
You’ll often hear the background property referred to in discussions of the box model, even though it’s not actually a part of the box model itself. That’s because the area for the background extends all the way to an element’s edge. If you were to define a solid color for an element’s background it would extend not only to the edges of the element’s content width and height but to the edges of the padding for that element as well. as the name suggests, backgrounds display behind an element’s content, allowing you to create sophisticated visual effects from a single element. The default style for most elements is to have a transparent background, meaning you can see through them.
By explicitly setting the background property, you can choose to display solid colors, gradients, or even images behind an element’s content. The most basic usage of the background is to simply display a solid color. This can allow you to transform an invisible div, section, aside or article into a visually defined space or give individual paragraphs or headings added definition.
I also have the ability to use multiple background images for a single element. This feature gives designers even more options when creating complex visual designs.