Shorthand Expressions - HTML

CSS supports many properties for fine control over elements. For example, the following properties all apply to borders:

  • border
  • border-collapse
  • border-spacing
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Several of these properties are shorthand properties, which enable you to set multiple properties at a time. For example, to set an element’s border, you could use the following definition:

p.bordered { border-top-width: 1px; border-top-style: solid; border-top-color: black; border-right-width: 2px; border-right-style: dashed; border-right-color: red; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; border-left-width: 2px; border-left-style: dashed; border-left-color: red; }

A paragraph using different borders requires multiple properties to be set.

A paragraph using different borders requires multiple properties to be set

However, you can use the border-side properties to shorten the definition, defining the border width, style, and color with one property:

p.bordered { border-top: 1px solid black; border-right: 2px dashed red; border-bottom: 1px solid black; border-left: 2px dashed red; }

You could further simplify this style by using the border property, which allows you to set all the sides to the same property and then list the exceptions:

p.bordered { border: 1px solid black; border-right: 2px dashed red; border-left: 2px dashed red; }

The preceding definition first sets all the sides to the same width, style, and color. Then the left and right are set to their proper properties, overriding the border property’s left and right side settings.

Tip : Avoid overusing shortcut properties or being too ingenious in setting styles with minimal properties. Although you may save in typing, you will also decrease the legibility of your code. Take a look at the example definitions in this section— although the first example is lengthy, it leaves little to the imagination of how the border is being formatted.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics