CSS Shorthand at a Glance

2005-02-09T09:31:45+00:00

CSS Shorthand at a Glance by Alejandro GervasioWhat could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand\'s features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.CSS is one of the simplest and most convenient tools available for Web developers. As you probably know, it’s a language for defining the formatting and visual presentation used in a website. We\'ve used it maybe hundreds of times to define element positioning, colors, background images, fonts, margins and indentation. It offers a great deal of flexibility for controling the look of websites, just by using a single file (or sometimes more) attached to each Web document. That’s all well and good.However, with this powerful tool at our disposal, we should try to get the most out of it, not only by building cross-browser style sheets, but by optimizing them in order to decrease significantly the size of CSS files, generating more efficient code for faster page downloads. The \"byte-shaving\" technique is one of the many approaches used for achieving cost-effective website acceleration.Particularly, CSS offer great possibilities for using shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on websites, the benefits of using these shorthand properties are immediate. CSS shorthand makes it even easier for you to style your markup, and helps you turn out code that is a lot more compact and concise.In this article, we’ll look at CSS shorthand properties, and give a short explanation about what each property actually does. Due to the diverse nature of browser support, I recommend that you check the browser manufacturer’s website in order to obtain detailed information about a buggy or partially supported particular property. A better bet would be to pick up a good book about CSS such as O’Reilly\'s CSS Reference, but there are any number of other choices out there, all perfectly good. So, let’s not waste any more time. Probably, as a seasoned Web developer, you already know the concepts. Still, let’s have a quick look at a sample CSS rule, showing the different sections of it, and the corresponding names for each part. The following image illustrates the anatomy of a CSS rule:[attachment=571:attachment]As depicted above, a CSS rule consists of a selector element or group of elements, and a property declaration section, which can include one or many properties, and the values tied to each one of them. At this point, these definitions should be very familiar to most of us, but it’s a useful reminder for those wishing to refresh some core concepts.As we know, CSS rules allow us to define many property declarations for a selector, which usually is declared with a few lines of code. For instance, let’s say we want to apply a CSS style to a paragraph element. We do it in the following way:[code] p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }[/code]The code listed above is a fairly common way to apply CSS styles to selectors, used by numerous developers in their Web pages. There are also many popular development tools such as Dreamweaver that will generate similar code when CSS styles are applied within a Web document. There is nothing wrong with this since it will work seamlessly on most browsers. However, the code might be greatly improved by just defining all of the selector property declarations in one line, using CSS shorthand:[code] p { font: bold 12px "Arial", Helvetica, sans-serif; }[/code]We’ve redefined our CSS declaration using the \"font\" shorthand property, which allows us to set values for all of the above properties utilizing one line, cutting our code close to half the size. This technique will have a high impact on the overall style files, reducing their sizes considerably and making our site much more efficient and faster to display.Let’s see in detail some of the most frequently used CSS shorthand properties, for easy implementation on our websites. This is not intended to be a full-blown CSS reference, as stated before. Instead, it can be a handy guide to quickly put CSS shortcuts into action and take advantage of their benefits. We’ll direct our attention to the most common CSS shorthand properties supported by today\'s browsers as well as some of the older ones.The syntax of the \"font\" shorthand property is the following:[code]font: font-style | font-variant | font-weight | font-size | line-height | font-family;[/code]The \"font-style\" property specifies whether the font should be rendered normally (normal), or in italics (italic), while \"font-variant\" can be used to display the text entirely in capital letters, with the lowercase letters of the source code displayed in a smaller font size. A setting of \"small-caps\" enables this effect, while \"normal\" disables it.Also, we can specify the font size with one of the available presets: xx-small, x-small, small, medium, large, x-large, xx-large. The presets \"larger\" and \"smaller\" may also be used to set the font size in relation to the size inherited from a parent element, or the browser default. Alternatively, we can specify a font size in pixels (px), points (pt), ems (em), or as a percentage of the parent element’s font size (%).Font-weight sets the boldness of the font in the selected element. Most browsers support values of \"normal\" and \"bold,\" but the CSS specs define the following values: \"bold,\" \"bolder,\" \"lighter,\" \"normal,\" 100, 200, 300, 400, 500, 600, 700, 800, 900, where \"normal\" is the same as 400 and \"bold\" is the same as 700.Line-height specifies the line spacing of the text inside the selected element. The values for this property are \"normal,\" a number (where 1 is single-spaced, 2 is double spaced, and 1.5 is halfway between the two), a measurement (px,pt,em) or a percentage.Finally, \"font-family\" sets the font to be used in the selected element. The value is a comma-separated list of font names in order of preference. Font names with spaces will be quoted.With a quick explanation of what each property means, let’s give an example to implement this in CSS shorthand: [code] p { font: large/120% "Times New Roman", Times, serif; }[/code]In the example, we haven’t defined \"font-variant\" and \"font-weight,\" since they’re inherited from a parent element. The value \"large/120%\" is referencing both font-size and line-height properties respectively. As both use size as value, they can be coded together with a slash, with \"font-size\" the first value defined. The value for \"font-family\" is in quotes due to the spaces that might appear in the font name.According to O’Reilly’s CSS Reference, the order of font properties can be set in any sequence.Are you ready to work with backgrounds? They’re the next shorthand property. In order to implement the \"background\" shorthand property, the syntax is:[code]background: background-color | background-image | background-repeat | background-attachment | background-position;[/code]As its name suggests, the \"background-color\" property sets the background color of the selected element. It may be set to any HTML color code or name, or transparent.The \"background-image\" property sets the background image for the selected element. It may be set to a URL or \"none.\"Possible values for the \"background-repeat\" property are: \"repeat-x\" (background image is tiled horizontally), \"repeat-y\" (background image is tiled vertically), \"repeat \" (both ways), and \"no-repeat\" (not tiled at all).Regarding the \"background-attachment” property, it sets whether the background image of the selected element scrolls with it or remains fixed while the element’s contents scroll over it. This property can be set to \"fixed\" or \"scroll.\"Finally, the values for \"background-position\" allow us to specify the position of the top-left corner of the background image. We can specify one or two percentages, lengths or positions, where the first specifies the horizontal position and the second specifies the vertical position. If the vertical position is not specified, it’s taken to be 50%.Once again, let’s code a couple of examples: [code] background: #00f url("bg.gif") repeat-x center left; background: #fff url("bg.gif") no-repeat fixed center center;[/code]Here we’ve specified a blue background, and a background image that will be tiled horizontally (across the X axis), horizontally positioned at the center and vertically positioned at the left of the element.In the second example, we’ve assigned a white background, using a background image that won’t be tiled at all. The background image will be horizontally and vertically positioned at the center of the element. The \"fixed\" property indicates that the image will remain fixed as the element’s contents scroll over it.Now, it’s time to have a look at the next CSS shorthand property. The syntax for the \"margin\" shorthand property is the following:[code]margin: margin-top | margin-right | margin-bottom | margin-left;[/code]Margin properties set the size of the margin between the outside of an element’s border and surrounding page elements. Let’s list some examples for proper understanding:[code] h2 { margin: 5px; } h2 { margin: 5px 20px; } h2 { margin: 1em 2em 4em; } h2 { margin: 5px 20px 5px 20px; }[/code]In the first example, all of the margins for the element are set to 5px. In the case where only one value is specified, it will be applied to all sides of the element. In the second example, where only two values have been specified, CSS interprets the first as being the value for the horizontal margins, that is, those at the top and bottom of the element. The second value defines the right and left margin sizes for the element.In the third example, where three values have been defined, the first value is set to \"margin-top,\" the second is set to \"margin-right\" and the third is set to \"margin-bottom,\" respectively.When four margin values are defined for the element, they’re automatically applied to the borders, moving around the element in a clockwise direction, that is top, right, bottom and left, respectively.Let’s see another interesting shorthand property, which consists of using padding.The \"padding\" shorthand property syntax is similar to that specified for margins:[code]padding: padding-top | padding-right | padding-bottom | padding-left;[/code]Padding properties set the size of the padding between the inside of an element’s border (if any) and the element itself.Here are some examples:[code] p { padding: 10px; } p { padding: 10px 20px; } p { padding: 10px 20px 10px; } p { padding: 10px 20px 10px 20px; }[/code]Similar to margin properties, when only one value is given for the element, that value will be applied to each padding, in the following manner: \"padding-top,\" \"padding-right,\" \"padding-bottom\" and \"padding left.\"Taking a look at the second example, two values are defined. CSS will give the first value for \"padding-top\" and \"padding-bottom.\" The second value will be assigned for \"padding-right\" and \"padding-left.\"The third example defines three padding values for the element. They will be evaluated by assigning the first value for \"padding-top,\" the second for \"padding-right,\" and the last for \"padding-bottom.\"Finally, our fourth example, with four padding values specified, will assign the values in a clockwise direction: \"padding-top,\" \"padding-right,\" \"padding-bottom,\" and \"padding-left\" respectively.Next, we will work with borders. Let’s take a look at the \"border\" shorthand property.The syntax for this shorthand property is the following:[code]border: border-width | border-style | border-color;[/code]Border-width refers to the width of the border surrounding the selected element, while \"border-style\" specifies the style applied to that border. Possible values for this property include: \"double,\" \"groove,\" \"inset,\" \"ridge,\" \"solid,\" \"dashed,\" \"dotted,\" and \"none.\" Finally, the \"border-color\" property sets the color for the border of the element.In order to understand these properties, two examples are listed below:[code] p { border: 1px solid blue; } p { border: dotted blue; }[/code]The first case will display a solid blue line of 1px for each border of a

