Shorthand CSS p2 - Fonts & Backgrounds

Shorthand CSS (pt 2)

What is Shorthand CSS? (sCSS)

Shorthand CSS is exactly what it says on the tin - a shorthand way of writing CSS.

Why use Shorthand CSS? (sCSS)

It is beneficial for two reasons - smaller file size saves bandwidth, and less code is easier to maintain/update.

What can I do about fonts?

Font declarations can easily be combined into one single line. Say, for example, you have the following:

.pullquote {
	font-family: "Times New Roman", Georgia, serif;
	font-weight: bold;
	font-size: 9pt;
}
   example 1 - longhand font declaration

This will format the text to bold, 9pt Times New Roman. From the definition in this sentence, you can begin to see how to shorten the CSS:

.pullquote {
	font: bold 9pt "Times New Roman", Georgia, serif;
}
   example 2 - shorthand font declaration

Any separate tags you use for font declaration (excepting text-decoration) can be put on the same line. For example, all the following can be combined:

.text {	
	font-family: Arial, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	font-style: italic;
	line-height: 20pt;
	font-variant: small-caps;
}
	example 3 - longhand wild font declaration

Yes, that's right - line height. Obviously you wouldn't use all these declarations in one class, but it's an example. To combine all the above, you would use the following:

.text {
	font: bold italic small-caps 12pt/20pt Arial, sans-serif;
}
	example 4 - shorthand wild font declaration

The 12pt/20pt defines the line height. The measurements can differ - for example, you oculd use [pre]14pt/30px[/pre], or [pre]18px/0.4em[/pre].

What about background images?

Keep your hair on, I was just getting to that! The background properties (along with the MS-proprietary scrollbar colors) are probably the first thing and CSS newbie implements, because it's so easy and so versatile.
To fully understand the CSS shorthand for background image, you need to know each individual declaration. As usual, here's the lot:

body {
	background-image: url(images/background.jpg);
	background-repeat: repeat-y;
	background-color: #bdc8de;
	background-position: 100% 0%;
	
}
	example 5 - longhand background declaration

This code will apply a background image, found in currentfolder>images>, repeat it down the page, and start tiling the right hand edge of the image at the right-hand edge of the screen. The background-color isn't needed, but it is wise to put it in in case the background image doesn't display.

To condense example 5 into shorthand is a rather large piece of CSS-styled cake:

body {	
	background: #bd8cde url(images/background.jpg) repeat-y 100% 0%;
}
	example 6 - shorthand background declaration

See? I told you it was easy!

In fact, you will often be recommended to use the shorthand attribute, as certain browsers have problems displaying the longhand version.
There is one attribute you can use in the shorthand, which I do not know the longhand attribute. This is the fixed or scroll attrib. This is useful for fixed background images (eg a watermark) - however, with a uniform, tiled background image, it is not much use. Because of this, the next style will use a non-tiling image. This fits in as such:

body {	
	background: #bd8cde url(images/logo_background.jpg) no-repeat fixed 100% 0%;
}
	example 7 - shorthand background declaration with fixed image

However, Mozilla Firefox (and probably other standards-compliant browsers) only support fixedon the body tag - nothing else.

What's all that about positioning?

Glad you asked. The numbers (in example 7 it is 100% 0%) tell the browser where to start tiling the image. You can use either percentages (useful for positioning fully right - 100%), measurements (eg PX, CM), or descriptive words (such as bottom right). Percentages and words can work in the same way; for example:

100% 0% is the same as top right .

However, as you cannot know the user's screen resolution, you cannot use measurements to position it absolutely right, or absolutely bottom. What measurements are useful for is offsetting background images.

The natural flow for a tiled background would be to start at 0,0 of the browser window - the top right. If you are using the following code:

HTML:

<body>
<div id="header">
	<img src="logo.png" width="350" height="126" alt="Logo" title="Site Logo (23kb)" />
</div>

rest of content

</body>

Say you have a tiled image you want across the top of the page - this will use the [pre]body[/pre] css tag; but the [pre]logo.png[/pre] is a transparent file. (Yes, I know IE requires hacks to display alpha-channel transparency, but it's just an example). You wouldn't want the tiled background to show through the logo image, so you can use the backround position to offset the image. This would use the following CSS:

body {
	background: #bdc url(images/tile.png} repeat-x 350px 0;
}
	example 8 - offset background image

Simple.

More on the way, just a taster!

- pineapplehead