Working with CSS shorthand for boxes

kunal — Tue, 24 Nov 2009 18:57:28 +0000

This is something that is useful to get to grips with, in order to create the most efficient and easy-to-update CSS.
The previous example showed how to set all margins and padding values to 0, and this was done in shorthand instead of writing out every single value. How CSS shorthand works for boxes is like this:
A single value (margin: 10px;): This is applied to all edges. Two values (margin: 10px 20px;): The first setting (10px) is applied to the top and bottom edges. The second setting (20px) is applied to both the left and right edges
(20px each, not in total). Three values (margin: 10px 20px 30px;): The first setting (10px) is applied to the
top edge. The second setting (20px) is applied to both the left and right edges. The third setting (30px) is applied to the bottom edge.
Four settings (margin: 10px 20px 30px 40px;): Settings are applied clockwise from the top (i.e., top: 10px; right: 20px; bottom: 30px; left: 40px). Shorthand’s benefits become obvious when comparing CSS shorthand with the equivalent
properties and values written out in full. For instance, the following shorthand

#box {
margin: 0;
padding: 0 100px;
}
looks like this when written out in full:
#box {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 100px;
padding-bottom: 0;
padding-left: 100px;
}
Whether or not you use shorthand is up to you. Some designers swear by it and others because of it. Some web design applications have options to “force” shorthand or avoid it entirely. I reckon it’s a good thing: CSS documents are usually more logical and shorter because of shorthand. But if you don’t agree, feel free to keep on defining margins and
padding as relevant for every edge of every element.

Using Shorthand Properties in CSS Your body rule should now look like this: body {...
CSS shorthand for font properties The CSS properties discussed so far can be written in...
List margins and padding Browsers don’t seem to be able to agree on how...

Related posts brought to you by Yet Another Related Posts Plugin.

What is CSS ?

kunal — Thu, 19 Nov 2009 19:41:49 +0000

Stands for “Cascading Style Sheet.” Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, & other aspects of Web pages that historically in the past could only be defined in a page’s HTML.

CSS helps Web developers generate a uniform look across several pages of a Website. In lieu of defining the style of each table & each block of text within a page’s HTML, commonly used styles require to be defined only two times in a CSS document. Two times the style is defined in cascading style sheet, it can be used by any page that references the CSS file. And, CSS makes it easy to change styles across several pages at two times. For example, a Web developer may require to increase the default text size from 10pt to 12pt for fifty pages of a Website. If the pages all reference the same style sheet, the text size only needs to be changed on the style sheet & all the pages will show the larger text.

While CSS is great for generating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, & color of a table’s border, & the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does. This is why most Web pages today incorporate cascading style sheets.

Adding styles to a web page The most common (and useful) method of applying CSS rules...

Related posts brought to you by Yet Another Related Posts Plugin.

csslearn.com » CSS Basic

Working with CSS shorthand for boxes

What is CSS ?