element. The second example will show a dotted blue line for all the borders of the

element.Still with me? Excellent. Let’s focus on another useful CSS shorthand property: individual borders.Border-top, border-right, border-bottom and border-left shorthand propertyThe syntax for this shorthand property is:[code] border-top: border-width | border-style | color; border-right: border-width | border-style | color; border-bottom: border-width | border-style | color; border-left: border-width | border-style | color;[/code]These properties work identically to those defined for \"border.\" However, the \"border\" property itself is not capable of discerning between the four sides of an element. These are specifically aimed to let you set a style to a specific border.Take a look at the following examples:[code] p { border-top: 1px solid red; } p { border-right: solid blue; } p { border-bottom: 1px dotted red; } p { border-left: 2px solid #ffc; }[/code]The first case will display a solid red line of 1px for the \"border-top\" of the

element.The second case will show a solid blue line for the \"border-right\" of the element.The third and fourth examples will display a

element with a red dotted line of 1px for the \"border-bottom,\" and a 2px yellow solid line for the \"border-left\" of the paragraph, respectively.For the next section, we’ll see another handy shorthand property: list-style.The syntax for the \"list-style\" shorthand property is described below:[code]list-style: | list-style-type | list-style-position | list-style-image;[/code]This shorthand property comes in very handy when we’re styling lists, since they’re commonly used to display content in an appealing fashion. Available types for \"list-style-types\" are circle, disc and square.The \"list-style-position\" property sets whether the list marker (bullet or number) is placed inside or outside the box outlined by the list item text. Another way to look at this property is that a setting of \"inside\" causes the text to wrap to the beginning of the line, whereas a setting of \"outside\" causes the text to wrap to the first character after the list marker on the first line.Finally, the \"list-style-image\" property allows us to define a URL for an image that is to be used for the bullets in a list, or for a particular list item. A setting of \"none\" for a particular list item specifies that the default bullet should be used instead of an image, and can override an image specified for the list as a whole.Let’s see an example for this shorthand property:[code] ul { list-style: square inside url("sqr.gif"); }[/code]In this case, we’re defining an unordered list element to have an image to display list items (\"sqr.gif\"). If it’s not available, then a square bullet will be used instead, which is placed inside the box outlined by the list item text.And that’s all for now. We’ve taken a quick look at the most used CSS shorthand properties, learning a little more about the power of CSS and its properties. Of course, there are many other shortcuts to define styles, but poor or even nonexistent browser support for them makes them impractical for use in websites.SummaryAs we can see, CSS shorthand properties are really easy to implement. In many cases, they’re faster and more efficient to use than standard CSS, making our code a lot tighter and concise. However, we should be aware of browser support, which usually varies significantly. Just make sure you have at hand a good CSS reference that includes information about browser compatibility for every feature discussed. It might be a straight and simple solution for most of your CSS related problems.About The Author:Alejandro Gervasio is a senior system analyst, mainly oriented to PHP programming and client-side technologies. Also, he currently is an active technical writer for Developershed.[url=\"http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-shorthand-at-a-glance/\"]source[/url]

Statistics: Posted by Tami — Wed Feb 09, 2005 9:31 am

My Board

CSS Shorthand at a Glance