CSS Tutorial
Miscellaneous and Lesser-Known Properties
This section is intended to familiarize you with properties that you have probably had scant exposure to.
Cursor Property
Cursors are handled by the OS and change display depending upon context. It is generally best to let the UA handle cursor display. However, there are times when you will want to override the default. A useful example would be when you wish to suppress a link in your navigation bar when the user is on the page that the link points to. The cursor could be reset to an inactive appearance over the link to discourage the user from clicking it. A custom cursor can be called using the "url" value. Only .cur and .ani files are supported in IE6.
cursor: url(mycursor.cur);
Note: the value "hand" is IE proprietary, while "pointer" is compliant.
Direction Property
This property is for contexts where users read from right to left. rtl means right-to-left, and not surprisingly, it can be reset to ltr.
p {direction: rtl;}
Unicode-bidi Property
This property is used in tandem with the direction property, and specifies how text is mapped to the Unicode algorithm, determining its directionality.
.hebrew {direction: rtl; unicode-bidi: bidi-override;}
The "normal" value imposes no additional embedding and applies the Unicode embedding implicit in the character order. The value "embed" opens an additional level of embedding within the algorithm while maintaining the implicit Unicode character order. The value "bidi-override" opens an additional level of embedding, overriding the Unicode character ordering, and re-orders the sequence to the value of the direction property. Thus, the direction property determines character order, while unicode-bidi determines character direction. The following characters are meant to simulate right to left direction, that is, with direction set to "rtl", and with unicode-bidi set to "normal" order or "embed".
These characters also simulate right-to-left directionality with unicode-bidi set to "bidi-override".
White-space Property
The white-space property can be used to simulate the PRE element. A value of "pre" preserves white-space, and a property of "no-wrap" will force the text to remain on one line. Values such as "pre-wrap" and "pre-line" do not as of yet have support.
Min-width, Min-height, Max-width, Max-height
These useful properties are not supported in IE6. But as we have said elsewhere, due to a bug in IE the height property is treated like min-height. min-width is useful if you want a page to be resizable in the UA, but do not want it to degrade too much at very narrow widths. max-width is also useful in setting page width maximums. Let's suppose that you have created a large background image so that the user can maximize the browser. It may be that the image is 1200 pixels wide, and you do not want it to repeat. You could set the max-width to 1200px, which is wide enough for most users. min-height is useful as a global property to set pages to have a certain minimum vertical uniformity for times when there is little content on a page, for example a search results page returning no items.
Font-size-adjust and Font-stretch
A factor contributing to the legibility of fonts at different sizes is the relationship between the height of the font-size and the height of the font's x-height (the height of its lowercase letter 'x'.) The ratio between these two factors (font size divided by x-height) is called a font's "aspect value". If an aspect value ratio is large for a font, it is more likely to be legible at a given font size than a font with a smaller aspect value. The font-size-adjust property allows authors to specify the "aspect value" that they wish to maintain. It becomes helpful when a specified font is unavailable and the system needs help in determining the best substitute.
The idea is that if a conforming browser can't find, say, Verdana, on the user's system, it will use the next best font, but adjust its height (say, from 14px) to ensure that the aspect value remains true. Arial has a smaller aspect value than Verdana, so it will be given a larger font-size than 14px, for example, 15px.
font-size-adjust was removed from the CSS2.1 specification and re-introduced in CSS3. But there the specification does not say that it should equal the aspect value of the first font-family. Use this property with caution. Note that it is not supported in IE6.
font-stretch is very straightforward. It condenses or expands the current font-family. It takes only named values. See the Property Reference. This is not currently supported in IE6 or Firefox 1.5, and has been removed from the CSS2.1 specification.
Proprietary Properties
There are unsupported properties in the CSS3 specification outlined in the appendix to this document. Some vendors have created propriety versions of those properties until the W3C fully defines them. Vendors will precede those properties with their own prefix, beginning with a hyphen.
Mozilla Test Properties
Flexible columns are being added to CSS3. One of the proposed properties is column-count. Mozilla has created the temporary -moz-column-count property so that you can tinker with it now. The prefix indicates that Mozilla is acknowledging that the specification has reached the recommendation state. Fortunately, this is ignored in other browsers, and thus there is no harm in using it.
CSS3:
p {column-count: 3; column-gap: 2em;}
Mozilla:
p {-moz-column-count: 3; -moz-column-gap: 2em;}
One could put both declarations in the style sheet, and remove the latter once the specification is adopted. Other such test property prefixes are:
- -ms- Microsoft Corporation
- -webkit- Safari, Chrome
- -o- Opera Software
- -atsc- Advanced Television Standards Committee
- -wap- The WAP Forum
There is a list of Mozilla CSS Extensions. But keep in mind that these proprietary declarations will not validate, though some have argued that a CSS validation tool should mark them as experimental rather than illegal. One workaround might be to put all such CSS in a separate file.
IE-Specific Filters
Microsoft developed a number of filters, such as alpha, chroma, flipV, etc. Though some of these are supported in other browsers, they are not part of the CSS specification. I recommend against them in favor of CSS3, with the exception of gradients. Since webkit and Mozilla both implement gradients in different ways, I deem it open season.
Property Value Shortcuts
Some property values have shortcuts. You can use shortcuts for fonts, borders, backgrounds, outlines, margins, padding, and lists. The order of values is not always certain because the W3C is not always clear, but over time many have adopted the following order for cross-browser support.
font-style || font-variant || font-weight || font-size/line-height || font-family
p {font: italic small-caps bold 0.9em/1.5em verdana, serif;}
is a shortcut for
p {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 0.9em;
line-height: 1.5em; font-family: verdana, serif;}
Unspecified attributes are set to their defaults, which are normal for font-style, font-variant, and font-weight. Default line-height varies across UAs and OSs. But size and family are required, and in that order. line-height is unique in that it follows font-size by applying a slash to the latter. The minimum font shortcut would be something like:
p {font: 90% Arial;}
Another useful shortcut is for the border property. The order is: border-width, border-style, and border-color.
.whatever {border: 1px solid #CCC;}
If you are setting borders to zero, then do this:
.whatever {border: 0 none;}
In this case you override the width and style, but specifying the non-use of a color is moot. The CSS2.1 attribute outline is made into a shortcut in the same way as border.
.whatever {outline: 1px solid #CCC;}
The list-style property also has a shortcut.
list-style-type || list-style-position || list-style-image
ul li.list {list-style: disc inside url(images/bigDot.gif);}.
Though it may seem unnecessary, you may specify the list-style to have a default display, disc in this example, in case the image is unavailable. There are shortcuts for margin (which are the same for padding).
top || right || bottom || left
p {margin: top right bottom left;} /* i.e. in clockwise order, thus: */
p {margin: 4px 4px 10px 0;}
This is equivalent to:
p {margin-top: 4px; margin-right: 4px; margin-bottom: 10px: margin-left: 0;}
If the top and bottom are identical, and the left and right are also identical, you can use this shortcut:
p {margin: top-bottom right-left;} e.g. p {margin: 10px 14px;}
Lastly, you can use 3 values to specify that the top and bottom have different values, but that the left and right are identical.
p {margin: top right-left bottom;} e.g. p {margin: 10px 4px 7px;}
This last example is equivalent to:
p {margin-top: 10px; margin-right: 4px; margin-bottom: 7px; margin-left: 4px;}
The shortcut for the background property is:
background-color || background-image || background-repeat || background-attachment || background-position
.whatever {background: #000 url(/images/whatever.gif) repeat-y fixed 0 0;}
First, you specify the fallback background color. You do this in case the image is unavailable or if the image does not cover the entire area. Repeat has to do with how the image repeats itself, whether horizontally, vertically, both, or does not repeat. Then you specify whether the image scrolls or is fixed, and finally its position on the page. Again, be very careful about what you don't specify. The default value may not be what you had intended. See the appendix to this document for a complete list of properties, values, and defaults. The background-position property is different from what you might expect in that the former value is for the horizontal plane, and the latter is for the vertical plane.
At-Rules
As we learned when we studied CSS statements, there are two types of statements. The most common is the rule-sets statement, and the other is the at-rules statement. As opposed to rule sets, at-rules statements consist of three things: the at-keyword, @, an identifier, and a declaration. This declaration is defined as all content contained within a set of curly braces, or by all content up until the next semicolon.
@import
Perhaps the most commonly used of the at-rules, @import, is used to import an external style sheet into a document. It can be used to replace the LINK element, and serves the same function, except that imported style sheets have a lower weight (due to having less proximity) than linked style sheets.
<style type="text/css" media="screen">
@import url(imported.css);
</style>
Since older browsers do not understand @import, this method can be used to hide CSS from browsers that don't understand it. But as this is technically a hack it is probably better to use the LINK element tag to call in the main CSS file into the HTML, and then import other style sheets into that main CSS using the import at-rule. When at-rules appear in an external style sheet, they must appear before all other CSS selectors. There are two ways of importing a style sheet.
@import url(addonstyles.css);
@import "addonstyles.css";
Relative and absolute URLs are allowed, but only one is allowed per instance of @import. One or more comma-separated target media may be used here.
@charset
@charset is used to specify the character encoding of a document, and must appear no more than once. It must be the very first declaration in the external style sheet, and cannot appear in embedded style sheets. @charset is used by XML documents to define a character set.
@charset "utf-8";
@namespace
The @namespace rule allows the declaration of a namespace prefix to be used by selectors in a style sheet. If the optional namespace prefix is omitted, then the URL provided becomes the default namespace. Any @namespace rules in a style sheet must come after all @import and @charset at-rules, and come before all CSS rule-sets.
@namespace foo url("http://www.example.com/");
@namespace can be used together with the new CSS3 selectors (see below). It defines which XML namespace to use in the CSS. If the XML document doesn't have matching XML namespace information, the CSS is ignored.
@font-face
This was removed from the CSS2.1 specification, but is still used to describe a font face for a document. Font embedding has been around for some time, but has not been well implemented. Many developers are turning to sIFR (a Flash solution) and Cufon (a JavaScript solution) for font embedding, but Jonathan Snook makes a good case for using this at-rule, and provides a nice introduction to get you going. The following at-rule links a font-family that the end-user is not likely to have, and provides the source for the font, which is a true type font in this case.
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.com/scarborough-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.com/santiago.tt"),
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
@media
This at-rule is used within a style sheet to target specific media. For example, after defining how an element is to be displayed (in this example for the screen), the declaration can be overwritten for print, in which case we often want to hide navigation.
@media print {
p {font-size: 10pt;}
#nav, #footer {display: none;}
}
@media screen {
p {font-size: 14px; text-align: justify;}
}
The media types are as follows.
- all
- aural (for speech synthesizers)
- handheld
- projection
- screen
- braille
- embossed
- tty
- tv
Media queries will be discussed when we get to CSS3.
@page
This at-rules declaration is used to define rules for page sizing and orientation rules for printing.
@page {size: 15cm 20cm; margin: 3cm; marks: cross;}
You may specify how pages will format if they are first, on the left-hand side, or on the right.
@page :first {margin-top: 12cm;}
@page :left {margin-left: 4.5cm;}
@page :right {margin-right: 7cm;}
@-webkit-keyframes
This is a webkit specific at-rule for CSS3 Animations, currently supported in Safari and Chrome. This will be treated below.
@fontdef
This is an old Netscape-specific at-rule which we should ignore.