CSS3 Examples

Keyboard Shortcuts

2008-07-21T09:35:00.000-07:00

Learning a few quick-key secrets can make you look like a computer expert too, and save you seconds when you need something finished fast. Here are a few tips to help you speed up your computing.

Turn back the clock: Ctrl-Z

We have all done it; deleted the wrong text, changed the wrong formula in a spreadsheet, or formatted text in Word and messed up a whole document layout.

Using the Ctrl-Z quick-key combination will save you time and frustration. This is an excellent time-saver; once you know it, you’ll wonder how you ever survived without it. Simply hit the Control key and Z to undo any mistake you make. This is great for when you cut-and-paste the wrong data into a Microsoft Excel file or accidentally delete a paragraph from a Microsoft Word document. Also repeat the key presses to go back a few stages to a previous version of a document.

And just as useful, Control key and Y ‘undoes the undo’, i.e. it puts it back again if you undo one stage too far!

From upper case to lower easily: CTRL-SHIFT-A

One of the more time-consuming things we often have to do is restyle copy from upper case to lower case, or vice-versa, when preparing a presentation or business proposal.

Rather than spend all that time retyping the headline, sentence, paragraph or page, simply highlight the words you want changed and hit your Control key with the Shift button and A – you’ll toggle between upper and lower case copy in an instant.

Minimise everything: Windows key-M

On a busy day you can often have ten or more windows open on your PC. Accessing your desktop in these circumstances can be a lengthy process as you click away each individual window. But you can actually minimise all windows in the blink of an eye by hitting the Windows key and M together.

For when time stands still: Ctrl-Alt-Del

It is unfortunately possible for applications on older model PCs to freeze and force you to wait while your PC troubleshoots. For example, Word can sometimes lock up when opening a corrupted document or one in a new format that an older model PC can’t read. This is doubly frustrating if it happens when you are racing to meet a deadline. (Hint - call CSS to get your PC upgraded if this happens often!)

The Control/Alt/Delete shortcut is helpful in these situations because it takes you straight to Task Manager, where you can immediately shut down and then re-start applications that are experiencing difficulties.

This handy combination also gives you the option of locking your computer, logging off, shutting down, or changing your password.

Magic Text resizer

Finally my favourite, and one which never fails to impress anyone watching - resizing text in Word.

When you are laying out a flyer or a brochure, you often need to get text to just the right size to fit in with graphics or text boxes. Highlight the text, and press Control and [ or Control and ] to decrease/increase the point size one at a time. The text will magically grow or shrink as you tap the keys, and makes it dead easy to fit text into a certain space.

More shortcuts:

CTRL-C = Copy
CTRL-X = Cut
CTRL-V = Paste
CTRL-A = Highlight all (for instance a whole Word document to change a font size or style)
CTRL-ESC = Open Start Menu, use the arrow keys to select an item
F1 = Help
F2 = Rename an item
F3 = Open Find All Files dialog
ALT-F4 = Close the current window, or quit the current program
SHIFT-F4 = Automatically repeats the previous Find command in Word
F5 = Refresh Screen
ALT-F6 = Switch between multiple windows in the same program
F10 = Activate the menu bar in a program
SHIFT-DEL = Delete items permanently

With these speedy keyboard tips, you will soon be tapping out impressive shortcuts that help you get more done in less time.

CASCADING STYLE SHEETS TUTORIAL PART 3 OF 3

2008-07-21T09:25:00.001-07:00

In part 2 of the tutorial we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID's attached to them:

...

Using DIV's (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other. But consider that CSS in the 'official' method to position page elements and tables should only be used to hold tabular data.

On the other hand there are simply times when using tables is much easier and CSS just doesn't cut it.

That said, our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.

Now that we have that covered, everything gets really easy from here. We've established our main document and the major sections are in place, all we need to do is add our text and images.

Breaking down the page:

This page is simple, we have just a single heading:

The Main Heading

And a single paragraph:

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now!

We define how the paragraphs and the headings will look in our CSS code:

p {

width: 80%;

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the

tags to 80%. This allows us to control all of our text width in one easy to edit spot.

The only thing missing from the page is the actual navigation. The best and easiest way to do this, is by using list (

) tags. That makes sense, since navigational menus are essentially a list of pages.

We styled the list item tags with this CSS:

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more 'breathing room'). You don't have to have an image for the bullets, you could leave it with no images and no bullets by just removing the attribute:

list-style-image: url(../images/arrowSmall.gif);

Or you could use on of the built in bullet options: 'disc', 'circle' and 'square'.

Next you should add to the HTML page an unordered list (

) in between the navigation DIV's just under the 'main navigation' heading:

The Main navigation

Page One
Page Two

To make things easier (for the purpose of the article), change the CSS affecting the list item tags (

) so that we use a built in bullet:

li {

list-style-type: disc;

line-height: 150%;

}

Now we have the navigation!

That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page, while using very few types of HTML tags. At this time there isn't much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all!

Video Tutorial on CSS for Page Layout:

I've created a quick video that talks about page layout in CSS. I talk about some ideas that will make your life a lot easier when it comes to building pages with CSS.

CSS for Page Layout

I hope the CSS tutorial was useful for you all, it may have been a little hard to get your head wrapped around this subject at first, but in time you will see that your efforts will pay off. Please let me know how you felt about this article.

CASCADING STYLE SHEETS TUTORIAL PART 2

2008-07-21T09:23:00.000-07:00

In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags.

Part 1 presented the code for the page and explained what HTML tags we were going to use. Now we will look at the actual HTML code used so far and the CSS.

Our page so far is really very simple. As you may already know, all the content (text, images, Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in-between the and tags*.

In this case we have this:

The Main Heading

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.

Follow the instructions there and create your basic HTML page ... and do it now!

In the above code we see that we have 2 main sections demarked by using

tags. As you learned in part one of this tutorial,

tags are designed to be used to create a 'division' in the document or in other words create a container. We have created two such containers and given them each of them a unique ID:

...

You will notice that the entire contents of the page are contained in one of these two major page divisions. So the first questions are what are the rules of ID's in HTML pages and why do we use them and assign them to page elements like DIVs?

1. First of all you can assign ID's to any HTML tag. So I could have assigned an ID to a

tag as well.

2. An ID in a page should only be used once. That is to say that no two elements should have the same ID. ID's are meant to uniquely identify a page element. So in the above example we know that there is only one page element with an ID of 'navigation' and only page element with an ID of 'centerDoc'. I like to use ID names that talk to you, it is pretty clear what is going on in each division we created above.

3. ID's on HTML page elements (tags) are used in CSS. We can target ID's in our CSS code to change the appearance, position and even behavior of that element by referencing the ID of the element.

Inside the

tags we use header tags (

and

) to set the headers. I speak to what header tags mean in part 1 of this tutorial.

And finally I have some
tags, and of course I insert the text that makes up this simple page in-between them.

Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS document with this line of code in between the tags:

Like a normal page link we have an 'href' attribute this time pointing to a CSS document that has all our CSS code that will affect this page since it is linked to it. This is not the only way to associate CSS code to pages (there are a few other ways) but we will leave that to another article. So in the above link we name the CSS file name with this: 'href="myCSS.css"' and we tell the browser that the link is to a CSS page with this attribute: 'type="text/css"'. All that is important here is that the link point to a CSS file with the name: 'myCSS.css'

So now that we got the style sheet linked to the document, lets look at some CSS code. This first snippet of code 'styles' the unique ID's we were talking about before:

#navigation {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

padding: 0 0 20px 0; /top right bottom left/

margin-top: 50px;

margin-left: 235px;

}

There is a lot going on here so we will focus on just a few elements for now. In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:

#navigation {

/Look ma no CSS rules!/

}

#centerDoc {

/Look ma no CSS rules!/

}

I just inserted the text: '/Look ma no CSS rules!/' to show you where the CSS code would normally be. So now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.

In our above examples you can see that there is some text that appears before a curly bracket. That text gives a name to the selector. So in this case we have two selector names and thus to selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text? Why can't we call it simply 'centerDoc' and 'navigation'?

Like HTML and programming certain text in certain places have special meaning that tells the system to do something particular. In this case whenever you have a # symbol in front of a name of a CSS selector we are saying that this selector is a special type of selector called an 'ID' selector. What is so special about an ID selector? That type of selector can only be applied to one element in the HTML page. Sounds familiar?

So those of you not asleep at the computer, now see that we have a CSS ID selector for each of our HTML divs that have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: '
' , you got it? Whatever CSS rules/styles we choose to code into our ID selector will change what appears inside the corresponding div. So for the div with the id of: 'navigation' we have these CSS rules:

#navigation {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

Notice at the bottom we say all text will have a font-weight of 'normal':

font-weight: normal;

We could just as easily have said that we want all the text to appear in the div (the div with the ID 'navigation') bold instead:

font-weight: bold;

But I digress, I already go into detail about CSS in a my previous article on CSS. This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work.

In our page the navigation div is sitting on the left and it has a border ... why? It has a nice light green 1 pixel border because I set this in my CSS:

border-right: 1px solid #C6EC8C;

Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks.

Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector:

position: absolute;

This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now.

The real magic in this is the CSS code for centerDoc:

#centerDoc {

position: absolute;

padding: 0 0 20px 0; /top right bottom left/

margin-top: 50px;

margin-left: 235x;

}

The line :

padding: 0 0 20px 0; /top right bottom left/

Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID 'centerDoc'.

Let's back up here a second. We just used something called 'padding' and it is what it sounds like: Space that is wrapped around our element (tag).

CSS has this feature and concept of a box model that essentially is a box that wraps around HTML elements. This box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so:

content -> padding -> border -> margin

So in our case anything in between our
tags is the 'content'. Right after that comes the padding. Then there is a border and finally a margin. Margin and padding may seem like the same thing but if you think about it, you can see how being able to control the space before the border (padding) and after the border (margins) can really effect your layouts.

In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order that which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:

margin-top: 50px;

And for the navigation div I set it to:

margin-top: 0px;

This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div. I would suggest that you move the position of the navigation div under the center doc div in the HTML just to see if it changes anything, you will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used. Another thing to try is to play with the CSS values and see what happens, change the padding, change the margins etc .

CASCADING STYLE SHEETS TUTORIAL

2008-07-21T09:21:00.000-07:00

In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages.

After completing this tutorial, you should have enough information to explore CSS and web design even further.

You can download the CSS and HTML files we build in this tutorial: CSS files
You can check out what the page should look like here: CSS example page

THINGS TO REMEMBER ABOUT CSS:

Remember that CSS code is simply written instructions that tells Web browsers (like FireFox and Internet Explorer) how to display things on a page. For example:

make text bold.
position things a page.
set the font style for a page or paragraph etc.

The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the page.

... I know you knew that already, I just wanted to remind you!

CSS REDUCES THE NUMBER OF TAGS USED

Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.

The tags we will use to layout the content:

1. The Heading tags which range from '' to '', are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a

tag and the least important in a

tag.
An example of a heading:

CSS Template Layout

This tells the browsers and the search engines too, that this page is primarily about: 'CSS Template Layout'

All browsers have a default size (for each tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially

) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking.
2.
The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what they call a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each
tag pair. You see it work in the examples coming up.

3.
and
List tags will used to create our menus. The tag
is the 'un-ordered list tag' that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term 'un-ordered'. The other list tag mentioned (
) is the 'ordered list tag' and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code examples to follow.
4.
We all know what the
tag is about since we all read the previous article, right? We will use div's to create containers for parts of our page. One div will be used to 'hold' our navigational menu and another div to 'hold' the main page.
5. The most important tag in HTML: the 'link tag' or the 'hyperlink tag'. This makes text 'hyper' so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script).

6. This is the 'image tag', allows you to link to images so that they show up in our pages. In HTML images are not embedded into the actual page, instead the image tag () only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page.

That covers the HTML tags we will use in our layout! No need for table tags,
tags and nasty tags.

THE BASIC PAGE TEMPLATE

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:' Follow the instructions there and create your basic HTML page.

Once you have created the template page, create a folder and name it something like: 'myCSSwebsite' and then drop the HTML page into it. In that same folder, create a new text document and call it: 'myCSS.css'. Once created open that file and paste in this template CSS code and then save it:

/* Generic Selectors */

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

background-color: #F9F9F9;

}

p {

width: 80%;

}

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #C6EC8C;

}

/**** Pseudo classes /

a:link {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li :link {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:visited {

color: #00CC00;

text-decoration: underline;

font-weight: bold;

}

li a:visited {

color: #00CC00;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

li a:hover {

display: block;

color: rgb(0, 96, 255);

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

a:active {

color: rgb(255, 0, 102);

font-weight: bold;

}

/* ID's *************/

#navigation {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

padding: 0 0 20px 0; /top right bottom left/

margin-top: 50px;

margin-left: 235px;

}

Don't let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.

In between the tags you will need to insert this code:

The Main navigation

The Main Heading

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.

Follow the instructions there and create your basic HTML page ... and do it now!

And in between the tags you will need to insert this:

First CSS Tutorial

Top CSS Shortcuts

2008-07-21T09:17:00.000-07:00

Top CSS Shortcuts

When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:

.header { padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px; }

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:

.header { padding:5px 10px 5px 10px; }

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:

.header { padding:5px 10px; }

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:

.header { padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px; margin-top:5px; margin-right:10px; margin-bottom:5px; margin-left:10px; }
Can now look much neater, and is obviously much quicker to write using the following:

.header { padding:5px 10px; margin:5px 10px; }

Background properties

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:

.header { background-image:url(images/image.jpg); background-position:top; background-repeat:repeat-x; background-color:#fff; }

However, with some nifty CSS it could look like this:

.header { background: #fff url(images/image.jpg) repeat-x top; }

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Font shortcuts

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:

body { font-weight: bold; font-family: verdana, sans-serif; font-size: 0.8em; line-height: 1.2em; }

Here is the shortcut:

body { font: bold 0.8em/1.2em verdana, sans-serif; }

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

Borders

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:

.header { border-width: 1px; border-color: #000; border-style: solid; }

This can be shorted to the following:

.header { border:1px solid #000; }

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

Conclusion

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

CSS Shortcuts Tutorial

2008-07-21T09:14:00.000-07:00

CSS Shortcuts

In CSS, there are a numerous ways to code the same style. In the tutorial, I'll explain some of the most common shortcut structures that will allow you to make your css styles as small and effcient as possible.

Fonts
When defining fonts, you can combine 4 of the most used css attributes into one. For instance, the old-school way of writing this font style:

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 16px;

can be written using shortcut methods as:

font: bold 11px/16px verdana, sans-serif;

The attributes must be arranged in the same order or web browsers will get confused.

Hex-decimal Colors
Color attributes for all kinds of CSS styles can be written using defined using hex-decimal colors like color: #ff6600; for a shade of orange. Colors that are made up of pairs of repeated digits can be simplified by using 3 digits instead of all six. For instance, the orange hex-decimal code can be abbreviated as color: #f60;. Each digit represents two digits in the full hex-decimal code. So, if you what to use the color white in your code, don't use color: white; or color: #ffffff;. That's so 1997. Be cool and use color: #fff;. (And just like that you may have saved a character or three...great stuff).

Borders
If you were to right out the long-hand version of border code, it could take up some serious space. For example, just to define common attributes for a top border of something you could end up writing:

border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;

That can be simplified to:

border-top: 2px dashed #f00;

Additionally, if you are going to define all four borders you can just use one border attribute like:

border: 2px dashed #f00;

Margins, Padding, and Borders
Margins, padding, and borders all have similar CSS coding, such as:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;

All four attributes can be defined in shortcut notation like this:

margin: 10px 5px 20px 15px;

Note that the attributes go around clock-wise starting from the top. Margin, padding, and borders can be shorted further when some of the attributes are the same. Here is a list all four combinations of shorcuts:

4 Values: (margin: 20px 15px 10px 5px;) first - top, second - right, third - bottom, fourth - left.
3 Values: (margin: 20px 15px 10px;) first - top, second - left & right, third - bottom.
2 Values: (margin: 20px 15px;) first - top & bottom, second - left & right.
1 Value: (margin: 10px;) first - top, right, bottom, & left

Zeros
While we're talking about shortcuts, it's probably good to note that when defining any size attributes using px, em, pt, pc, in or what ever other measuring increment you wish to use, you can always leave off the measurement unit for values of 0 (ie: 0, 0px, 0em, and 0pt) are all the same. The only caveat is when you are defining with percentages. For reasons beyond our scope of knowlege, the powers that be at the W3C made it necessary to add the % sign to 0%. In some browsers, it doesn't matter. But to be safe, use 0% with combinations of other percentages.

CSS: Shortcuts tips

2008-07-21T09:12:00.000-07:00

CSS: Shortcuts tips
(Still on old news for you CSS-pros. I’m wondering why YOU’RE not writing this blog. All the comments have been more helpful than my posts!! LOL!)
Just wanted to jot these down so I could find them later:
font-weight: bold;font-size: 10px;font-family: Verdana,Arial,Helvetica,sans-serif;shortcut:font: bold 10px Verdana,Arial,Helvetica,sans-serif;
margin/padding shortcuts:margin: top# right# bottom# left#ie. margin: 5px 0px 2px 10px;ormargin: top&bottom# left&right#ie. margin: 10px 5px;
color shortcuts (websafe hex)color: #000000;shortcut: color: #000color: #FFCC00;shortcut: color: #FC0;

CSS Shortcuts

2008-07-21T09:10:00.000-07:00

Shortcuts
In CSS, there are a numerous ways to code the same style. In the tutorial, I'll explain some of the most common shortcut structures that will allow you to make your css styles as small and effcient as possible.
Sponsors - Spoono Host

FontsWhen defining fonts, you can combine 4 of the most used css attributes into one. For instance, the old-school way of writing this font style:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 16px;
can be written using shortcut methods as:font: bold 11px/16px verdana, sans-serif;
The attributes must be arranged in the same order or web browsers will get confused.
Hex-decimal ColorsColor attributes for all kinds of CSS styles can be written using defined using hex-decimal colors like color: #ff6600; for a shade of orange. Colors that are made up of pairs of repeated digits can be simplified by using 3 digits instead of all six. For instance, the orange hex-decimal code can be abbreviated as color: #f60;. Each digit represents two digits in the full hex-decimal code. So, if you what to use the color white in your code, don't use color: white; or color: #ffffff;. That's so 1997. Be cool and use color: #fff;. (And just like that you may have saved a character or three...great stuff).
BordersIf you were to right out the long-hand version of border code, it could take up some serious space. For example, just to define common attributes for a top border of something you could end up writing:border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;
That can be simplified to:border-top: 2px dashed #f00;
Additionally, if you are going to define all four borders you can just use one border attribute like:border: 2px dashed #f00;
Margins, Padding, and BordersMargins, padding, and borders all have similar CSS coding, such as:margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;
All four attributes can be defined in shortcut notation like this:margin: 10px 5px 20px 15px;
Note that the attributes go around clock-wise starting from the top. Margin, padding, and borders can be shorted further when some of the attributes are the same. Here is a list all four combinations of shorcuts:
4 Values: (margin: 20px 15px 10px 5px;) first - top, second - right, third - bottom, fourth - left.3 Values: (margin: 20px 15px 10px;) first - top, second - left & right, third - bottom.2 Values: (margin: 20px 15px;) first - top & bottom, second - left & right.1 Value: (margin: 10px;) first - top, right, bottom, & left
ZerosWhile we're talking about shortcuts, it's probably good to note that when defining any size attributes using px, em, pt, pc, in or what ever other measuring increment you wish to use, you can always leave off the measurement unit for values of 0 (ie: 0, 0px, 0em, and 0pt) are all the same. The only caveat is when you are defining with percentages. For reasons beyond our scope of knowlege, the powers that be at the W3C made it necessary to add the % sign to 0%. In some browsers, it doesn't matter. But to be safe, use 0% with combinations of other percentages.

Arrow Bullet List Menu

2008-06-27T12:10:00.000-07:00

This CSS list menu features category headers with a two toned background, UL elements that have their default margins and padding removed, and finally, LI elements with custom bullet images. The result is something simple but elegant, and resembling something you might have seen on this site already! Note: For a version of this menu that dynamically expands and hides its sub menus, see Accordion Menu.

Demo:

CSS Library

CSS Drive

The two images used:

The CSS:

Select Code Expand

<style type="text/css">  .arrowlistmenu{ width: 180px; /*width of menu*/ }  .arrowlistmenu .headerbar{ font: bold 14px Arial; color: white; background: black url(media/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ }  .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ }  .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ }  .arrowlistmenu ul li a{ color: #A70303; background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; }  .arrowlistmenu ul li a:visited{ color: #A70303; }  .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; }  </style>

The HTML:

Select Code Expand

<div class="arrowlistmenu">  <h3 class="headerbar">CSS Library</h3> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul>  <h3 class="headerbar">CSS Drive</h3> <ul> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul>  </div>

png transparency problems

2008-06-27T12:04:00.000-07:00

If you are CSS coder, you've probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I'll tell you few problems and solutions I've handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your tag

The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.

.someelement {

background-image: url(images/image.png);

}



* html .someelemen {

background-color: #333;

back\ground-color: transparent;

background-image: url(images/blank.gif);

filter: progid:DXImageTransform.Microsoft.

AlphaImageLoader(src="images/image.png", sizingMethod="scale");

}

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn't work in IE6

.someelement:hover {

background: #333;

}



.someelement:hover {

background-image: url(images/image2.gif);



}

Only problem I had with this was with tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.

What it's all about...

2008-06-27T11:53:00.000-07:00

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.

CSSplay, by the way, is now listed on the w3c.org website.

So I have created this site in the hope that it will help newcomers to CSS and show old hands that it is more than just a mechanism for styling your documents. It is oh so much more.

Because CSSplay deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations. For javascript demonstrations please click the javascript link in the main navigation bar which will take you to my other site which is dedicated to demonstrations using CSS and minimal, unobtrusive, javascript.

Use the correct DocType Definition (DTD)

Please , please, please note that for most of my demonstrations to work, especially in Internet Explorer, you MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html.
Using will switch IE into quirks mode.

A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.

Most used CSS Tricks

2008-06-27T11:49:00.000-07:00

Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images


"container">

"rtop">

"r1"> "r2"> "r3"> "r4">





"rbottom">

"r4"> "r3"> "r2"> "r1">







.rtop, .rbottom{display:block}

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}

.r1{margin: 0 5px}

.r2{margin: 0 3px}

.r3{margin: 0 2px}

.r4{margin: 0 1px; height: 2px}

2. Style your order list








This is line one







Here is line two







And last line







ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}



ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

3. Tableless forms




"name">Name

"name" name="name">


"address">Address

"address" name="address">


"city">City

"city" name="city">






label,input {

display: block;

width: 150px;

float: left;

margin-bottom: 10px;

}



label {

text-align: right;

width: 75px;

padding-right: 20px;

}



br {

clear: left;

}

4. Double blockquote


blockquote:first-letter {

background: url(images/open-quote.gif) no-repeat left top;

padding-left: 18px;

font: italic 1.4em Georgia, "Times New Roman", Times, serif;

}

5. Gradient text effect


CSS Gradient Text



h1 {

font: bold 330%/100% "Lucida Grande";

position: relative;

color: #464646;

}

h1 span {

background: url(gradient.png) repeat-x;

position: absolute;

display: block;

width: 100%;

height: 31px;

}

6. Vertical centering with line-height


div{

height:100px;

}

div *{

margin:0;

}

div p{

line-height:100px;

}



Content here

7. Rounded corners with images


"roundcont">

"roundtop">

"tl.gif" alt=""

width="15" height="15" class="corner"

style="display: none" />





CONTENT

"roundbottom">

"bl.gif" alt=""

width="15" height="15" class="corner"

style="display: none" />







.roundcont {

width: 250px;

background-color: #f90;

color: #fff;

}



.roundcont p {

margin: 0 10px;

}



.roundtop {

background: url(tr.gif) no-repeat top right;

}



.roundbottom {

background: url(br.gif) no-repeat top right;

}



img.corner {

width: 15px;

height: 15px;

border: none;

display: block !important;

}

8. Multiple class name


"image.gif" class="class1 class2" alt="" />



.class1 { border:2px solid #666; }

.class2 {

padding:2px;

background:#ff0;

}

9. Center horizontally


"container">



#container {

margin:0px auto;

}

10. CSS Drop Caps


"introduction"> This paragraph has the class

"introduction".

 If your browser supports the pseudo-class

"first-letter", the first letter will be a drop-cap.



p.introduction:first-letter {

font-size : 300%;

font-weight : bold;

float : left;

width : 1em;

}

11. Prevent line breaks in links, oversized content to brake


a{

white-space:nowrap;

}



#main{

overflow:hidden;

}

12. Show firefox scrollbar, remove textarea scrollbar in IE


html{

overflow:-moz-scrollbars-vertical;

}



textarea{

overflow:auto;

}

CSS HACKS

2008-06-27T11:47:00.000-07:00

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I've written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..

Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

1. Vertical align div

http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height


selector {
min-height:500px;
height:auto; !important
height:500px;
}

3. PNG transparency

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Autoclear


.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

5. Reset CSS


html, body, div, span,
 applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p,
 blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small,
 strike, strong, sub, sup, tt, var, dl, dt,
 dd, ol, ul, li, fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th,
 td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

6. Scrolling Render IE


html {
     background : url(null) fixed no-repeat;
    }

7. Opacity


#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

8. PRE Tag


pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

9. Li Background Repeat IE

10. Good to know


@charset "UTF-8";

/* ----------------------------------------------------------------------
 WinIE7
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}

/* ----------------------------------------------------------------------
 WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}

/* ----------------------------------------------------------------------
 WinIE6
---------------------------------------------------------------------- */
/*\*/
* html selector{property:value;}
/**/

/* ----------------------------------------------------------------------
 MacIE
---------------------------------------------------------------------- */
/*\*//*/
selector{property:value;}
/**/

CSS and Round Corners: Build Boxes with Curves

2008-06-27T11:44:00.000-07:00

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we'll use CSS to create this box with round corners, without an tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/img"> tag in sight!

How it Works

The above is basically a normal box that has an orange background colour, over which four corner images are superimposed. All these images have been called up through CSS commands.

So, we start off with the following snippet:

Lorem ipsum dolor sit amet consectetur adipisicing elit

We've used class="bl" as we're going to assign our bottom right corner to this tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

through a CSS command. As a rule, you can only assign one background image to an HTML tag using CSS, so this is the only image we'll assign to this tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

1465_1bl (click to view image)

We'll use the above image, called bl.gif, which we'll place in the bottom-left corner with the following CSS command:

.bl {background: url(bl.gif) 0 100% no-repeat; width: 20em}

The CSS background command is broken into three sections: the image URL, its position, and a repeat command. We also inserted a width CSS command so that the box doesn't cover the whole of the screen. Let's examine the three background commands in turn:

Image URL - Remember, the image is being called through the CSS, so the path to the image must be the path from the CSS document, not the HTML document.
Image Position - In this example, we've used the command 0 100% in our CSS rule. The first number represents the distance from the left edge of the
; the second number identifies the distance from the top edge. In this instance % was used, but a different distance value, such as em or px, could just as easily have been used instead. If this command was left out, the default value, 0 0, would be used, and the image would be placed in the top-left corner.
Repeat Command – Obviously, we don't want this image to repeat, so we insert the no-repeat CSS command. If we wanted to, we could have used repeat-x, to repeat the image horizontally, repeat-y, to repeat it vertically, and repeat to repeat it both horizontally and vertically. If this command was left out, the default value, repeat, would be used.

It doesn't matter in which order these three CSS background commands are placed. Our box with curves now looks like this.

Bottom-Right Curve

Next, we'll stick in that bottom-right curve. As previously mentioned, we can only assign one background image to each tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

in the CSS, so we'll need to insert a new tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">



Lorem ipsum dolor sit  amet consectetur adipisicing elit

Here's the image we'll use:

1465_1br (click to view image)

Naming this bottom-right image br.gif, we'll insert a new CSS rule:

.br {background: url(br.gif) 100% 100% no-repeat}

This CSS rule is essentially the same as the last one, although now we've changed the position from the left to 100%, where previously it was 0%. The box now looks like this.

Top Curves

To make our top curves, we'll need two new images:

1465_1tl (click to view image)

1465_1tr (click to view image)

We'll call these tl.gif and tr.gif. We'll need to create two new tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

s for them:



Lorem ipsum dolor sit amet consectetur  adipisicing elit

The new CSS rules are as follows:

.tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat}

These give us this display.

Background Colour

We'll now insert our orange background colour into the box, in order to achieve the whole round corners effects.

The background colour must always be assigned to the very first CSS rule. This is because each CSS background rule is essentially a layer on top of the previous one. So, in this example, we have a layering order of br.gif, bl.gif, tl.gif and then tr.gif. But, in this example, the images don't overlap, so we don't really notice this layering effect.

By default, a background colour covers the entire tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

and will layer on top of any other previously assigned background images and/or colours. Therefore, if we place the orange colour in any tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

other than the first, it will be placed on top of the preceding images and will essentially cause them to disappear. Therefore, we must place our orange background colour (#e68200) in the very first CSS rule:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}

As before, it doesn't matter where we place this colour command within the CSS background rule. Our box now looks like this.

Padding

Padding is needed to prevent the text from overlapping on to the images, which are 10px x 10px in size. Therefore, we need 10px-worth of padding on the text. But to which tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

should we assign the padding CSS rule? Does it matter? Well, yes it does.

Whichever element we assign padding to, each of the elements inside it will inherit that padding. If we were to assign padding to the very first tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

, we'd get this effect.

To get this padding to work properly, we need to assign it to the very last tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

:

.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Here's how it looks now.

Internet Explorer Issues

You may have noticed the bottom corners were called up before the top corners. If we were to do things the other way round, that is, call the top corners first, some parts of the orange background colour would sneak out under the bottom curves, causing a rather unsightly effect. Switch the order of the tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/div">

s around and see for yourself.

Another issue in Internet Explorer is that the background colour of the box sometimes overlaps on to the element below, again causing an unattractive effect. This can be solved simply by placing a tiny placeholder beneath the box with round corners. Immediately after the fourth closing

, insert the following HTML:

Now, assign it this CSS rule:

.clear {font-size: 1px; height: 1px}

The Final Code

Our finished HTML now looks like this:



Lorem ipsum dolor sit amet consectetur  adipisicing elit

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px}

CSS and Round Corners: Build Accessible Menu Tabs

2008-06-27T11:42:00.000-07:00

One of the best Websites out there, in terms of functionality, is Amazon.

In terms of accessibility, though, it's not great.

The Problem

Amazon's menu tabs, with their nice round corners, look good -- but they're totally inaccessible. First of all, they're missing ALT tags. Additionally, the W3C accessibility guideline 3.1 (priority 2) clearly states:

When an appropriate markup language exists, use markup rather than images to convey information.

This basically means that we shouldn't use images to display text. Users with poor vision are unable to resize text that's displayed through images. Similarly, users of screen magnifiers may be unable to read text embedded in images, as it can appear blurry and pixelated to them.

The Solution: CSS Menu Tabs

CSS, as usual, comes to our rescue. Look at this menu tab, created through HTML and CSS -- not an tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/img"> tag in sight!

1388_home1 (click to view image)

Have a look at it in action -- when you do, adjust the text size in your browser. Notice that the menu tab increased in size with the text: it all fits perfectly.

Today, you're going to learn how to do this.

How It's Done

We start with a simple link:

Home

We'll assign it this CSS code:

#navigation a { color: #000; background: #fb0; text-decoration: none }

This gives us the following result:

1388_home2 (click to view image)

It needs a bit of work, right? Let's do it.

Add the Left Menu Tab Corner

We need to make a small image with the same colour for the rounded left-hand corner. Here's one I made earlier.

1388_taborangeleft (click to view image)

Let's call this image left-tab.gif and place it into the background of the link using this CSS rule:

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none }

This new CSS rule says that the background image should be left-menu-tab.gif, the image should be on the left at the top, and it shouldn't be repeated. The result?

1388_home3 (click to view image)

We're getting there, but we need to move the text over slightly as it's overlapping the left rounded corner. It's pretty simple to reposition the text with the addition of padding to our CSS rule:

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px }

1388_home4 (click to view image)

The Right Corner

We can only assign one background image to a CSS rule, so we need to make a new CSS rule and assign the right corner image to that. We'll start by inserting a tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span"> tag into the HTML code:

Home

Now we'll create a new CSS rule in which we'll assign the right menu tab shown below (another one I made earlier) to the tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span">, and we're ready to go!

1388_taborangeright (click to view image)

We'll name this image right-tab.gif.

#navigation a span { background: url("right-tab.gif") right top no-repeat; }

This CSS rule means that every tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span"> tag within an tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/a"> tag will have this image as its background. The final result looks like this:

1388_home5 (click to view image)

Perfect... No, wait a minute! Can you spot why it's not so perfect? We forgot to assign some padding to that tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span"> tag in the CSS rule:

#navigation a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px }

This code gives us:

1388_home1 (click to view image)

Now, that really is perfect! Have a look at the results here and resize the text to see how it looks.

The Final CSS Touches

Let's assign this link a nice hover effect using a few final CSS rules. We'll need a couple more background images:

1388_tabblueleft (click to view image)

We'll call this left-tab-hover.gif.

1388_tabblueright (click to view image)

This one's named right-tab-hover.gif.

Now, we just insert the following CSS rules, and away we go!

#navigation a:hover { color: #fff; background: #fb0 url("left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a:hover span { background: url("right-tab-hover.gif") right top no-repeat; padding-right: 10px }

Have a look at this code in action -- be sure to mouse over it!

Make a Tab Menu

Now we've done all the hard work, we can make as many of these menu tabs as we want:

1388_nav (click to view image)

See the nav in action -- be sure to mouse over the nav items!

Looks great, doesn't it? Note, though, that building your menu this way does bring up a new accessibility problem: this navigation won't make sense to anyone who has disabled CSS. Without CSS, the navigation looks like this:

1388_nocssnav (click to view image)

That's quite a problem. The solution? Let's put the tabs into a list! The HTML will look like this:

<ul id="navigation"> <li>Home</li> <li>Services</li> <li>Take a tour</li> <li>About us</li> <li>Contact us</li> </ul>

Now, let's create some CSS rules for our list items, so that all the menu tabs display next to one other on the same line:

#navigation { list-style: none; padding: 0; margin: 0; } #navigation li { float: left; display: block; margin: 0; padding: 0; }

To get rid of the bullets, we used the CSS command, list-style: none. To display our menu tabs inline, stacked next to each other, we used float: left.

At this point, some of the more expert CSS coders may question the point of keeping the tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span"> tag, especially those who've read Doug Bowman's Sliding Doors article. The reason we leave in the tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/span"> tag is to make the entire menu tab clickable. If we were to assign one of the corners to tag in the SitePoint HTML Reference." href="http://reference.sitepoint.com/html/li">

as a background image, that corner wouldn't be clickable.

IE 5.x Problems

Unfortunately, these tabs won't work on IE 5.0 on PC (and a couple of other browsers), as the rounded edges of the tabs don't appear. As such, each menu tab will be displayed as a rectangle, with sharp corners. There's an easy solution to this, which is to insert display: block into the #navigation a and #navigation a span CSS commands.

Sounds easy, right? Unfortunately, it's not. By inserting these commands into the CSS, IE 5 on Mac will stack the menu items on top of each other. To make these display properly for IE 5 on Mac, we'll need to also insert the float:left command, but apply it only to this browser. But how do we apply a CSS command to just one browser? Easy -- we use the commented backslash hack:

#navigation a, #navigation a span { display: block; float: left } /* Commented backslash hack hides rule from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End IE5-Mac hack */

The first CSS command says to float the menu tab content to the left, and the second CSS command cancels this out for every browser except IE 5 on Mac. When two CSS commands are specified for the same selector, the second one always takes precedence. However, IE 5 on Mac can't read the second command because of the slashes and stars, so defaults to the first CSS command. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack by Sam Foster.)

The Final Code

The final HTML is:



Home 

Services 

Take a  tour

About us 

Contact  us

And here's the entire CSS code:

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Commented backslash hack hides rule from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End IE5-Mac hack */ #navigation a:hover { color: #fff; background: #26a url("left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a:hover span { background: url("right-tab-hover.gif") right top no-repeat; padding-right: 10px } #navigation { list-style: none; padding: 0; margin: 0 } #navigation li { float: left; display: block; margin: 0; padding: 0 }

The End Product... With and Without CSS

Let's look at it one more time. First, the CSS version of the nav:

1388_nav (click to view image)

When CSS is disabled, it looks like this:

1388_navdisabled (click to view image)

Now, that really is accessible!

Style Web Forms Using CSS

2008-06-27T11:40:00.000-07:00

Whether your main business is Web design or backend development, chances are you spend a fair amount of time creating forms for user input. So you already know that the default appearance of forms isn't always appropriate for the look and feel of your site.

In this article we'll look at how you can use CSS to create attractive and usable forms.

Styling Form Elements

It's possible to change the default look of form elements by styling their html tags: input, select and textarea.

The input Tag

Defining rules for the input tag will change any instance of that tag in your document. For example, if I wish all elements to have a purple background, I could define the following in my style sheet.

input { background-color: #666699; }

This will add a purple background color to those elements that are marked up using the input tag.

1166_image1 (click to view image)

The select Tag

The </code> tag marks up multiple line text input fields. Once again, setting rules for textarea will change the look of all of these elements in your document.</p> <p><code>textarea { <br /> background-color: #666699; <br /> color: #ffffff; <br />}</code> <br /> <br /><span class="beatbox"><em>1166_image3 (click to view image)</em></span></p> <p><strong><em>The <code class="ref-term">form</code> Tag</em></strong></p> <p>You can also style the form tag itself, adding borders, background colors and adjusting the margins and padding. Form is a block level element, so you can change the way it displays in much the same way that you would style a paragraph.</p> <p><code>form { <br /> border: 1px solid #666699; <br /> padding: 5px; <br />}</code> <br /> <br /><span class="beatbox"><em>1166_image4 (click to view image)</em></span></p><div class="blogger-post-footer"></div> </article> <article> <h1>Style Web Forms Using CSS</h1> <p>2008-06-27T11:36:00.000-07:00</p> We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it’s time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.<br /><br />Of course, real CSS ninjas accept nothing but a minimalistic Notepad or some sophisticated source code-editor. In fact, CSS-editors are often considered to be unnecessary and superflous — after all, you can do the same in your favourite text editor. And sometimes this is true — while there are some really bad HTML-editors there are also some even worse CSS-editors. Particularly code autocompletion tools are extremely good at bloating the code to extremes, making the resulting stylesheet unnecessary complex and hard to maintain. Why would someone purchase a CSS-editor to raise the maintenance costs afterwards?<br /><br />Yet CSS-editors can be helpful; furthermore, you can effectively use them in different settings by developers with different skills. Web professionals can use a CSS-editor to improve workflow and get all useful CSS-tools provided by one single application. Newbies can easier learn CSS by analzying stylesheets and using live-editing to understand how the design is built up and what is actually going on behind the scenes. In either case you should make sure you know what you are doing and not end up producing quick’n'dirty stylesheet.<div class="blogger-post-footer"></div> </article> <article> <h1>70 Expert Ideas For Better CSS Coding</h1> <p>2008-06-27T11:33:00.000-07:00</p> CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. <br /> <br />We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them. <br /> <br />And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post. <br /> <br />We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects - you name it - really appreciate it. <br /> <br />You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects. <br /> <br />Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurício Samy Silva. <br /> <br />1.1. Workflow: Getting Started <br />After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing] <br />Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] <br />master.css <br />@import url(”reset.css”); <br />@import url(”global.css”); <br /> <br />@import url(”flash.css”); <br />@import url(”structure.css”); <br /><style type="text/css" media="Screen"> <br />/**/@import url("css/master.css");/**/ <br /></style> <br />Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson] <br />Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller] <br />CSS: <br />.width100 { width: 100%; } <br />.width75 { width: 75%; } <br />.width50 { width: 50%; } <br />.floatLeft { float: left; } <br />.floatRight { float: right; } <br />.alignLeft { text-align: left; } <br />.alignRight { text-align: right; } <br />Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. <br />1.2. Organize your CSS-code <br />Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:” <br />h2 { } <br />#snapshot_box h2 { <br /> padding: 0 0 6px 0; <br /> font: bold 14px/14px "Verdana", sans-serif; } <br />#main_side h2 { <br /> color: #444; <br /> font: bold 14px/14px "Verdana", sans-serif; } <br />.sidetagselection h2 { <br /> color: #fff; <br /> font: bold 14px/14px "Verdana", sans-serif; } <br />Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS] <br />/* -----------------------------------*/ <br />/* ---------->>> GLOBAL <<<-----------*/ <br />/* -----------------------------------*/ <br />Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven] <br />Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya] <br />body { <br /> background: #fdfdfd; <br /> color: #333; <br /> font-size: 1em; <br /> line-height: 1.4; <br /> margin: 0; <br /> padding: 0; <br />} <br />Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks] <br />Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr] <br />Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook] <br />1.3. Workflow: Handling IDs, Classes, Selectors, Properties <br />Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr] <br />Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing] <br />Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook] <br />Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] <br />Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew] <br /># /* <br /># Dark grey (text): #333333 <br /># Dark Blue (headings, links) #000066 <br /># Mid Blue (header) #333399 <br /># Light blue (top navigation) #CCCCFF <br /># Mid grey: #666666 <br /># */ <br />Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips] <br />Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon] <br />Group selectors with common CSS declarations. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson] <br />Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven] <br />Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano] <br />Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven] <br />Use Your Utility Tags: <small>, <em> and <strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips] <br />1.4. Workflow: Use shorthand notation <br />Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson] <br />Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer] <br />a:link { color: blue; } <br />a:visited { color: purple; } <br />a:hover { color: purple; } <br />a:active { color: red; } <br />Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson] <br />You can use shorthand properties. “Using shorthand for margin, padding and border properties can save a lot of space. <br />CSS: <br />margin: top right bottom left; <br />margin: 1em 0 2em 0.5em; <br />(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;) <br />CSS: <br />border: width style color; <br />border: 1px solid #000; <br />CSS: <br />background: color image repeat attachment position; <br />background: #f00 url(background.gif) no-repeat fixed 0 0; <br />CSS: <br />font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; <br />font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif; <br />1.5. Workflow: Setting Up Typography <br />To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook] <br />Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips] <br /><meta http-equiv="content-type" content="text/ html;charset=utf-8" /> <br />You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips] <br />h1 { <br /> text-transform: uppercase; <br />} <br />You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text. <br />h1 { <br /> font-variant: small-caps; <br />} <br />Cover all the bases - define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits] <br />p { <br /> font-family: Arial, Verdana, Helvetica, sans-serif; <br />} <br />Use 1.4em - 1.6em for line-height. “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya] <br />Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits] <br />1.6. Workflow: Debugging <br />Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet] <br />* { border: 1px solid #f00; } <br />Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips] <br />2.1. Technical Tips: IDs, Classes <br />1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson] <br />Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson] <br />CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices] <br />You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson] <br />2.2. Technical Tips: Use the power of selectors <br />Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated). <br /> <br />You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson] <br />div > strong { color:#f00; } <br />You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson] <br />p + p { color:#f00; } <br />You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match: <br />[att] <br />Matches elements that have an att attribute, regardless of its value. <br />[att=val] <br />Matches elements that have an att attribute with a value of exactly “val”. <br />[att~=val] <br />Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces. <br />[att|=val] <br />Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc. <br />The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has: <br />p[title] { color:#f00; } <br />The selector matches all div elements that have a class attribute with the value error: <br />div[class=error] { color:#f00; } <br />Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value): <br />blockquote[class=quote][cite] { color:#f00; } <br />You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson] <br />2.3. Technical Tips: Styling Links <br />Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea] <br />Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another. <br />a[rel~="nofollow"]::after { <br /> content: "2620"; <br /> color: #933; <br /> font-size: x-small; <br />} <br />a[rel~="tag"]::after { <br /> content: url(http://www.technorati.com/favicon.ico); <br />} <br />“These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS] <br />You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS] <br />a[href^="http://"]:not([href*="smashingmagazine.com"])::after { <br /> content: "2197"; <br />} <br />You can remove dotted links with outline: none;. To remove dotted links use outline: none; <br />a:focus { <br /> outline: none; <br />} <br />2.4. Technical Tips: CSS-Techniques <br />You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers] <br />You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images. <br />You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org] <br />You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more. <br />You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices] <br />You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know] <br />XHTML: <br /><ul> <br /><li><a href=”#” class=”home”>Home</a></li> <br /><li><a href=”#” class=”about”>About us</a></li> <br /> <br /><li><a href=”#” class=”contact”>Contact us</a></li> <br /></ul> <br />Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. <br />CSS: <br />#home .home, #about .about, #contact .contact <br />{ <br /> commands for highlighted navigation go here <br />} <br />You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson] <br />XHTML: <br /><div id=”wrap”> <br /><!– Your layout goes here –> <br /></div> <br />CSS: <br />#wrap { <br />width:760px; /* Change this to the width of your layout */ <br /> <br />margin:0 auto; <br />} <br />You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag] <br /><?xml version="1.0" ?> <br /><?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> <br /> <br />... <br />You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson] <br />@import "main.css"; <br />Always declare margin and padding in block-level elements. [10 CSS Tips] <br />Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook] <br />Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet] <br />Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page: <br /><link rel="stylesheet" type="text/css" href="print.css" media="print"> <br />or <br /><style type=”text/css” media=”print”> @import url(print.css); </style> <br />This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips] <br />2.5. Technical Tips: IE Tweaks <br />You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com] <br />#regular_logo <br />{ <br /> background: url('test.png'); width:150px; height:55px; <br />} <br />/* */ <br />* html #regular_logo <br />{ <br /> background:none; <br /> float:left; <br /> width:150px; <br /> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); <br />} <br />/* */ <br />You can define min-width and max-width in IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know] <br />#container <br />{ <br /> min-width: 600px; <br /> max-width: 1200px; <br /> width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); <br />} <br />You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson] <br /> <br /><div class="blogger-post-footer"></div> </article> <article> <h1>Top CSS Tips</h1> <p>2008-06-27T11:19:00.000-07:00</p> <p>I thought I'd share some of my habits when it comes to doing CSS work and let me warn you, some of what I have to say is probably a little controversial. But what's life without living it on the edge. (Yeah, I live an exciting life when CSS is considered 'the edge'.)</p> <h2>px for font sizes</h2> <p>Sacrilege, I know. There are perfectly good ways to get consistent font sizing and I really should use them but Internet Explorer is the only browser that I can think of that doesn't resize text. If the majority of your audience uses IE, then be nice to them and don't use pixels. Otherwise, I figure with IE7 supporting it, pixels are the new ems. </p> <p>When using pixel sizes, I also get to be sparing in my usage. I specify it on the body and any headers that need it. Inheritance is less of an issue (how many sites have you seen list items inexplicably smaller than the rest of the content like it was less important).</p> <h2>CSS declarations on one line</h2> <p>I've always put my entire declaration on one line. Here's an example to explain what I mean:</p><pre><code>h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}<br /><br />h2 {<br /> font-size:18px;<br /> border:1px solid blue;<br /> color:#000;<br /> background-color:#FFF;<br /> }</code></pre> <p>The second one may look prettier but it sure doesn't help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that's the part before the { and } ). I'm looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I've found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.</p> <h2>Blocking the Styles</h2> <p>I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. This is usually a small block as I only like to redefine what I need to. No global margin and padding reset for me. I clear the body and form and maybe adjust paragraph if the design really needs it. Otherwise, let the browser handle it. I find the more you try to override what the browser does, the more styles you have to put in, which simply adds to the time to track down bugs and maintain the code.</p> <p>After element declarations, I have my class declarations; things like classes for an error message or a callout would go hear. I usually only have a couple of these. </p> <p>Finally, the meat. I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I'll also declare containers even if they don't have any rules.</p><pre><code>#content {float:left;}<br /> #content p { ... }<br /><br />#sidebar {float:left;}<br /> #sidebar p { ... }<br /><br />#footer {clear:both;}<br /> #sidebar p { ... }</code></pre> <h2>Browser Support</h2> <p>Support only the latest browsers. That means dropping support for IE5 and IE5.5. Lots of time and effort to be saved here. No box model hacks needed for IE6. In fact, in supporting just the most recent versions of browsers, I end up using very few hacks. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that's it. Any hacks I do use are normally commented as such. Similar to the use of pixel measurements, you have to consider your audience before dropping browser support.</p> <p>The biggest thing for me is still triggering hasLayout in IE to do float containment and I've been using <code>zoom:1</code> for that. I like it because it's innocuous and shouldn't mess with anything else. </p> <h2>Containing Floats</h2> <p>I just touched on float containment so let's expand on that. My current approach to containing floats is using <code>overflow:hidden</code> (with possibly <code>zoom:1</code> for Internet Explorer). No clearing div or use of <code>:after</code>. Only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container.</p> <p>Keep in mind that the content within the container should be designed to stay within the container. Anything too big and it'll get clipped. Shifting things using negative margins outside the container will also get clipped.</p> <h2>Understand Overflow</h2> <p>Overflow is usually where people get bit by IE. If you've got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you've messed up your margins, widths, or padding on one of these containers but Firefox (et al) won't reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you're better off trying to fix the issue in the design.</p> <h2>Allow Block Elements to Fill Their Space Naturally</h2> <p>My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. Dealing with the box model can be such a pain, especially if you're dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.</p> <h2>Use CSS Shorthand</h2> <p>This might seem like beating a dead horse but I still see people doing really verbose statements where they're setting margin-top, margin-right, margin-bottom and margin-left. My general rule of thumb is, you can use the long form only if you're setting one side. Once you have to set more than one side, it'll take less bytes to use shorthand. </p> <p>In shorthand, remember that the properties start at the top and work clockwise. <code>margin: <i>top right bottom left</i>;</code> It's also handy to know the shorter forms if you have equal values for top and bottom or left and right. </p><pre><code>margin: 5px 10px 20px; /* top left/right bottom */<br />margin: 10px 20px; /* top/bottom left/right */<br />margin: 0; /* all sides */</code></pre> <p>For border, if you only have to set more than one side differently then use two declarations. The first to set all sides, and then a second to change the values for one of the properties.</p><pre><code>/* 1px blue border on the left and bottom */<br />border:1px solid blue; border-width: 0 0 1px 1px; </code></pre> <h2>Avoid Unnecessary Selectors</h2> <p>Just specify the minimum number of selectors necessary for the style. If you find yourself doing <code>ul li {...}</code> or <code>table tr td {...}</code> then you're being more verbose than you need. LI's will inevitably be in UL's (okay, I suppose they could find themselves in OL's, in which case, be more specific for those styles) and a TD will inevitably be in a TR and a TABLE.</p> <p>Or putting the element name in front of an ID selector (Example: div#navigation). I used to do this because it'd help me "remember" which element the ID is on. As it turns out, I tend to use similar class names from project to project and they inevitably appear on the same elements. I also tend to just do a search to find where something is. So, these days, I just leave it at <code>#navigation</code>.</p> <p>Using less selectors will mean less selectors will be needed to override any particular style — that means it's easier to troubleshoot.</p> <h2>Keep it Simple</h2> <p>If it hasn't been evident throughout this post, only add when you need to, and that includes hacks. No need to get any more complicated than you need to. </p> <p>Now, I'd love to hear some of your tips.</p><div class="blogger-post-footer"></div> </article> <article> <h1>Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties</h1> <p>2008-03-14T11:53:00.002-07:00</p> <p>The <a name="x36"><span class="index-def" title="list properties"><dfn>list properties</dfn></span></a> allow basic visual formatting of lists. As with more general markers, a element with 'display: list-item' generates a <a href="visuren.html#principal-box">principal box</a> for the element's content and an optional marker box. The other list properties allow authors to specify the marker type (image, glyph, or number) and its position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box. </p><p>Furthermore, when a marker M (created with 'display: marker') is used with a list item created by the list properties, M replaces the standard list item marker. </p><p>With the list properties, the <a href="colors.html#background-properties">background properties</a> apply to the principal box only; an 'outside' marker box is transparent. Markers offer more control over marker box style. </p><div class="propdef"> <dl><dt><span class="index-def" title="'list-style-type'"><a class="propdef-title" name="propdef-list-style-type"><strong>'list-style-type'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>disc </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>elements with 'display: list-item' </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies appearance of the list item marker if <a class="noxref" href="generate.html#propdef-list-style-image"><span class="propinst-list-style-image">'list-style-image'</span></a> has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. <strong>Note.</strong> Numbered lists improve document accessibility by making lists easier to navigate. </p><p>Glyphs are specified with <strong><span class="index-def" title="disc"><a class="value-def" name="value-def-disc">disc</a></span></strong>, <strong><span class="index-def" title="circle"><a class="value-def" name="value-def-circle">circle</a></span></strong>, and <strong><span class="index-def" title="square"><a class="value-def" name="value-def-square">square</a></span></strong>. Their exact rendering depends on the user agent. </p><p>Numbering systems are specified with:</p> <dl><dt><span class="index-def" title="decimal"><a class="value-def" name="value-def-decimal"><strong>decimal</strong></a></span> </dt><dd>Decimal numbers, beginning with 1. </dd><dt><strong><span class="index-def" title="decimal-leading-zero"><a class="value-def" name="value-def-decimal-leading-zero">decimal-leading-zero</a></span></strong> </dt><dd>Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99). </dd><dt><strong><span class="index-def" title="lower-roman"><a class="value-def" name="value-def-lower-roman">lower-roman</a></span></strong> </dt><dd>Lowercase roman numerals (i, ii, iii, iv, v, etc.). </dd><dt><strong><span class="index-def" title="upper-roman"><a class="value-def" name="value-def-upper-roman">upper-roman</a></span></strong> </dt><dd>Uppercase roman numerals (I, II, III, IV, V, etc.). </dd><dt><strong><span class="index-def" title="hebrew"><a class="value-def" name="value-def-hebrew">hebrew</a></span></strong> </dt><dd>Traditional Hebrew numbering. </dd><dt><strong><span class="index-def" title="georgian"><a class="value-def" name="value-def-georgian">georgian</a></span></strong> </dt><dd>Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...). </dd><dt><strong><span class="index-def" title="armenian"><a class="value-def" name="value-def-armenian">armenian</a></span></strong> </dt><dd>Traditional Armenian numbering. </dd><dt><strong><span class="index-def" title="cjk-ideographic"><a class="value-def" name="value-def-cjk-ideographic">cjk-ideographic</a></span></strong> </dt><dd>Plain ideographic numbers </dd><dt><strong><span class="index-def" title="hiragana"><a class="value-def" name="value-def-hiragana">hiragana</a></span></strong> </dt><dd>a, i, u, e, o, ka, ki, ... </dd><dt><strong><span class="index-def" title="katakana"><a class="value-def" name="value-def-katakana">katakana</a></span></strong> </dt><dd>A, I, U, E, O, KA, KI, ... </dd><dt><strong><span class="index-def" title="hiragana-iroha"><a class="value-def" name="value-def-hiragana-iroha">hiragana-iroha</a></span></strong> </dt><dd>i, ro, ha, ni, ho, he, to, ... </dd><dt><strong><span class="index-def" title="katakana-iroha"><a class="value-def" name="value-def-katakana-iroha">katakana-iroha</a></span></strong> </dt><dd>I, RO, HA, NI, HO, HE, TO, ... </dd></dl> <p>A user agent that does not recognize a numbering system should use 'decimal'. </p><div class="note"> <p><em><strong>Note.</strong> This document does not specify the exact mechanism of each numbering system (e.g., how roman numerals are calculated). A future W3C Note may provide further clarifications. </em></p></div> <p>Alphabetic systems are specified with:</p> <dl><dt><strong><span class="index-def" title="lower-latin"><a class="value-def" name="value-def-lower-latin">lower-latin</a></span></strong> or <strong>lower-alpha</strong> </dt><dd>Lowercase ascii letters (a, b, c, ... z). </dd><dt><strong><span class="index-def" title="upper-latin"><a class="value-def" name="value-def-upper-latin">upper-latin</a></span></strong> or <strong>upper-alpha</strong> </dt><dd>Uppercase ascii letters (A, B, C, ... Z). </dd><dt><strong><span class="index-def" title="lower-greek"><a class="value-def" name="value-def-lower-greek">lower-greek</a></span></strong> </dt><dd>Lowercase classical Greek alpha, beta, gamma, ... (έ, ή, ί, ...) </dd></dl> <p>This specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, 'lower-latin' rendering is undefined. Therefore, for long lists, we recommend that authors specify true numbers. </p><div class="html-example"> <p>For example, the following HTML document: </p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <br /><html> <br /> <head> <br /> <title>Lowercase latin numbering</title> <br /> <style type="text/css"> <br /> OL { list-style-type: lower-roman } <br /> </style> <br /> </head> <br /> <body> <br /> <ol> <br /> <li> This is the first item. <br /> <li> This is the second item. <br /> <li> This is the third item. <br /> </ol> <br /> </body> <br /></html> <br /></pre> <p>might produce something like this: </p><pre> i This is the first item. <br />ii This is the second item. <br />iii This is the third item. <br /></pre> <p>Note that the list marker alignment (here, right justified) depends on the user agent. </p></div> <div class="note"> <p><em><strong>Note.</strong> Future versions of CSS may provide more complete mechanisms for international numbering styles. </em></p></div> <div class="propdef"> <dl><dt><span class="index-def" title="'list-style-image'"><a class="propdef-title" name="propdef-list-style-image"><strong>'list-style-image'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td><a class="noxref" href="syndata.html#value-def-uri"><span class="value-inst-uri"><uri></span></a> | none | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>none </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>elements with 'display: list-item' </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the <a class="noxref" href="generate.html#propdef-list-style-type"><span class="propinst-list-style-type">'list-style-type'</span></a> marker. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>The following example sets the marker at the beginning of each list item to be the image "ellipse.png". </p><pre>UL { list-style-image: url("http://png.com/ellipse.png") } <br /></pre></div> <div class="propdef"> <dl><dt><span class="index-def" title="'list-style-position'"><a class="propdef-title" name="propdef-list-style-position"><strong>'list-style-position'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>inside | outside | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>outside </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>elements with 'display: list-item' </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies the position of the marker box in the principal block box. Values have the following meanings:</p> <dl><dt><strong>outside</strong> </dt><dd>The marker box is outside the principal block box. <strong>Note.</strong> CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers. </dd><dt><strong>inside</strong> </dt><dd>The marker box is the first inline box in the principal block box, after which the element's content flows. </dd></dl> <div class="html-example"> <p>For example: </p><pre><html> <br /> <head> <br /> <title>Comparison of inside/outside position</title> <br /> <style type="text/css"> <br /> UL { list-style: outside } <br /> UL.compact { list-style: inside } <br /> </style> <br /> </head> <br /> <body> <br /> <ul> <br /> <li>first list item comes first <br /> <li>second list item comes second <br /> </ul> <br /> <br /> <ul class="compact"> <br /> <li>first list item comes first <br /> <li>second list item comes second <br /> </ul> <br /> </body> <br /></html> <br /></pre> <p>The above example may be formatted as:</p></div><div class="blogger-post-footer"></div> </article> <article> <h1>Markers and lists</h1> <p>2008-03-14T11:53:00.001-07:00</p> Most block-level elements in CSS generate one principal block box. In this section, we discuss two CSS mechanisms that cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number). The marker box may be positioned inside or outside the principal box. Unlike :before and :after content, the marker box does not affect the position of the principal box, whatever the positioning scheme. <br /> <br />The more general of the two mechanisms is new in CSS2 and is called markers. The more limited mechanism involves the list properties of CSS1. The list properties give authors quick results for many common ordered and unordered list scenarios. However, markers give authors precise control over marker content and position. Markers may be used with counters to create new list styles, to number margin notes, and much more. <br /> <br />For instance, the following example illustrates how markers may be used to add periods after each numbered list item. This HTML program and style sheet: <br /> <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <br /><HTML> <br /> <HEAD> <br /> <TITLE>Creating a list with markers</TITLE> <br /> <STYLE type="text/css"> <br /> LI:before { <br /> display: marker; <br /> content: counter(mycounter, lower-roman) "."; <br /> counter-increment: mycounter; <br /> } <br /> </STYLE> <br /> </HEAD> <br /> <BODY> <br /> <OL> <br /> <LI> This is the first item. <br /> <LI> This is the second item. <br /> <LI> This is the third item. <br /> </OL> <br /> </BODY> <br /></HTML> <br /> <br />should produce something like this: <br /> <br /> i. This is the first item. <br /> ii. This is the second item. <br /> iii. This is the third item. <br /> <br />With descendant selectors and child selectors, it's possible to specify different marker types depending on the depth of embedded lists. <br /> <br /><div class="blogger-post-footer"></div> </article> <article> <h1>Counters in elements with 'display: none'</h1> <p>2008-03-14T11:52:00.000-07:00</p> An element that is not displayed ('display' set to 'none') cannot increment or reset a counter. <br /><br />Example(s):<br /><br />For example, with the following style sheet, H2s with class "secret" do not increment 'count2'. <br /><br />H2.secret {counter-increment: count2; display: none}<br /><br />Elements with 'visibility' set to 'hidden', on the other hand, do increment counters.<div class="blogger-post-footer"></div> </article> <article> <h1>css Counter styles</h1> <p>2008-03-14T11:51:00.004-07:00</p> By default, counters are formatted with decimal numbers, but all the styles available for the 'list-style-type' property are also available for counters. The notation is:<br /><br />counter(name)<br /><br />for the default style, or:<br /><br />counter(name, 'list-style-type')<br /><br />All the styles are allowed, including 'disc', 'circle', 'square', and 'none'. <br /><br />Example(s):<br /><br /><br />H1:before { content: counter(chno, upper-latin) ". " }<br />H2:before { content: counter(section, upper-roman) " - " }<br />BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }<br />DIV.note:before { content: counter(notecntr, disc) " " }<br />P:before { content: counter(p, none) }<div class="blogger-post-footer"></div> </article> <article> <h1>Nested counters and scope</h1> <p>2008-03-14T11:51:00.003-07:00</p> Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level. <br /><br />Example(s):<br /><br />Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element: <br /><br />OL { counter-reset: item }<br />LI { display: block }<br />LI:before { content: counter(item) ". "; counter-increment: item }<br /><br />The self-nesting is based on the principle that every element that has a 'counter-reset' for a counter X, creates a fresh counter X, the scope of which is the element, its preceding siblings, and all the descendants of the element and its preceding siblings. <br /><br />In the example above, an OL will create a counter, and all children of the OL will refer to that counter. <br /><br />If we denote by item[n] the nth instance of the "item" counter, and by "(" and ")" the beginning and end of a scope, then the following HTML fragment will use the indicated counters. (We assume the style sheet as given in the example above). <br /><br /><OL> <br /> <LI>item <br /> <LI>item <br /> <OL> <br /> <LI>item <br /> <LI>item <br /> <LI>item <br /> <OL> <br /> <LI>item <br /> </OL> <br /> <OL> <br /> <LI> <br /> </OL> <br /> <LI>item <br /> </OL> <br /> <LI>item <br /> <LI>item <br /></OL> <br /><OL> <br /> <LI>item <br /> <LI>item <br /></OL> <br /><br />The 'counters()' function generates a string composed of the values of all counters with the same name, separated by a given string. <br /><br />Example(s):<br /><br /><br />The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc. <br /><br />OL { counter-reset: item }<br />LI { display: block }<br />LI:before { content: counters(item, "."); counter-increment: item }<div class="blogger-post-footer"></div> </article> <article> <h1>Automatic counters and numbering</h1> <p>2008-03-14T11:51:00.001-07:00</p> Automatic numbering in CSS2 is controlled with two properties, 'counter-increment' and 'counter-reset'. The counters defined by these properties are used with the counter() and counters() functions of the the 'content' property. <br /><br />'counter-reset' <br />Value: [ <identifier> <integer>? ]+ | none | inherit <br />Initial: none <br />Applies to: all elements <br />Inherited: no <br />Percentages: N/A <br />Media: all <br /><br />'counter-increment' <br />Value: [ <identifier> <integer>? ]+ | none | inherit <br />Initial: none <br />Applies to: all elements <br />Inherited: no <br />Percentages: N/A <br />Media: all <br /><br />The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed. <br /><br />The 'counter-reset' property also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0. <br /><br />If 'counter-increment' refers to a counter that is not in the scope (see below) of any 'counter-reset', the counter is assumed to have been reset to 0 by the root element. <br /><br />Example(s):<br /><br />This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc. <br /><br />H1:before {<br /> content: "Chapter " counter(chapter) ". ";<br /> counter-increment: chapter; /* Add 1 to chapter */<br /> counter-reset: section; /* Set section to 0 */<br />}<br />H2:before {<br /> content: counter(chapter) "." counter(section) " ";<br /> counter-increment: section;<br />}<br /><br />If an element increments/resets a counter and also uses it (in the 'content' property of its :before or :after pseudo-element), the counter is used after being incremented/reset. <br /><br />If an element both resets and increments a counter, the counter is reset first and then incremented. <br /><br />The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:<br /><br />H1 { counter-reset: section -1 }<br />H1 { counter-reset: imagenum 99 }<br /><br />will only reset 'imagenum'. To reset both counters, they have to be specified together:<br /><br />H1 { counter-reset: section -1 imagenum 99 }<div class="blogger-post-footer"></div> </article> <article> <h1>The 'content' property</h1> <p>2008-03-14T11:50:00.001-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'content'"><a class="propdef-title" name="propdef-content"><strong>'content'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>[ <a class="noxref" href="syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> | <a class="noxref" href="syndata.html#value-def-uri"><span class="value-inst-uri"><uri></span></a> | <a class="noxref" href="syndata.html#value-def-counter"><span class="value-inst-counter"><counter></span></a> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>empty string </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>:before and :after pseudo-elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>no </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#all-media-group">all</a> </td></tr></tbody></table></dd></dl></div> <p>This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:</p> <dl><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-string" name="x9"><span class="value-inst-string"><strong><string></strong></span></a></span> </dt><dd>Text content (see the section on <a href="syndata.html#strings">strings</a>). </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-uri" name="x10"><span class="value-inst-uri"><strong><uri></strong></span></a></span> </dt><dd>The value is a URI that designates an external resource. If a user agent cannot support the resource because of the <a href="media.html">media types</a> it supports, it must ignore the resource. <strong>Note.</strong> CSS2 offers no mechanism to change the size of the embedded object, or to provide a textual description, like the "alt" or "longdesc" attributes do for images in HTML. This may change in future levels of CSS. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-counter" name="x11"><span class="value-inst-counter"><strong><counter></strong></span></a></span> </dt><dd><a href="syndata.html#counter">Counters</a> may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(<var>name</var>)' or 'counter(<var>name</var>, <var>style</var>)'. The generated text is the value of the named counter at this point in the formatting structure; it is formatted in the indicated <a href="#counter-styles">style</a> ('decimal' by default). The latter function also has two forms: 'counter(<var>name</var>, <var>string</var>)' or 'counter(<var>name</var>, <var>string</var>, <var>style</var>)'. The generated text is the value of all counters with the given name at this point in the formatting structure, separated by the specified string. The counters are rendered in the indicated <a href="#counter-styles">style</a> ('decimal' by default). See the section on <a href="#counters">automatic counters and numbering</a> for more information. </dd><dt><span class="index-inst" title="open-quote"><a class="noxref" href="generate.html#value-def-open-quote" name="x12"><span class="value-inst-open-quote"><strong>open-quote</strong></span></a></span> and <span class="index-inst" title="close-quote"><a class="noxref" href="generate.html#value-def-close-quote" name="x13"><span class="value-inst-close-quote"><strong>close-quote</strong></span></a></span> </dt><dd>These values are replaced by the appropriate string from the <a class="noxref" href="generate.html#propdef-quotes"><span class="propinst-quotes"><strong>'quotes'</strong></span></a> property. </dd><dt><span class="index-inst" title="no-open-quote"><a class="noxref" href="generate.html#value-def-no-open-quote" name="x14"><span class="value-inst-no-open-quote"><strong>no-open-quote</strong></span></a></span> and <span class="index-inst" title="no-close-quote"><a class="noxref" href="generate.html#value-def-no-close-quote" name="x15"><span class="value-inst-no-close-quote"><strong>no-close-quote</strong></span></a></span> </dt><dd>Inserts nothing (the empty string), but increments (decrements) the level of nesting for quotes. </dd><dt><a name="x16"><span class="index-def" title="attr()"><strong>attr(X)</strong></span></a> </dt><dd>This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn't have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language. <strong>Note.</strong> In CSS2, it is not possible to refer to attribute values for other elements of the selector. </dd></dl> <p>The <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> property controls whether the content is placed in a block, inline, or marker box. </p><p>Authors should put <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> declarations in <span class="index-inst" title="@media"><a href="media.html#at-media-rule" name="x17">@media</a></span> rules when the content is media-sensitive. For instance, literal text may be used for any media group, but images only apply to the visual + bitmap media groups, and sound files only apply to the aural media group. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>The following rule causes a sound file to be played at the end of a quotation (see the section on <a href="aural.html">aural style sheets</a> for additional mechanisms):</p><pre>@media aural { <br /> BLOCKQUOTE:after { content: url("beautiful-music.wav") } <br /> } <br /></pre></div> <div class="example"> <p style="display: none;">Example(s):</p> <p>The next rule inserts the text of the HTML "alt" attribute before the image. If the image is not displayed, the reader will still see the "alt" text. </p><pre>IMG:before { content: attr(alt) } <br /></pre></div> <p>Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> property. This inserts a <a name="x18"><span class="index-def" title="forced line break"><dfn>forced line break</dfn></span></a>, similar to the BR element in HTML. See <a href="syndata.html#strings">"Strings"</a> and <a href="syndata.html#escaped-characters">"Characters and case"</a> for more information on the "\A" escape sequence. </p><div class="example"> <p style="display: none;">Example(s):</p> <pre>H1:before { <br /> display: block; <br /> text-align: center; <br /> content: "chapter\A hoofdstuk\A chapitre" <br />} <br /></pre></div> <p>Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing). </p><div class="note"> <p><em><strong>Note.</strong> In future levels of CSS, the <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> property may accept additional values, allowing it to vary the style of pieces of the generated content, but in CSS2, all the content of the :before or :after pseudo-element has the same style. </em></p></div> <h2>12.3 <a name="compact-run-in-gen">Interaction</a> of :before and :after with <span class="index-inst" title="compact"><a class="noxref" href="visuren.html#value-def-compact" name="x19"><span class="value-inst-compact">'compact'</span></a></span> and <span class="index-inst" title="run-in"><a class="noxref" href="visuren.html#value-def-run-in" name="x20"><span class="value-inst-run-in">'run-in'</span></a></span> elements</h2> <p>The following cases can occur:</p> <ol><li><strong>A 'run-in' or 'compact' element has a :before pseudo-element of type 'inline':</strong> the pseudo-element is taken into account when the size of the element's box is computed (for 'compact') and is rendered inside the same block box as the element. </li><li><strong>A 'run-in' or 'compact' element has an :after pseudo-element of type 'inline':</strong> The rules of the previous point apply. </li><li><strong>A 'run-in' or 'compact' element has a :before pseudo-element of type 'block':</strong> the pseudo-element is formatted as a block above the element, and does not take part in the computation of the element's size (for 'compact'). </li><li><strong>A 'run-in' or 'compact' element has an :after pseudo-element of type 'block':</strong> both the element and its :after pseudo-element are formatted as block boxes. The element is <em>not</em> formatted as an inline box in its own :after pseudo-element. </li><li><strong>The element following a 'run-in' or 'compact' element has a :before of type 'block':</strong> the decision how to format the 'run-in'/'compact' element is made with respect to the block box resulting from the :before pseudo-element. </li><li><strong>The element following a 'run-in' or 'compact' element has an :before of type 'inline':</strong> the decision how to format the 'run-in'/'compact' element depends on the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> value of the element to which the :before is attached. </li></ol> <div class="example"> <p style="display: none;">Example(s):</p> <p>Here is an example of a 'run-in' header with an :after pseudo-element, followed by a paragraph with a :before pseudo-element. All pseudo-elements are inline (the default) in this example. When the style sheet:</p><pre>H3 { display: run-in } <br />H3:after { content: ": " } <br />P:before { content: "... " } <br /></pre> <p>is applied to this source document:</p><pre class="html-example"><h3>Centaurs</h3> <br /><p>have hoofs <br /><p>have a tail <br /></pre> <p>The visual formatting will resemble:</p><pre class="none">Centaurs: ... have hoofs <br />... have a tail <br /></pre></div> <h2>12.4 <a name="quotes">Quotation marks</a></h2> <p>In CSS2, authors may specify, in a style-sensitive and context-dependent manner, how user agents should render quotation marks. The <a class="noxref" href="generate.html#propdef-quotes"><span class="propinst-quotes">'quotes'</span></a> property specifies pairs of quotation marks for each level of embedded quotation. The <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> property gives access to those quotation marks and causes them to be inserted before and after a quotation. </p><h3>12.4.1 <a name="quotes-specify">Specifying quotes</a> with the <a class="noxref" href="generate.html#propdef-quotes"><span class="propinst-quotes">'quotes'</span></a> property</h3> <div class="propdef"> <dl><dt><span class="index-def" title="'quotes'"><a class="propdef-title" name="propdef-quotes"><strong>'quotes'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>[<a class="noxref" href="syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> <a class="noxref" href="syndata.html#value-def-string"><span class="value-inst-string"><string></span></a>]+ | none | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>depends on user agent </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:</p> <dl><dt><strong>none</strong> </dt><dd>The 'open-quote' and 'close-quote' values of the <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> property produce no quotations marks. </dd><dt>[<span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-string" name="x22"><span class="value-inst-string"><strong><string></strong></span></a></span> <span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-string" name="x23"><span class="value-inst-string"><strong><string></strong></span></a></span>]+ </dt><dd>Values for the 'open-quote' and 'close-quote' values of the <a class="noxref" href="generate.html#propdef-content"><span class="propinst-content">'content'</span></a> property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding. </dd></dl> <div class="example"> <p style="display: none;">Example(s):</p> <p>For example, applying the following style sheet:</p><pre class="example">/* Specify pairs of quotes for two levels in two languages */ <br />Q:lang(en) { quotes: '"' '"' "'" "'" } <br />Q:lang(no) { quotes: "«" "»" "<" ">" } <br /> <br />/* Insert quotes before and after Q element content */ <br />Q:before { content: open-quote } <br />Q:after { content: close-quote } <br /></pre> <p>to the following HTML fragment:</p><pre class="html-example"><html lang="en"> <br /> <head> <br /> <title>Quotes</title> <br /> </head> <br /> <body> <br /> <p><q>Quote me!</q> <br /> </body> <br /></html> <br /></pre> <p>would allow a user agent to produce:</p><pre class="ascii-art">"Quote me!" <br /></pre> <p>while this HTML fragment:</p><pre class="html-example"><html lang="no"> <br /> <head> <br /> <title>Quotes</title> <br /> </head> <br /> <body> <br /> <p><q>Trøndere gråter når <q>Vinsjan på kaia</q> blir deklamert.</q> <br /> </body> <br /></html> <br /></pre> <p>would produce:</p><pre class="ascii-art">«Trøndere gråter når <vinsjan> blir deklamert.»</pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>The :before and :after pseudo-elements</h1> <p>2008-03-14T11:49:00.001-07:00</p> <div class="example"><p>For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":</p><pre>P.note:before { content: "Note: " }<br /></pre></div> <p>The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:</p><pre class="example">P.note:before { content: "Note: " }<br />P.note { border: solid green }<br /></pre> <p>would cause a solid green border to be rendered around the entire paragraph, including the initial string. </p><p>The :before and :after pseudo-elements <a href="cascade.html#inheritance">inherit</a> any inheritable properties from the element in the document tree to which they are attached.</p> <div class="example"> <p style="display: none;">Example(s):</p> <p>For example, the following rules insert an open quote mark before every Q element. The color of the quote mark will be red, but the font will be the same as the font of the rest of the Q element:</p><pre>Q:before {<br /> content: open-quote;<br /> color: red<br />}<br /></pre></div> <p>In a :before or :after pseudo-element declaration, non-inherited properties take their <a href="cascade.html#initial-value">initial values</a>.</p> <div class="example"> <p style="display: none;">Example(s):</p> <p>So, for example, because the initial value of the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> property is 'inline', the quote in the previous example is inserted as an inline box (i.e., on the same line as the element's initial text content). The next example explicitly sets the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> property to 'block', so that the inserted text becomes a block:</p><pre>BODY:after {<br /> content: "The End";<br /> display: block;<br /> margin-top: 2em;<br /> text-align: center;<br />}<br /></pre> <p>Note that an audio user agent would speak the words "The End" after rendering the rest of the BODY content. </p></div> <p>User agents must ignore the following properties with :before and :after pseudo-elements: <a class="noxref" href="visuren.html#propdef-position"><span class="propinst-position">'position'</span></a>, <a class="noxref" href="visuren.html#propdef-float"><span class="propinst-float">'float'</span></a>, <a href="#lists">list</a> properties, and <a href="tables.html">table</a> properties. </p><p>The :before and :after pseudo-elements elements allow values of the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> property as follows: </p><ul><li>If the <a href="selector.html#subject">subject</a> of the selector is a <a href="visuren.html#block-level">block-level</a> element, allowed values are 'none', 'inline', 'block', and 'marker'. If the value of the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> has any other value, the pseudo-element will behave as if the value were 'block'. </li><li>If the <a href="selector.html#subject">subject</a> of the selector is an <a href="visuren.html#inline-level">inline-level</a> element, allowed values are 'none' and 'inline'. If the value of the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> has any other value, the pseudo-element will behave as if the value were 'inline'. </li></ul><div class="blogger-post-footer"></div> </article> <article> <h1>CSS - border-color</h1> <p>2008-03-14T11:48:00.001-07:00</p> <h2>Description:</h2> <p>The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties:</p> <ul><li> <p><b>border-bottom-color </b>changes the color of bottom border.</p> </li><li> <p><b>border-top-color </b>changes the color of top border.</p> </li><li> <p><b>border-left-color </b>changes the color of left border.</p> </li><li> <p><b>border-right-color </b>changes the color of right border.</p></li></ul> <h2>Possible Values:</h2> <ul><li><b>color:</b> Any valid color value. </li><li><b>transparent:</b> Sets the border to be invisible. </li></ul> <h2>Applies to:</h2> <p>All the HTML elements.</p> <h2>DOM Syntax:</h2> <table class="src" cellpadding="5"> <tbody> <tr> <td>object.style.borderColor="red"; </td></tr></tbody></table> <h2>Example:</h2> <p>Here is the example which shows effect of all these properties:</p> <table class="src" cellpadding="5"> <tbody> <tr> <td><pre><style type="text/css"><br />p.example1{<br /> border:1px solid;<br /> border-bottom-color:#009900; /* Green */<br /> border-top-color:#FF0000; /* Red */<br /> border-left-color:#330000; /* Black */<br /> border-right-color:#0000CC; /* Blue */<br />}<br />p.example2{<br /> border:1px solid;<br /> border-color:#009900; /* Green */<br />}<br /></style><br /><p class="example1"><br />This example is showing all borders in different colors.<br /></p><br /><p class="example2"><br /><br />This example is showing all borders in green color only.<br /></p><br /> </pre></td></tr></tbody></table> <p>This will produce following result:</p> <table class="src" cellpadding="5"> <tbody> <tr> <td> <p class="example1">This example is showing all borders in different colors. </p> <p class="example2">This example is showing all borders in green color only. </p></td></tr></tbody></table><div class="blogger-post-footer"></div> </article> <article> <h1>CSS Generated Content Reference Guide</h1> <p>2008-03-14T11:47:00.001-07:00</p> <p>This is a complete reference guide for web developers where haved we listed all the CSS properties related to generated content defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2</p> <p>Click any property to see its description with examples:</p> <table border="1" cellpadding="3" cellspacing="0"> <tbody> <tr> <th>Property</th> <th>Description</th></tr> <tr> <td><a href="css_content.html">content</a></td> <td>Inserts generated content around an element. </td></tr> <tr> <td><a href="css_counter-increment.html">counter-increment</a></td> <td>Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented. </td></tr> <tr> <td><a href="css_counter-reset.html">counter-reset</a></td> <td>Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset. </td></tr> <tr> <td><a href="css_quotes.html">quotes</a></td> <td>Sets the quote symbols used to quote text </td></tr></tbody></table><div class="blogger-post-footer"></div> </article> <article> <h1>Whitespace: the 'white-space' property</h1> <p>2008-03-14T11:45:00.001-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'white-space'"><a class="propdef-title" name="propdef-white-space"><strong>'white-space'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | pre | nowrap | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>block-level elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property declares how <a href="syndata.html#whitespace">whitespace</a> inside the element is handled. Values have the following meanings:</p> <dl><dt><strong>normal</strong> </dt><dd>This value directs user agents to collapse sequences of whitespace, and break lines as necessary to fill line boxes. Additional line breaks may be created by occurrences of "\A" in generated content (e.g., for the BR element in HTML). </dd><dt><strong>pre</strong> </dt><dd>This value prevents user agents from collapsing sequences of whitespace. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content. </dd><dt><strong>nowrap</strong> </dt><dd>This value collapses whitespace as for 'normal', but suppresses line breaks within text except for those created by "\A" in generated content (e.g., for the BR element in HTML). </dd></dl> <div class="example"> <p style="display: none;">Example(s):</p> <p>The following examples show what <a href="syndata.html#whitespace">whitespace</a> behavior is expected from the PRE and P elements, and the "nowrap" attribute in HTML. </p><pre>PRE { white-space: pre }<br />P { white-space: normal }<br />TD[nowrap] { white-space: nowrap }<br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>Capitalization: the 'text-transform' property</h1> <p>2008-03-14T11:44:00.001-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'text-transform'"><a class="propdef-title" name="propdef-text-transform"><strong>'text-transform'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>capitalize | uppercase | lowercase | none | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>none </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property controls capitalization effects of an element's text. Values have the following meanings:</p> <dl><dt><strong>capitalize</strong> </dt><dd>Puts the first character of each word in uppercase. </dd><dt><strong>uppercase</strong> </dt><dd>Puts all characters of each word in uppercase. </dd><dt><strong>lowercase</strong> </dt><dd>Puts all characters of each word in lowercase. </dd><dt><strong>none</strong> </dt><dd>No capitalization effects. </dd></dl> <p>The actual transformation in each case is written language dependent. See RFC 2070 (<a class="noxref" href="refs.html#ref-RFC2070" rel="biblioentry"><span class="normref">[RFC2070]</span></a>) for ways to find the language of an element. </p><p><span class="index-inst" title="conformance"><a href="conform.html#conformance" name="x17">Conforming user agents</a></span> may consider the value of <a class="noxref" href="text.html#propdef-text-transform"><span class="propinst-text-transform">'text-transform'</span></a> to be 'none' for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of ISO 10646 (<a class="noxref" href="refs.html#ref-ISO10646" rel="biblioentry"><span class="normref">[ISO10646]</span></a>). </p><div class="example"> <p style="display: none;">Example(s):</p> <p>In this example, all text in an H1 element is transformed to uppercase text. </p><pre>H1 { text-transform: uppercase }<br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties</h1> <p>2008-03-14T11:43:00.002-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'letter-spacing'"><a class="propdef-title" name="propdef-letter-spacing"><strong>'letter-spacing'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies spacing behavior between text characters. Values have the following meanings:</p> <dl><dt><strong>normal</strong> </dt><dd>The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-length" name="x10"><span class="value-inst-length"><strong><length></strong></span></a></span> </dt><dd>This value indicates inter-character space <em>in addition to</em> the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text. </dd></dl> <p>Character spacing algorithms are user agent-dependent. Character spacing may also be influenced by justification (see the <a class="noxref" href="text.html#propdef-text-align"><span class="propinst-text-align">'text-align'</span></a> property). </p><div class="example"> <p style="display: none;">Example(s):</p> <p>In this example, the space between characters in BLOCKQUOTE elements is increased by '0.1em'. </p><pre>BLOCKQUOTE { letter-spacing: 0.1em }<br /></pre> <p>In the following example, the user agent is not permitted to alter inter-character space:</p><pre>BLOCKQUOTE { letter-spacing: 0cm } /* Same as '0' */<br /></pre></div> <p>When the resultant space between two characters is not the same as the default space, user agents should not use <a name="x11"><span class="index-inst" title="ligatures">ligatures.</span></a> </p><p><span class="index-inst" title="conformance"><a href="conform.html#conformance" name="x12">Conforming user agents</a></span> may consider the value of the <a class="noxref" href="text.html#propdef-letter-spacing"><span class="propinst-letter-spacing">'letter-spacing'</span></a> property to be 'normal'. </p><div class="propdef"> <dl><dt><span class="index-def" title="'word-spacing'"><a class="propdef-title" name="propdef-word-spacing"><strong>'word-spacing'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies spacing behavior between words. Values have the following meanings:</p> <dl><dt><strong>normal</strong> </dt><dd>The normal inter-word space, as defined by the current font and/or the UA. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-length" name="x14"><span class="value-inst-length"><strong><length></strong></span></a></span> </dt><dd>This value indicates inter-word space <em>in addition to</em> the default space between words. Values may be negative, but there may be implementation-specific limits. </dd></dl> <p>Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the <a class="noxref" href="text.html#propdef-text-align"><span class="propinst-text-align">'text-align'</span></a> property). </p><div class="example"> <p style="display: none;">Example(s):</p> <p>In this example, the word-spacing between each word in H1 elements is increased by '1em'. </p><pre>H1 { word-spacing: 1em }<br /></pre></div> <p><span class="index-inst" title="conformance"><a href="conform.html#conformance" name="x15">Conforming user agents</a></span> may consider the value of the <a class="noxref" href="text.html#propdef-word-spacing"><span class="propinst-word-spacing">'word-spacing'</span></a> property to be 'normal'. </p><div class="blogger-post-footer"></div> </article> <article> <h1>Text shadows: the 'text-shadow' property</h1> <p>2008-03-14T11:43:00.001-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'text-shadow'"><a class="propdef-title" name="propdef-text-shadow"><strong>'text-shadow'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>none | [<a class="noxref" href="syndata.html#value-def-color"><span class="value-inst-color"><color></span></a> || <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a>? ,]* [<a class="noxref" href="syndata.html#value-def-color"><span class="value-inst-color"><color></span></a> || <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a>?] | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>none </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>no (see prose) </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. The <a href="visuren.html#stack-level">stack level</a> of the shadow effects is the same as for the element itself. </p><p>Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color. </p><p>A shadow offset is specified with two <span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-length" name="x8"><span class="value-inst-length"><length></span></a></span> values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text. The second length value specifies the vertical distance below the text. A negative vertical length value places the shadow above the text. </p><p>A blur radius may optionally be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified. </p><p>A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of the <a class="noxref" href="colors.html#propdef-color"><span class="propinst-color">'color'</span></a> property will be used instead. </p><p>Text shadows may be used with the <a href="selector.html#first-letter">:first-letter</a> and <a href="selector.html#first-line">:first-line</a> pseudo-elements. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>The example below will set a text shadow to the right and below the element's text. Since no color has been specified, the shadow will have the same color as the element itself, and since no blur radius is specified, the text shadow will not be blurred:</p><pre>H1 { text-shadow: 0.2em 0.2em }<br /></pre> <p>The next example will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red. </p><pre>H2 { text-shadow: 3px 3px 5px red }<br /></pre> <p>The next example specifies a list of shadow effects. The first shadow will be to the right and below the element's text and will be red with no blurring. The second shadow will overlay the first shadow effect, and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text. Since no shadow color is specified for the third shadow effect, the value of the element's <a class="noxref" href="colors.html#propdef-color"><span class="propinst-color">'color'</span></a> property will be used:</p><pre>H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }<br /></pre></div> <div class="example"> <p style="display: none;">Example(s):</p> <p>Consider this example: </p><pre>SPAN.glow {<br /> background: white;<br /> color: white;<br /> text-shadow: black 0px 0px 5px;<br />}<br /></pre> <p>Here, the <a class="noxref" href="colors.html#propdef-background"><span class="propinst-background">'background'</span></a> and <a class="noxref" href="colors.html#propdef-color"><span class="propinst-color">'color'</span></a> properties have the same value and the <a class="noxref" href="text.html#propdef-text-shadow"><span class="propinst-text-shadow">'text-shadow'</span></a> property is used to create a "solar eclipse" effect:</p> <p><span class="dlink"> <a title="Long description of text shadow example" href="images/longdesc/eclipse-outline-desc.html" name="img-eclipse-outline">[D]</a></span></p></div> <div class="note"> <p><em><strong>Note.</strong> This property is not defined in CSS1. Some shadow effects (such as the one in the last example) may render text invisible in UAs that only support CSS1. </em></p></div><div class="blogger-post-footer"></div> </article> <article> <h1>CSS3 Decoration</h1> <p>2008-03-14T11:42:00.000-07:00</p> <h3>16.3.1 <a name="lining-striking-props">Underlining, overlining, striking, and blinking</a>: the <a class="noxref" href="text.html#propdef-text-decoration"><span class="propinst-text-decoration">'text-decoration'</span></a> property</h3> <div class="propdef"> <dl><dt><span class="index-def" title="'text-decoration'"><a class="propdef-title" name="propdef-text-decoration"><strong>'text-decoration'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>none | [ underline || overline || line-through || blink ] | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>none </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>no (see prose) </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property describes decorations that are added to the text of an element. If the property is specified for a <a href="visuren.html#block-level">block-level</a> element, it affects all inline-level descendants of the element. If it is specified for (or affects) an <a href="visuren.html#inline-level">inline-level</a> element, it affects all boxes generated by the element. If the element has no content or no text content (e.g., the IMG element in HTML), user agents must <a href="syndata.html#ignore">ignore</a> this property. </p><p>Values have the following meanings:</p> <dl><dt><strong>none</strong> </dt><dd>Produces no text decoration. </dd><dt><strong>underline</strong> </dt><dd>Each line of text is underlined. </dd><dt><strong>overline</strong> </dt><dd>Each line of text has a line above it. </dd><dt><strong>line-through</strong> </dt><dd>Each line of text has a line through the middle </dd><dt><strong>blink</strong> </dt><dd>Text blinks (alternates between visible and invisible). <a href="conform.html#conformance">Conforming user agents</a> are not required to support this value. </dd></dl> <p>The color(s) required for the text decoration should be derived from the <a class="noxref" href="colors.html#propdef-color"><span class="propinst-color">'color'</span></a> property value. </p><p>This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined). The color of decorations should remain the same even if descendant elements have different <a class="noxref" href="colors.html#propdef-color"><span class="propinst-color">'color'</span></a> values. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>In the following example for HTML, the text content of all A elements acting as hyperlinks will be underlined:</p><pre>A[href] { text-decoration: underline }<br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>Alignment: the 'text-align' property</h1> <p>2008-03-14T11:41:00.002-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'text-align'"><a class="propdef-title" name="propdef-text-align"><strong>'text-align'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>left | right | center | justify | <a class="noxref" href="syndata.html#value-def-string"><span class="value-inst-string"><string></span></a> | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>depends on user agent and writing direction </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>block-level elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property describes how inline content of a block is aligned. Values have the following meanings:</p> <dl><dt><strong>left</strong>, <strong>right</strong>, <strong>center</strong>, and <strong>justify</strong> </dt><dd>Left, right, center, and double justify text, respectively. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-string" name="x4"><span class="value-inst-string"><strong><string></strong></span></a></span> </dt><dd>Specifies a string on which cells in a table column will align (see the section on <a href="tables.html#column-alignment">horizontal alignment in a column</a> for details and an example). This value applies <em>only</em> to <a href="tables.html">table</a> cells. If set on other elements, it will be treated as 'left' or 'right', depending on whether <a class="noxref" href="visuren.html#propdef-direction"><span class="propinst-direction">'direction'</span></a> is 'ltr', or 'rtl', respectively. </dd></dl> <p>A block of text is a stack of <a href="visuren.html#line-box">line boxes</a>. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the <a href="visuren.html#viewport">viewport</a>. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions. (See also <a class="noxref" href="text.html#propdef-letter-spacing"><span class="propinst-letter-spacing">'letter-spacing'</span></a> and <a class="noxref" href="text.html#propdef-word-spacing"><span class="propinst-word-spacing">'word-spacing'</span></a>.) </p><div class="example"> <p style="display: none;">Example(s):</p> <p>In this example, note that since <a class="noxref" href="text.html#propdef-text-align"><span class="propinst-text-align">'text-align'</span></a> is inherited, all block-level elements inside the DIV element with 'class=center' will have their inline content centered. </p><pre>DIV.center { text-align: center }<br /></pre></div> <div class="note"> <p><em><strong>Note.</strong> The actual justification algorithm used is user-agent and written language dependent.</em> </p><p><em><span class="index-inst" title="conformance"><a href="conform.html#conformance" name="x5">Conforming user agents</a></span> may interpret the value 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.</em> </p></div><div class="blogger-post-footer"></div> </article> <article> <h1>Indentation: the 'text-indent' property</h1> <p>2008-03-14T11:41:00.001-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'text-indent'"><a class="propdef-title" name="propdef-text-indent"><strong>'text-indent'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td><a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> | <a class="noxref" href="syndata.html#value-def-percentage"><span class="value-inst-percentage"><percentage></span></a> | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>0 </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>block-level elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>refer to width of containing block </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first <a href="visuren.html#line-box">line box</a>. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents should render this indentation as blank space. </p><p>Values have the following meanings:</p> <dl><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-length" name="x1"><span class="value-inst-length"><strong><length></strong></span></a></span> </dt><dd>The indentation is a fixed length. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-percentage" name="x2"><span class="value-inst-percentage"><strong><percentage></strong> </span></a></span> </dt><dd>The indentation is a percentage of the containing block width. </dd></dl> <p>The value of <a class="noxref" href="text.html#propdef-text-indent"><span class="propinst-text-indent">'text-indent'</span></a> may be negative, but there may be implementation-specific limits. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>The following example causes a '3em' text indent. </p><pre> P { text-indent: 3em }<br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>Semantic changes from CSS1</h1> <p>2008-03-14T11:40:00.001-07:00</p> <p>While all CSS1 style sheets are valid CSS2 style sheets, there are a few cases where the CSS1 style sheet will have a different meaning when interpreted as a CSS2 style sheet. Most changes are due to implementation experience feeding back into the specification, but there are also some error corrections. </p><ul><li>The meaning of "!important" has been changed. In CSS1, "!important" in an author's style sheet took precedence over one in a user style sheet. This has been reversed in CSS2. </li><li>In CSS2 <a href="syndata.html#color-units">color values</a> are clipped with regard to the device gamut, not with regard to the sRGB gamut as in CSS1. </li><li>CSS1 simply said that 'margin-right' was ignored if the both 'margin-left' and 'width' were set. In CSS2 the choice between relaxing 'margin-right' or 'margin-left' depends on the writing direction. </li><li>In CSS1, several properties (e.g., 'padding') had values referring to the width of the parent element. This was an error; the value should always refer to the width of a block-level element and this specification reflects this by introducing the term "containing block". </li><li>The initial value of 'display' is 'inline' in CSS2, not 'block' as in CSS1. </li><li>In CSS1, the 'clear' property applied to all elements. This was an error, and the property only applies to block-level elements in CSS2. </li><li>In CSS1, <a name="x0"><span class="index-inst" title="pseudo-classes:::link|:link|link (pseudo-class)">':link'</span></a>, <a name="x3"><span class="index-inst" title="pseudo-classes:::visited|:visited|visited (pseudo-class)">':visited'</span></a> and <a name="x6"><span class="index-inst" title="pseudo-classes:::active|:active|active (pseudo-class)">':active'</span></a> were mutually exclusive; in CSS2, <a href="selector.html#dynamic-pseudo-classes">':active'</a> can occur together with <a href="selector.html#link-pseudo-classes">':link' or ':visited'</a>. </li><li>The suggested scaling factor between adjacent <a class="noxref" href="fonts.html#propdef-font-size"><span class="propinst-font-size">'font-size'</span></a> indexes in the table of font sizes has been reduced from 1.5 to 1.2. </li><li>The computed value, not the actual value, of <a class="noxref" href="fonts.html#propdef-font-size"><span class="propinst-font-size">'font-size'</span></a> is inherited. </li><li>The CSS1 description of 'inside' (for <a class="noxref" href="generate.html#propdef-list-style-position"><span class="propinst-list-style-position">'list-style-position'</span></a>) allowed the interpretation that the left margin of the text was affected, rather than the position of the bullet. In CSS2 that interpretation is ruled out. </li><li>Please also consult the <em>normative</em> section on the <a href="grammar.html#tokenizer-diffs">differences between the CSS1 and CSS2 tokenizer</a>. </li></ul><div class="blogger-post-footer"></div> </article> <article> <h1>CSS3 New functionality</h1> <p>2008-03-14T11:39:00.002-07:00</p> <p>In addition to the functionality of CSS1, CSS2 supports:</p> <ul><li>The concept of <a href="media.html">media types</a>. </li><li>The <a href="cascade.html#value-def-inherit">'inherit'</a> value for all properties. </li><li><a href="page.html">Paged media</a> </li><li><a href="aural.html">Aural style sheets</a> </li><li>Several internationalization features, including <a href="generate.html#lists">list numbering styles</a>, support for <a href="visuren.html#direction">bidirectional text</a>, and support for language-sensitive <a href="generate.html#quotes">quotation marks</a>. </li><li><a href="fonts.html#font-selection">An extended font selection</a> mechanism, including intelligent matching, synthesis, and downloadable fonts. Also, the concept of system fonts has been is introduced, and a new property, <a class="noxref" href="fonts.html#propdef-font-size-adjust"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a>, has been added. </li><li><a href="tables.html">Tables</a>, including new values on <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> and <a class="noxref" href="visudet.html#propdef-vertical-align"><span class="propinst-vertical-align">'vertical-align'</span></a>. </li><li><a href="visuren.html#relative-positioning">Relative</a> and <a href="visuren.html#absolute-positioning">absolute positioning</a>, including <a href="visuren.html#fixed-positioning">fixed positioning</a>. </li><li>New box types (along with block and inline): <a href="visuren.html#compact">compact</a> and <a href="visuren.html#run-in">run-in</a>. </li><li>The ability to control content <a href="visufx.html#overflow">overflow</a>, <a href="visufx.html#clipping">clipping</a>, and <a href="visufx.html#visibility">visibility</a> in the visual formatting model. </li><li>The ability to specify minimum and maximum <a href="visudet.html#min-max-widths">widths</a> and <a href="visudet.html#min-max-heights">heights</a> in the visual formatting model. </li><li>An extended <a href="selector.html">selector</a> mechanism, including child selectors, adjacent selectors, and attribute selectors. </li><li><a href="generate.html#generated-text">Generated content</a>, <a href="generate.html#counters">counters and automatic numbering</a>, and <a href="generate.html#markers">markers</a>. </li><li>Text shadows, through the new <a class="noxref" href="text.html#propdef-text-shadow"><span class="propinst-text-shadow">'text-shadow'</span></a> property. </li><li>Several new <a href="selector.html#pseudo-classes">pseudo-classes</a>, :first-child, :hover, :focus, :lang. </li><li>System <a href="ui.html#system-colors">colors</a> and <a href="ui.html#system-fonts">fonts</a>. </li><li><a href="ui.html#cursor-props">Cursors</a>. </li><li><a href="ui.html#dynamic-outlines">Dynamic outlines</a>. </li></ul><div class="blogger-post-footer"></div> </article> <article> <h1>Comparison of tokenization in CSS2 and CSS1</h1> <p>2008-03-14T11:39:00.001-07:00</p> <p>There are some differences in the syntax specified in the CSS1 recommendation (<a class="noxref" href="refs.html#ref-CSS1" rel="biblioentry"><span class="informref">[CSS1]</span></a>), and the one above. Most of these are due to new tokens in CSS2 that didn't exist in CSS1. Others are because the grammar has been rewritten to be more readable. However, there are some incompatible changes, that were felt to be errors in the CSS1 syntax. They are explained below. </p><ul><li>CSS1 style sheets could only be in 1-byte-per-character encodings, such as ASCII and ISO-8859-1. CSS2 has no such limitation. In practice, there was little difficulty in extrapolating the CSS1 tokenizer, and some UAs have accepted 2-byte encodings. </li><li>CSS1 only allowed four hex-digits after the backslash (\) to refer to Unicode characters, CSS2 <a href="syndata.html#escaped-characters">allows six</a>. Furthermore, CSS2 allows a whitespace character to delimit the escape sequence. E.g., according to CSS1, the string "\abcdef" has 3 letters (\abcd, e, and f), according to CSS2 it has only one (\abcdef). </li><li>The tab character (ASCII 9) was not allowed in strings. However, since strings in CSS1 were only used for font names and for URLs, the only way this can lead to incompatibility between CSS1 and CSS2 is if a style sheet contains a font family that has a tab in its name. </li><li>Similarly, newlines (<a href="syndata.html#strings">escaped with a backslash</a>) were not allowed in strings in CSS1. </li><li>CSS2 parses a number immediately followed by an identifier as a DIMEN token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.) </li><li>In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\55ft") </li></ul><div class="blogger-post-footer"></div> </article> <article> <h1>CSS3 Lexical scanner</h1> <p>2008-03-14T11:38:00.002-07:00</p> <p>The following is the <a name="x3"><span class="index-def" title="tokenizer">tokenizer</span></a>, written in Flex (see <a class="noxref" href="refs.html#ref-FLEX" rel="biblioentry"><span class="normref">[FLEX]</span></a>) notation. The tokenizer is case-insensitive. </p><p>The two occurrences of "\377" represent the highest character number that current versions of Flex can deal with (decimal 255). They should be read as "\4177777" (decimal 1114111), which is the highest possible code point in <a name="x4"><span class="index-inst" title="unicode">Unicode</span></a>/<a name="x5"><span class="index-inst" title="iso-10646">ISO-10646</span></a>. </p><pre>%option case-insensitive<br /><br />h [0-9a-f]<br />nonascii [\200-\377]<br />unicode \\{h}{1,6}[ \t\r\n\f]?<br />escape {unicode}|\\[ -~\200-\377]<br />nmstart [a-z]|{nonascii}|{escape}<br />nmchar [a-z0-9-]|{nonascii}|{escape}<br />string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"<br />string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'<br /><br />ident {nmstart}{nmchar}*<br />name {nmchar}+<br />num [0-9]+|[0-9]*"."[0-9]+<br />string {string1}|{string2}<br />url ([!#$%&*-~]|{nonascii}|{escape})*<br />w [ \t\r\n\f]*<br />nl \n|\r\n|\r|\f<br />range \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))<br /><br />%%<br /><br />[ \t\r\n\f]+ {return S;}<br /><br />\/\*[^*]*\*+([^/][^*]*\*+)*\/ /* ignore comments */<br /><br />"" {return CDC;}<br />"~=" {return INCLUDES;}<br />"|=" {return DASHMATCH;}<br /><br />{string} {return STRING;}<br /><br />{ident} {return IDENT;}<br /><br />"#"{name} {return HASH;}<br /><br />"@import" {return IMPORT_SYM;}<br />"@page" {return PAGE_SYM;}<br />"@media" {return MEDIA_SYM;}<br />"@font-face" {return FONT_FACE_SYM;}<br />"@charset" {return CHARSET_SYM;}<br />"@"{ident} {return ATKEYWORD;}<br /><br />"!{w}important" {return IMPORTANT_SYM;}<br /><br />{num}em {return EMS;}<br />{num}ex {return EXS;}<br />{num}px {return LENGTH;}<br />{num}cm {return LENGTH;}<br />{num}mm {return LENGTH;}<br />{num}in {return LENGTH;}<br />{num}pt {return LENGTH;}<br />{num}pc {return LENGTH;}<br />{num}deg {return ANGLE;}<br />{num}rad {return ANGLE;}<br />{num}grad {return ANGLE;}<br />{num}ms {return TIME;}<br />{num}s {return TIME;}<br />{num}Hz {return FREQ;}<br />{num}kHz {return FREQ;}<br />{num}{ident} {return DIMEN;}<br />{num}% {return PERCENTAGE;}<br />{num} {return NUMBER;}<br /><br />"url("{w}{string}{w}")" {return URI;}<br />"url("{w}{url}{w}")" {return URI;}<br />{ident}"(" {return FUNCTION;}<br /><br />U\+{range} {return UNICODERANGE;}<br />U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;}<br /><br />. {return *yytext;}<br /></pre><div class="blogger-post-footer"></div> </article> <article> <h1>CSS3 Grammar</h1> <p>2008-03-14T11:38:00.001-07:00</p> <p>The grammar below is <a name="x0"><span class="index-inst" title="LL(1)">LL(1)</span></a> (but note that most UA's should not use it directly, since it doesn't express the <a href="syndata.html#parsing-errors">parsing conventions</a>, only the CSS2 syntax). The format of the productions is optimized for human consumption and some shorthand notation beyond Yacc (see <a class="noxref" href="refs.html#ref-YACC" rel="biblioentry"><span class="normref">[YACC]</span></a>) is used:</p> <ul><li><strong>*</strong>: 0 or more </li><li><strong>+</strong>: 1 or more </li><li><strong>?</strong>: 0 or 1 </li><li><strong>|</strong>: separates alternatives </li><li><strong>[ ]</strong>: grouping </li></ul> <p>The productions are: </p><pre>stylesheet<br /> : [ CHARSET_SYM S* STRING S* ';' ]?<br /> [S|CDO|CDC]* [ import [S|CDO|CDC]* ]*<br /> [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*<br /> ;<br />import<br /> : IMPORT_SYM S*<br /> [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*<br /> ;<br />media<br /> : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*<br /> ;<br />medium<br /> : IDENT S*<br /> ;<br />page<br /> : PAGE_SYM S* IDENT? pseudo_page? S*<br /> '{' S* declaration [ ';' S* declaration ]* '}' S*<br /> ;<br />pseudo_page<br /> : ':' IDENT<br /> ;<br />font_face<br /> : FONT_FACE_SYM S*<br /> '{' S* declaration [ ';' S* declaration ]* '}' S*<br /> ;<br />operator<br /> : '/' S* | ',' S* | /* empty */<br /> ;<br />combinator<br /> : '+' S* | '>' S* | /* empty */<br /> ;<br />unary_operator<br /> : '-' | '+'<br /> ;<br />property<br /> : IDENT S*<br /> ;<br />ruleset<br /> : selector [ ',' S* selector ]*<br /> '{' S* declaration [ ';' S* declaration ]* '}' S*<br /> ;<br /><a name="x1"><span class="index-inst" title="selector">selector</span></a><br /> : simple_selector [ combinator simple_selector ]*<br /> ;<br />simple_selector<br /> : element_name? [ HASH | class | attrib | pseudo ]* S*<br /> ;<br />class<br /> : '.' IDENT<br /> ;<br />element_name<br /> : IDENT | '*'<br /> ;<br />attrib<br /> : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*<br /> [ IDENT | STRING ] S* ]? ']'<br /> ;<br />pseudo<br /> : ':' [ IDENT | FUNCTION S* IDENT S* ')' ]<br /> ;<br />declaration<br /> : property ':' S* expr prio?<br /> | /* empty */<br /> ;<br />prio<br /> : IMPORTANT_SYM S*<br /> ;<br />expr<br /> : term [ operator term ]*<br /> ;<br />term<br /> : unary_operator?<br /> [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |<br /> TIME S* | FREQ S* | function ]<br /> | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor<br /> ;<br />function<br /> : FUNCTION S* expr ')' S*<br /> ;<br />/*<br />* There is a constraint on the <a name="x2"><span class="index-inst" title="color">color</span></a> that it must<br />* have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])<br />* after the "#"; e.g., "#000" is OK, but "#abcd" is not.<br />*/<br />hexcolor<br /> : HASH S*<br /> ;<br /></pre><div class="blogger-post-footer"></div> </article> <article> <h1>Visibility: the 'visibility' property</h1> <p>2008-03-14T11:36:00.000-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'visibility'"><a class="propdef-title" name="propdef-visibility"><strong>'visibility'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>visible | hidden | collapse | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>inherit </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>no </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>The <a class="noxref" href="visufx.html#propdef-visibility"><span class="propinst-visibility">'visibility'</span></a> property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the <a class="noxref" href="visuren.html#propdef-display"><span class="propinst-display">'display'</span></a> property to 'none' to suppress box generation altogether). Values have the following meanings:</p> <dl><dt><strong>visible</strong> </dt><dd>The generated box is visible. </dd><dt><strong>hidden</strong> </dt><dd>The generated box is invisible (fully transparent), but still affects layout. </dd><dt><strong>collapse</strong> </dt><dd>Please consult the section on <a href="tables.html#dynamic-effects">dynamic row and column effects</a> in tables. If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'. </dd></dl> <p>This property may be used in conjunction with scripts to create dynamic effects. </p><div class="html-example"> <p>In the following example, pressing either form button invokes a user-defined script function that causes the corresponding box to become visible and the other to be hidden. Since these boxes have the same size and position, the effect is that one replaces the other. (The script code is in a hypothetical script language. It may or may not have any effect in a CSS-capable UA.) </p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <br /><html> <br /><head> <br /><style type="text/css"> <br /> <br /></style> <br /></head> <br /><body> <br /><p>Choose a suspect:</p> <br /><div id="container1"> <br /> width="100" height="100" <br /> src="suspect1.jpg" /> <br /> <p>Name: Al Capone</p> <br /> <p>Residence: Chicago</p> <br /></div> <br /> <br /><div id="container2"> <br /> width="100" height="100" <br /> src="suspect2.jpg" /> <br /> <p>Name: Lucky Luciano</p> <br /> <p>Residence: New York</p> <br /></div> <br /> <br /><FORM method="post" <br /> action="http://www.suspect.org/process-bums"> <br /> <p> <br /> <INPUT name="Capone" type="button" <br /> value="Capone" <br /> onclick='show("container1");hide("container2")'> <br /> <INPUT name="Luciano" type="button" <br /> value="Luciano" <br /> onclick='show("container2");hide("container1")'> <br /></form> <br /></body> <br /></html> <br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>CSS2 Overflow and clipping</h1> <p>2008-03-14T11:35:00.002-07:00</p> <p>Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may <a name="x0"><span class="index-def" title="overflow|box::overflow"><dfn>overflow</dfn></span></a>, meaning its content lies partly or entirely outside of the box, e.g.:</p> <ul><li>A line cannot be broken, causing the line box to be wider than the block box. </li><li>A block-level box is too wide for the containing block. This may happen when an element's <a class="noxref" href="visudet.html#propdef-width"><span class="propinst-width">'width'</span></a> property has a value that causes the generated block box to spill over sides of the containing block. </li><li>An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the <a class="noxref" href="visudet.html#propdef-height"><span class="propinst-height">'height'</span></a> property, not by content height). </li><li>A box is <a href="visuren.html#absolute-positioning">positioned absolutely</a>. </li><li>It has <a href="box.html#margin-properties">negative margins</a>. </li></ul> <p>Whenever overflow occurs, the <a class="noxref" href="visufx.html#propdef-overflow"><span class="propinst-overflow">'overflow'</span></a> property specifies how (and whether) a box is clipped. The <a class="noxref" href="visufx.html#propdef-clip"><span class="propinst-clip">'clip'</span></a> property specifies the size and shape of the clipping region. Specifying a small clipping region may cause clipping of otherwise visible contents. </p><h3>11.1.1 <a name="overflow">Overflow</a>: the <a class="noxref" href="visufx.html#propdef-overflow"><span class="propinst-overflow">'overflow'</span></a> property</h3> <div class="propdef"> <dl><dt><span class="index-def" title="'overflow'"><a class="propdef-title" name="propdef-overflow"><strong>'overflow'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>visible | hidden | scroll | auto | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>visible </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>block-level and replaced elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>no </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies whether the content of a block-level element is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:</p> <dl><dt><strong>visible</strong> </dt><dd>This value indicates that content is not clipped, i.e., it may be rendered outside the block box. </dd><dt><strong>hidden</strong> </dt><dd>This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. The size and shape of the clipping region is specified by the <a class="noxref" href="visufx.html#propdef-clip"><span class="propinst-clip">'clip'</span></a> property. </dd><dt><strong>scroll</strong> </dt><dd>This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print' or 'projection', overflowing content should be printed. </dd><dt><strong>auto</strong> </dt><dd>The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes. </dd></dl> <p>Even if <a class="noxref" href="visufx.html#propdef-overflow"><span class="propinst-overflow">'overflow'</span></a> is set to 'visible', content may be clipped to a UA's document window by the native operating environment. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>Consider the following example of a block quotation (BLOCKQUOTE) that is too big for its containing block (established by a DIV). Here is the source document:</p><pre class="html-example"><div><br /><blockquote><br /><p>I didn't like the play, but then I saw<br />it under adverse conditions - the curtain was up.<br /><div class="attributed-to">- Groucho Marx</div><br /></blockquote><br /></div><br /></pre> <p>Here is the style sheet controlling the sizes and style of the generated boxes: </p><pre>DIV { width : 100px; height: 100px;<br /> border: thin solid red;<br /> }<br /><br />BLOCKQUOTE { width : 125px; height : 100px;<br /> margin-top: 50px; margin-left: 50px;<br /> border: thin dashed black<br /> }<br /><br />DIV.attributed-to { text-align : right; }<br /></pre> <p>The initial value of <a class="noxref" href="visufx.html#propdef-overflow"><span class="propinst-overflow">'overflow'</span></a> is 'visible', so the BLOCKQUOTE would be formatted without clipping, something like this:</p> <div class="figure"> <p><span class="dlink"> <a title="Long description for example with unclipped overflow" href="images/longdesc/overflow1-desc.html" name="img-overflow1">[D]</a></span></p></div> <p>Setting <a class="noxref" href="visufx.html#propdef-overflow"><span class="propinst-overflow">'overflow'</span></a> to 'hidden' for the DIV element, on the other hand, causes the BLOCKQUOTE to be clipped by the containing block: </p><div class="figure"> <p><span class="dlink"> <a title="Long description for example with clipped overflow" href="images/longdesc/overflow2-desc.html" name="img-overflow2">[D]</a></span></p></div> <p>A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content. </p></div><div class="blogger-post-footer"></div> </article> <article> <h1>Recognized media types</h1> <p>2008-03-14T11:35:00.001-07:00</p> <p>A CSS <a name="x4"><span class="index-def" title="media type"><dfn>media type</dfn></span></a> names a set of CSS properties. A user agent that claims to support a media type by name must implement all of the properties that apply to that media type. </p><p>The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types, the parenthetical descriptions are not normative. They only give a sense of what device the media type is meant to refer to. </p><dl><dt><strong>all</strong> </dt><dd>Suitable for all devices. </dd><dt><strong>aural</strong> </dt><dd>Intended for speech synthesizers. See the section on <a href="./aural.html">aural style sheets</a> for details. </dd><dt><strong>braille</strong> </dt><dd>Intended for braille tactile feedback devices. </dd><dt><strong>embossed</strong> </dt><dd>Intended for paged braille printers. </dd><dt><strong>handheld</strong> </dt><dd>Intended for handheld devices (typically small screen, monochrome, limited bandwidth). </dd><dt><strong>print</strong> </dt><dd>Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on <a href="page.html">paged media</a> for information about formatting issues that are specific to paged media. </dd><dt><strong>projection</strong> </dt><dd>Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on <a href="page.html">paged media</a> for information about formatting issues that are specific to paged media. </dd><dt><strong>screen</strong> </dt><dd>Intended primarily for color computer screens. </dd><dt><strong>tty</strong> </dt><dd>Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use <a href="syndata.html#pixel-units">pixel units</a> with the "tty" media type. </dd><dt><strong>tv</strong> </dt><dd>Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available). </dd></dl> <p>Media type names are case-insensitive. </p><p>Due to rapidly changing technologies, CSS2 does not specify a definitive list of media types that may be values for <a name="x5"><span class="index-inst" title="@media">@media</span></a>. </p><div class="note"> <p><em><strong>Note.</strong> Future versions of CSS may extend this list. Authors should not rely on media type names that are not yet defined by a CSS specification. </em></p></div> <h3>7.3.1 <a name="media-groups">Media groups</a></h3> <p>Each CSS property definition specifies the media types for which the property must be implemented by a <a href="conform.html#conformance">conforming user agent</a>. Since properties generally apply to several media, the "Applies to media" section of each property definition lists <a name="x6"><span class="index-def" title="media group">media groups</span></a> rather than individual media types. Each property applies to all media types in the media groups listed in its definition. </p><p>CSS2 defines the following media groups: </p> <ul><li><span class="index-def" title="'continuous' media group"><a name="continuous-media-group"><strong>continuous</strong></a></span> or <span class="index-def" title="'paged' media group"><a name="paged-media-group"><strong>paged</strong></a></span>. "Both" means that the property in question applies to both media groups. </li><li><span class="index-def" title="'visual' media group"><a name="visual-media-group"><strong>visual</strong></a>,</span> <span class="index-def" title="'aural' media group"><a name="aural-media-group"><strong>aural</strong></a>,</span> or <span class="index-def" title="'tactile' media group"><a name="tactile-media-group"><strong>tactile</strong></a></span>. </li><li><span class="index-def" title="'grid' media group"><a name="grid-media-group"><strong>grid</strong></a></span> (for character grid devices), or <span class="index-def" title="'bitmap' media group"><a name="bitmap-media-group"><strong>bitmap</strong></a></span>. "Both" means that the property in question applies to both media groups. </li><li><span class="index-def" title="'interactive media group"><a name="interactive-media-group"><strong>interactive</strong></a></span> (for devices that allow user interaction), or <span class="index-def" title="'static' media group"><a name="static-media-group"><strong>static</strong></a></span> (for those that don't). "Both" means that the property in question applies to both media groups. </li><li><span class="index-def" title="'all' media group"><a name="all-media-group"><strong>all</strong></a></span> (includes all media types) </li></ul> <p>The following table shows the relationships between media groups and media types:</p> <table summary="Relationship between media groups and media types" border="1"> <caption>Relationship between media groups and media types</caption> <tbody> <tr> <th>Media Types </th><th colspan="4">Media Groups </th></tr><tr> <th> </th><th>continuous/paged </th><th>visual/aural/tactile </th><th>grid/bitmap </th><th>interactive/static </th></tr><tr> <th>aural </th><td align="center">continuous </td><td align="center">aural </td><td align="center">N/A </td><td align="center">both</td> </tr><tr> <th>braille </th><td align="center">continuous </td><td align="center">tactile </td><td align="center">grid </td><td align="center">both</td> </tr><tr> <th>emboss </th><td align="center">paged </td><td align="center">tactile </td><td align="center">grid </td><td align="center">both</td> </tr><tr> <th>handheld </th><td align="center">both </td><td align="center">visual </td><td align="center">both </td><td align="center">both</td> </tr><tr> <th>print </th><td align="center">paged </td><td align="center">visual </td><td align="center">bitmap </td><td align="center">static</td> </tr><tr> <th>projection </th><td align="center">paged </td><td align="center">visual </td><td align="center">bitmap </td><td align="center">static</td> </tr><tr> <th>screen </th><td align="center">continuous </td><td align="center">visual </td><td align="center">bitmap </td><td align="center">both</td> </tr><tr> <th>tty </th><td align="center">continuous </td><td align="center">visual </td><td align="center">grid </td><td align="center">both</td> </tr><tr> <th>tv </th><td align="center">both </td><td align="center">visual, aural </td><td align="center">bitmap </td><td align="center">both</td></tr></tbody></table><div class="blogger-post-footer"></div> </article> <article> <h1>Specifying media-dependent style sheets</h1> <p>2008-03-14T11:34:00.000-07:00</p> There are currently two ways to specify media dependencies for style sheets: <br /> <br />Specify the target medium from a style sheet with the @media or @import at-rules. <br />Example(s): <br /> <br /> <br />@import url("loudvoice.css") aural; <br />@media print { <br /> /* style sheet for print goes here */ <br />} <br /> <br />Specify the target medium within the document language. For example, in HTML 4.0 ([HTML40]), the "media" attribute on the LINK element specifies the target media of an external style sheet: <br /> <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <br /><HTML> <br /> <HEAD> <br /> <TITLE>Link to a target medium</TITLE> <br /> <LINK rel="stylesheet" type="text/css" <br /> media="print, handheld" href="foo.css"> <br /> </HEAD> <br /> <BODY> <br /> <P>The body... <br /> </BODY> <br /></HTML> <br /> <br />The @import rule is defined in the chapter on the cascade. <br /> <br />7.2.1 The @media rule <br />An @media rule specifies the target media types (separated by commas) of a set of rules (delimited by curly braces). The @media construct allows style sheet rules for various media in the same style sheet: <br /> <br /> @media print { <br /> BODY { font-size: 10pt } <br /> } <br /> @media screen { <br /> BODY { font-size: 12pt } <br /> } <br /> @media screen, print { <br /> BODY { line-height: 1.2 } <br /> } <br /> <br /><div class="blogger-post-footer"></div> </article> <article> <h1>Font family: the 'font-family' property</h1> <p>2008-03-14T11:33:00.002-07:00</p> <div class="propdef"> <dl><dt><span class="index-def" title="'font-family'"><a class="propdef-title" name="propdef-font-family"><strong>'font-family'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>[[ <a class="noxref" href="fonts.html#value-def-family-name"><span class="value-inst-family-name"><family-name></span></a> | <a class="noxref" href="fonts.html#value-def-generic-family"><span class="value-inst-generic-family"><generic-family></span></a> ],]* [<a class="noxref" href="fonts.html#value-def-family-name"><span class="value-inst-family-name"><family-name></span></a> | <a class="noxref" href="fonts.html#value-def-generic-family"><span class="value-inst-generic-family"><generic-family></span></a>] | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>depends on user agent </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property specifies a prioritized list of font family names and/or generic family names. To deal with the problem that a single font may not contain glyphs to display all the characters in a document, or that not all fonts are available on all systems, this property allows authors to specify a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. This list is called a <a name="x7"><span class="index-def" title="font set"><dfn>font set</dfn></span></a>. </p><div class="example"> <p style="display: none;">Example(s):</p> <p>For example, text that contains English words mixed with mathematical symbols may need a font set of two fonts, one containing Latin letters and digits, the other containing mathematical symbols. Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols: </p><pre>BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } <br /></pre> <p>The glyphs available in the "Baskerville" font (a font that covers only Latin characters) will be taken from that font, Japanese glyphs will be taken from "Heisi Mincho W3", and the mathematical symbol glyphs will come from "Symbol". Any others will come from the generic font family 'serif'. </p></div> <p>The generic font family will be used if one or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set. </p><p>There are two types of font family names:</p> <dl><dt><span class="index-def" title="">::definition of"><a class="value-def" name="value-def-family-name"><strong><family-name></strong></a></span> </dt><dd>The name of a font family of choice. In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing <a href="syndata.html#whitespace">whitespace</a> should be quoted. If quoting is omitted, any <a href="syndata.html#whitespace">whitespace</a> characters before and after the font name are <span class="index-inst" title="ignore"><a href="syndata.html#ignore" name="x9">ignored</a></span> and any sequence of whitespace characters inside the font name is converted to a single space. </dd><dt><span class="index-def" title="">::definition of"><a class="value-def" name="value-def-generic-family"><strong><generic-family></strong></a></span> </dt><dd>The following generic families are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. Please see the section on <a href="#generic-font-families">generic font families</a> for descriptions of these families. Generic font family names are keywords, and therefore must not be quoted. <p>Authors are encouraged to offer a generic font family as a last alternative, for improved robustness.</p></dd></dl> <div class="html-example"> <p>For example: </p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <br /><html> <br /> <head> <br /> <title>Font test</title> <br /> <style type="text/css"> <br /> BODY { font-family: "new century schoolbook", serif } <br /> </style> <br /> </head> <br /> <body> <br /> <h1 style="font-family: 'My own font', fantasy">Test</h1> <br /> <p>What's up, Doc? <br /> </body> <br /></html> <br /></pre></div> <div class="example"> <p style="display: none;">Example(s):</p> <p>The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages. </p><pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } <br />*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif } <br /></pre> <p>This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font. </p></div> <h3>15.2.3 <a name="font-styling">Font styling</a>: the <a class="noxref" href="fonts.html#propdef-font-style"><span class="propinst-font-style">'font-style'</span></a>, <a class="noxref" href="fonts.html#propdef-font-variant"><span class="propinst-font-variant">'font-variant'</span></a>, <a class="noxref" href="fonts.html#propdef-font-weight"><span class="propinst-font-weight">'font-weight'</span></a> and <a class="noxref" href="fonts.html#propdef-font-stretch"><span class="propinst-font-stretch">'font-stretch'</span></a> properties </h3> <div class="propdef"> <dl><dt><span class="index-def" title="'font-style'"><a class="propdef-title" name="propdef-font-style"><strong>'font-style'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | italic | oblique | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>The <a class="noxref" href="fonts.html#propdef-font-style"><span class="propinst-font-style">'font-style'</span></a> property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings:</p> <dl><dt><strong>normal</strong> </dt><dd>Specifies a font that is classified as 'normal' in the UA's font database. </dd><dt><strong>oblique</strong> </dt><dd>Specifies a font that is classified as 'oblique' in the UA's font database. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled 'oblique' in the font database. A font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font. </dd><dt><strong>italic</strong> </dt><dd>Specifies a font that is classified as 'italic' in the UA's font database, or, if that is not available, one labeled 'oblique'. Fonts with <em>Italic, Cursive</em>, or <em>Kursiv</em> in their names will typically be labeled 'italic'. </dd></dl> <div class="example"> <p style="display: none;">Example(s):</p> <p>In this example, normal text in an H1, H2, or H3 element will be displayed with an italic font. However, emphasized text (EM) within an H1 will appear in a normal face. </p><pre>H1, H2, H3 { font-style: italic } <br />H1 EM { font-style: normal } <br /></pre></div> <div class="propdef"> <dl><dt><span class="index-def" title="'font-variant'"><a class="propdef-title" name="propdef-font-variant"><strong>'font-variant'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | small-caps | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>In a small-caps font, the glyphs for lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The <a class="noxref" href="fonts.html#propdef-font-variant"><span class="propinst-font-variant">'font-variant'</span></a> property requests such a font for <a name="x13"><span class="index-def" title="bicameral::definition of">bicameral</span></a> (having two cases, as with Latin script). This property has no visible effect for scripts that are <a name="x14"><span class="index-def" title="unicameral::definition of"><dfn>unicameral</dfn></span></a> (having only one case, as with most of the world's writing systems). Values have the following meanings:</p> <dl><dt><strong>normal</strong> </dt><dd>Specifies a font that is not labeled as a small-caps font. </dd><dt><strong>small-caps</strong> </dt><dd>Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font, for example by taking a normal font and replacing the lowercase letters by scaled uppercase characters. As a last resort, unscaled uppercase letter glyphs in a normal font may replace glyphs in a small-caps font so that the text appears in all uppercase letters. </dd></dl> <div class="example"> <p style="display: none;">Example(s):</p> <p>The following example results in an H3 element in small-caps, with emphasized words (EM) in oblique small-caps: </p><pre>H3 { font-variant: small-caps } <br />EM { font-style: oblique } <br /></pre></div> <p>Insofar as this property causes text to be transformed to uppercase, the same considerations as for <a class="noxref" href="text.html#propdef-text-transform"><span class="propinst-text-transform">'text-transform'</span></a> apply. </p><div class="propdef"> <dl><dt><span class="index-def" title="'font-weight'"><a class="propdef-title" name="propdef-font-weight"><strong>'font-weight'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>The <a class="noxref" href="fonts.html#propdef-font-weight"><span class="propinst-font-weight">'font-weight'</span></a> property specifies the <span>weight</span> of the font. Values have the following meanings:</p> <dl><dt><strong>100 to 900</strong> </dt><dd>These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. </dd><dt><strong>normal</strong> </dt><dd>Same as '400'. </dd><dt><strong>bold</strong> </dt><dd>Same as '700'. </dd><dt><strong>bolder</strong> </dt><dd>Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was '900', in which case the resulting weight is also '900'. </dd><dt><strong>lighter</strong> </dt><dd>Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was '100', in which case the resulting weight is also '100'. </dd></dl> <div class="example"> <p style="display: none;">Example(s):</p><pre>P { font-weight: normal } /* 400 */ <br />H1 { font-weight: 700 } /* bold */ <br />BODY { font-weight: 400 } <br />STRONG { font-weight: bolder } /* 500 if available */ <br /></pre></div> <p>Child elements inherit the <a href="cascade.html#computed-value">computed value</a> of the weight. </p><div class="propdef"> <dl><dt><span class="index-def" title="'font-stretch'"><a class="propdef-title" name="propdef-font-stretch"><strong>'font-stretch'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td>normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>normal </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>The <a class="noxref" href="fonts.html#propdef-font-stretch"><span class="propinst-font-stretch">'font-stretch'</span></a> property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest :</p> <ol><li>ultra-condensed </li><li>extra-condensed </li><li>condensed </li><li>semi-condensed </li><li>normal </li><li>semi-expanded </li><li>expanded </li><li>extra-expanded </li><li>ultra-expanded </li></ol> <p>The relative keyword 'wider' sets the value to the next expanded value above the inherited value (while not increasing it above 'ultra-expanded'); the relative keyword 'narrower' sets the value to the next condensed value below the inherited value (while not decreasing it below 'ultra-condensed'). </p><h3>15.2.4 <a name="font-size-props">Font size</a>: the <a class="noxref" href="fonts.html#propdef-font-size"><span class="propinst-font-size">'font-size'</span></a> and <a class="noxref" href="fonts.html#propdef-font-size-adjust"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a> properties</h3> <div class="propdef"> <dl><dt><span class="index-def" title="'font-size'"><a class="propdef-title" name="propdef-font-size"><strong>'font-size'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td><a class="noxref" href="fonts.html#value-def-absolute-size"><span class="value-inst-absolute-size"><absolute-size></span></a> | <a class="noxref" href="fonts.html#value-def-relative-size"><span class="value-inst-relative-size"><relative-size></span></a> | <a class="noxref" href="syndata.html#value-def-length"><span class="value-inst-length"><length></span></a> | <a class="noxref" href="syndata.html#value-def-percentage"><span class="value-inst-percentage"><percentage></span></a> | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>medium </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes, the computed value is inherited </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>refer to parent element's font size </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>This property describes the size of the font when set solid. Values have the following meanings:</p> <dl><dt><a name="x18"><span class="index-def" title="">::definition of"><strong><absolute-size></strong></span></a> </dt><dd>An <a class="value-def" name="value-def-absolute-size"><absolute-size></a> keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are: <p>[ xx-small | x-small | small | medium | large | x-large | xx-large ] </p><p>On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; if the 'medium' font is 12pt, the 'large' font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another. </p><p class="note"><em><strong>Note.</strong> In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.</em></p> </dd><dt><a name="x19"><span class="index-def" title="">::definition of"><strong><relative-size></strong></span></a> </dt><dd>A <a class="value-def" name="value-def-relative-size"><relative-size></a> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: <p>[ larger | smaller ] </p><p>For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords. </p> </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-length" name="x20"><span class="value-inst-length"><strong><length></strong></span></a></span> </dt><dd>A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-percentage" name="x21"><span class="value-inst-percentage"><strong><percentage></strong> </span></a></span> </dt><dd>A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets. </dd></dl> <p>The <a href="cascade.html#actual-value">actual value</a> of this property may differ from the <a href="cascade.html#computed-value">computed value</a> due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes. </p><p>Child elements inherit the computed <a class="noxref" href="fonts.html#propdef-font-size"><span class="propinst-font-size">'font-size'</span></a> value (otherwise, the effect of <a class="noxref" href="fonts.html#propdef-font-size-adjust"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a> would compound). </p><div class="example"> <p style="display: none;">Example(s):</p> <pre>P { font-size: 12pt; } <br />BLOCKQUOTE { font-size: larger } <br />EM { font-size: 150% } <br />EM { font-size: 1.5em } <br /></pre></div> <div class="propdef"> <dl><dt><span class="index-def" title="'font-size-adjust'"><a class="propdef-title" name="propdef-font-size-adjust"><strong>'font-size-adjust'</strong></a></span> </dt><dd> <table class="propinfo" cellpadding="0" cellspacing="0"> <tbody> <tr valign="baseline"> <td><em>Value:</em> </td><td><a class="noxref" href="syndata.html#value-def-number"><span class="value-inst-number"><number></span></a> | none | <a class="noxref" href="cascade.html#value-def-inherit"><span class="value-inst-inherit">inherit</span></a> </td></tr><tr valign="baseline"> <td><em>Initial:</em> </td><td>none </td></tr><tr valign="baseline"> <td><em>Applies to:</em> </td><td>all elements </td></tr><tr valign="baseline"> <td><em>Inherited:</em> </td><td>yes </td></tr><tr valign="baseline"> <td><em>Percentages:</em> </td><td>N/A </td></tr><tr valign="baseline"> <td><em>Media:</em> </td><td><a class="noxref" href="media.html#visual-media-group">visual</a> </td></tr></tbody></table></dd></dl></div> <p>In <a name="x23"><span class="index-inst" title="bicameral">bicameral</span></a> scripts, the subjective apparent size and legibility of a font are less dependent on their <a class="noxref" href="fonts.html#propdef-font-size"><span class="propinst-font-size">'font-size'</span></a> value than on the value of their <a class="noxref" href="fonts.html#descdef-x-height"><span class="descinst-x-height">'x-height'</span></a>, or, more usefully, on the ratio of these two values, called the <a name="x24"><span class="index-def" title="aspect value"><dfn>aspect value</dfn></span></a> (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters. </p><p>For example, the popular font Verdana has an aspect value of 0.58; when Verdana's font size 100 units, its x-height is 58 units. For comparison, Times New Roman has an aspect value of 0.46. Verdana will therefore tend to remain legible at smaller sizes than Times New Roman. Conversely, Verdana will often look 'too big' if substituted for Times New Roman at a chosen size. </p><p>This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font. Values have the following meanings: </p><dl><dt><strong>none</strong> </dt><dd>Do not preserve the font's x-height. </dd><dt><span class="index-inst" title="">"><a class="noxref" href="syndata.html#value-def-number" name="x25"><span class="value-inst-number"><strong><number></strong></span></a></span> </dt><dd>Specifies the aspect value. The number refers to the aspect value of the first choice font. The scaling factor for available fonts is computed according to the following formula: <pre> y(a/a') = c <br /></pre> <p>where:</p><pre>y = 'font-size' of first-choice font <br />a' = aspect value of available font <br />c = 'font-size' to apply to available font <br /></pre></dd></dl> <div class="example"> <p style="display: none;">Example(s):</p> <p>For example, if 14px Verdana (with an aspect value of 0.58) was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. </p></div><div class="blogger-post-footer"></div> </article> <article> <h1>A sample style sheet for HTML 4.0</h1> <p>2008-03-14T11:33:00.001-07:00</p> <p>This style sheet describes the typical formatting of all HTML 4.0 (<a class="noxref" href="refs.html#ref-HTML40" rel="biblioentry"><span class="informref">[HTML40]</span></a>) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations. </p><p>The full presentation of some HTML elements cannot be expressed in CSS2, including <a href="conform.html#replaced-element">replaced</a> elements (IMG, OBJECT), scripting elements (SCRIPT, APPLET), form control elements, and frame elements. </p><pre class="example">ADDRESS,<br />BLOCKQUOTE,<br />BODY, DD, DIV,<br />DL, DT,<br />FIELDSET, FORM,<br />FRAME, FRAMESET,<br />H1, H2, H3, H4,<br />H5, H6, IFRAME,<br />NOFRAMES,<br />OBJECT, OL, P,<br />UL, APPLET,<br />CENTER, DIR,<br />HR, MENU, PRE { display: block }<br />LI { display: list-item }<br />HEAD { display: none }<br />TABLE { display: table }<br />TR { display: table-row }<br />THEAD { display: table-header-group }<br />TBODY { display: table-row-group }<br />TFOOT { display: table-footer-group }<br />COL { display: table-column }<br />COLGROUP { display: table-column-group }<br />TD, TH { display: table-cell }<br />CAPTION { display: table-caption }<br />TH { font-weight: bolder; text-align: center }<br />CAPTION { text-align: center }<br />BODY { padding: 8px; line-height: 1.33 }<br />H1 { font-size: 2em; margin: .67em 0 }<br />H2 { font-size: 1.5em; margin: .83em 0 }<br />H3 { font-size: 1.17em; margin: 1em 0 }<br />H4, P,<br />BLOCKQUOTE, UL,<br />FIELDSET, FORM,<br />OL, DL, DIR,<br />MENU { margin: 1.33em 0 }<br />H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }<br />H6 { font-size: .67em; margin: 2.33em 0 }<br />H1, H2, H3, H4,<br />H5, H6, B,<br />STRONG { font-weight: bolder }<br />BLOCKQUOTE { margin-left: 40px; margin-right: 40px }<br />I, CITE, EM,<br />VAR, ADDRESS { font-style: italic }<br />PRE, TT, CODE,<br />KBD, SAMP { font-family: monospace }<br />PRE { white-space: pre }<br />BIG { font-size: 1.17em }<br />SMALL, SUB, SUP { font-size: .83em }<br />SUB { vertical-align: sub }<br />SUP { vertical-align: super }<br />S, STRIKE, DEL { text-decoration: line-through }<br />HR { border: 1px inset }<br />OL, UL, DIR,<br />MENU, DD { margin-left: 40px }<br />OL { list-style-type: decimal }<br />OL UL, UL OL,<br />UL UL, OL OL { margin-top: 0; margin-bottom: 0 }<br />U, INS { text-decoration: underline }<br />CENTER { text-align: center }<br />BR:before { content: "\A" }<br /><br />/* An example of style for HTML 4.0's ABBR/ACRONYM elements */<br /><br />ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em }<br />A[href] { text-decoration: underline }<br />:focus { outline: thin dotted invert }<br /><br /><a name="bidi"><br />/* Begin bidirectionality settings (do not change) */<br />BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }<br />BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }<br /><br />*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }<br />*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }<br /><br />/* Elements that are block-level in HTML4 */<br />ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,<br />FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,<br />NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,<br />DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,<br />COL, COLGROUP, TD, TH, CAPTION<br /> { unicode-bidi: embed }<br />/* End bidi settings */<br /></a><br /><br />@media print {<br /> @page { margin: 10% }<br /> H1, H2, H3,<br /> H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid }<br /> BLOCKQUOTE,<br /> PRE { page-break-inside: avoid }<br /> UL, OL, DL { page-break-before: avoid }<br />}<br /><br />@media speech {<br /> H1, H2, H3,<br /> H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 }<br /> H1 { pitch: x-low; pitch-range: 90 }<br /> H2 { pitch: x-low; pitch-range: 80 }<br /> H3 { pitch: low; pitch-range: 70 }<br /> H4 { pitch: medium; pitch-range: 60 }<br /> H5 { pitch: medium; pitch-range: 50 }<br /> H6 { pitch: medium; pitch-range: 40 }<br /> LI, DT, DD { pitch: medium; richness: 60 }<br /> DT { stress: 80 }<br /> PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }<br /> EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }<br /> STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }<br /> DFN { pitch: high; pitch-range: 60; stress: 60 }<br /> S, STRIKE { richness: 0 }<br /> I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }<br /> B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }<br /> U { richness: 0 }<br /> A:link { voice-family: harry, male }<br /> A:visited { voice-family: betty, female }<br /> A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }<br />}<br /></pre><div class="blogger-post-footer"></div> </article> <article> <h1>About the CSS2 Specification</h1> <p>2008-03-14T11:31:00.000-07:00</p> <div class="subtoc"> <p><strong>Contents</strong> </p><ul class="toc"><li class="tocline2"><a class="tocxref" href="about.html#q1">1.1 Reading the specification</a> </li><li class="tocline2"><a class="tocxref" href="about.html#q2">1.2 How the specification is organized</a> </li><li class="tocline2"><a class="tocxref" href="about.html#q3">1.3 Conventions</a> <ul class="toc"><li class="tocline3"><a class="tocxref" href="about.html#q4">1.3.1 Document language elements and attributes</a> </li><li class="tocline3"><a class="tocxref" href="about.html#property-defs">1.3.2 CSS property definitions</a> <ul class="toc"><li class="tocline4"><a class="tocxref" href="about.html#q6">Value</a> </li><li class="tocline4"><a class="tocxref" href="about.html#q7">Initial</a> </li><li class="tocline4"><a class="tocxref" href="about.html#q8">Applies to</a> </li><li class="tocline4"><a class="tocxref" href="about.html#q9">Inherited</a> </li><li class="tocline4"><a class="tocxref" href="about.html#q10">Percentage values</a> </li><li class="tocline4"><a class="tocxref" href="about.html#q11">Media groups</a> </li></ul> </li><li class="tocline3"><a class="tocxref" href="about.html#shorthand">1.3.3 Shorthand properties</a> </li><li class="tocline3"><a class="tocxref" href="about.html#q13">1.3.4 Notes and examples</a> </li><li class="tocline3"><a class="tocxref" href="about.html#q14">1.3.5 Images and long descriptions</a> </li></ul> </li><li class="tocline2"><a class="tocxref" href="about.html#q15">1.4 Acknowledgments</a> </li><li class="tocline2"><a class="tocxref" href="about.html#copyright">1.5 Copyright Notice</a> </li></ul></div><div class="blogger-post-footer"></div> </article> <article> <h1>Access to alternative representations of content</h1> <p>2008-03-14T11:30:00.004-07:00</p> <p>CSS2 lets users access alternative representations of content that is specified in attribute values when the following are used together:</p> <ul><li>attribute selectors. </li><li>the attr() function and the 'content' property' </li><li>the :before and :after pseudo-elements </li></ul> <p>In the following example, the value of the "alt" attribute for the IMG element is rendered after the image (visually, aurally, etc.):</p> <div class="example"><pre>IMG:after { content: attr(alt) }<br /></pre></div> <p>Note that the value of the attribute is displayed even though the image may not be (e.g., the user has turned off images through the user interface). </p><h3><a name="Media">Media types</a></h3> <p>The CSS2 "media types" (used with @media rules) allow authors and users to design style sheets that will cause documents to render more appropriately on certain target devices. These style sheets can tailor content for presentation on braille devices, speech synthesizers, or tty devices. Using "@media" rules can also reduce download times by allowing user agents to ignore inapplicable rules. </p><div class="blogger-post-footer"></div> </article> <article> <h1>CSS2 Generated content</h1> <p>2008-03-14T11:30:00.003-07:00</p> <p>CSS2 includes several mechanisms that allow content to be generated from style sheets: </p><ul><li>the :before and :after pseudo-elements and the 'content' property. When used together, these allow authors to insert markers (e.g., counters and constant strings such as "End Example" in the examples below) before or after and element's content. </li><li>the 'cue', 'cue-before', and 'cue-after' properties. This properties allow users to play a sound before or after an element's content. </li><li>List styles, which may be numbers, glyphs, or images (usually associated with the LI element in HTML). CSS2 adds international list styles to the styles defined in CSS1. See th 'list-style-type' and 'content' properties. </li></ul> <p>Generated content can serve as markers to help users navigate a document and stay oriented when they can't access visual clues such as proportional scrollbars, frames with tables of contents, etc. </p><p>For instance, the following user style sheet would cause the words "End Example" to be generated after each example marked up with a special class value in the document: </p> <div class="example"><pre>DIV.example:after {<br /> content: End Example<br />}<br /></pre></div> <p>Users could also, for example, number paragraphs so that they could locate their current reading position in a document:</p> <div class="example"><pre>P:before {<br /> content: counter(paragraph) ". " ;<br /> counter-increment: paragraph<br />}<br /></pre></div> <h3><a name="ACSS">Aural Cascading Style Sheets</a></h3> <p>CSS2's aural properties provide information to non-sighted users and voice-browser users much in the same way fonts provide visual information. The following example show how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a header:</p> <div class="example"><pre>H1 {<br /> voice-family: paul;<br /> stress: 20;<br /> richness: 90;<br /> cue-before: url("ping.au")<br /> }<br /></pre></div> <p>The following properties are part of CSS2's aural cascading style sheets.</p> <ul><li>'volume' controls the volume of spoken text. </li><li>'speak' controls whether content will be spoken and, if so, whether it will be spelled or spoken as words. </li><li>'pause', 'pause-before', and 'pause-after' control pauses before and after content is spoken. This allows users to separate content for better comprehension. </li><li>'cue', 'cue-before', and 'cue-after' specify a sound to be played before and after content, which can be valuable for orientation (much like a visual icon). </li><li>'play-during' controls background sounds while an element is rendered (much like a background image). </li><li>'azimuth' and 'elevation' provide dimension to sound, which allows users to distinguish voices, for example. </li><li>'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' control the quality of spoken content. By varying these properties for different elements, users can fine-tune how content is presented aurally. </li><li>'speak-punctuation' and 'speak-numeral' control how numbers and punctuation are spoken, which has an effect on the quality of the experience of aural browsing. </li></ul> <p>Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell. </p><div class="blogger-post-footer"></div> </article> <article> <h1>css User override of styles</h1> <p>2008-03-14T11:30:00.001-07:00</p> <p>In order to ensure that users can control styles, CSS2 changes the semantics of the "!important" operator defined in CSS1. In CSS1, authors always had final say over styles. In CSS2, if a user's style sheet contains "!important", it takes precedence over any applicable rule in an author's style sheet. This is an important feature to users who require or must avoid certain color combinations or contrasts, users who require large fonts, etc. For instance, the following rule specifies a large font size for paragraph text and would override an author rule of equal weight:</p> <div class="example"><pre>P { font-size: 24pt ! important }<br /></pre></div> <p>The CSS2 'inherit' value - available for every property - leads to compact "!important" style rules that govern most or all of a document. For instance, the following style rules force all backgrounds to white and all foreground colors to black:</p> <div class="example"><pre> /*<br />Sets the text color to black<br />and the background color to<br />white for the document body.<br />*/<br /><br />BODY {<br /> color: black ! important ; <br /> background: white ! important<br />}<br /><br />/*<br />Causes the values of 'color' and 'background'<br />to be inherited by all other elements,<br />strengthened by !important. Note that this<br />may be overridden by other, more specific,<br />user styles.<br />*/<br /><br />* {<br />color: inherit ! important ;<br />background: inherit ! important<br />}<br /></pre></div> <p>CSS2 also includes these user control features:</p> <ul><li>System colors (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font') mean that users may apply their system color and font preferences to Web documents. </li><li>Dynamic outlines (the 'outline' property) allow users (e.g., with low vision) to create outlines around content that don't affect layout but do provide highlight information. </li></ul> <p>For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:</p> <div class="example"><pre> :focus { outline: thick solid black }<br />:active { outline: thick solid red }<br /></pre></div><div class="blogger-post-footer"></div> </article> <article> <h1>Spacing, alignment, and positioning</h1> <p>2008-03-14T11:29:00.002-07:00</p> <p>CSS2 allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning. </p><p>The following properties give control over spacing, alignment, and positioning:</p> <ul><li>'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. For example instead of writing "H E L L O" (which users generally recognize as the word "hello" but users of speech recognition tools would hear as individual letters), authors may create the same visual effect with the 'word-spacing' property applied to "HELLO". </li><li>'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element. </li><li>'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more. </li><li>The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect. </li></ul><div class="blogger-post-footer"></div> </article> <article> <h1>Accessibility features in CSS2</h1> <p>2008-03-14T11:29:00.001-07:00</p> <p>The following is a list of CSS2 features that affect accessibility (and the sections where defined in the CSS2 specification). The sections following the list elaborate on how these features affect accessibility. </p><p><strong>Note.</strong> Property names are indicated by back quotes, the convention used by the CSS1 and CSS2 specifications. </p><dl><dt><a href="#Positioning">Spacing, alignment, and positioning</a> </dt><dd>'text-indent' (16.1); 'text-align' (16.2); 'word-spacing' and 'letter-spacing' (16.4); 'font-stretch', (15.2.3); 'margin', 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' (8.3); 'float' (9.5.1), 'position' (9.3.1); 'top', 'right', 'bottom', and 'left' (9.3.2); 'empty-cells' (17.6.1) </dd><dt><a href="#UserControl">User override of styles</a> </dt><dd>!important (6.4.1); the 'inherit' value (6.2.1); system fonts (15.2.5); system colors (18.2); list types (12.6.2); dynamic outlines ('outline', 'outline-width', 'outline-style', and 'outline-color') (18.4) </dd><dt><a href="#Generated">Generated content</a> </dt><dd>:before/:after pseudo-elements (5.12.3, 12.1); 'content' (12.2); 'cue', 'cue-before', and 'cue-after' (19.5) </dd><dt><a href="#ACSS">Aural style sheets</a> </dt><dd>'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before', and 'pause-after' (19.4); 'cue', 'cue-before', 'cue-after' (19.5); 'play-during' (19.6); 'azimuth', 'elevation' (19.7); 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' (19.8); 'speak-punctuation' and 'speak-numeral' (19.9) </dd><dt><a href="#Alt">Access to alternative content</a> </dt><dd>attribute selectors (5.8); the attr() function (12.2) </dd><dt>WebFonts </dt><dd>See Chapter 15 of the CSS2 specification. </dd></dl><div class="blogger-post-footer"></div> </article> <article> <h1>How Style Sheets Benefit Accessibility</h1> <p>2008-03-14T11:26:00.000-07:00</p> <p>CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, making the documents more accessible at the same time. </p><p>CSS allows precise control over spacing, alignment and positioning. Authors can thereby avoid "tag misuse" - the practice of misusing a structural element for its expected stylistic effects. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, they are frequently used to create visual effects instead such as indentation and alignment. When specialized browsing software such as a speech synthesizer encounters elements that are misused in this way, the results can be unintelligible to the user. </p><p>In addition to preventing element misuse, style sheets can help reduce image misuse. For instance, authors sometimes use 1-pixel invisible images to position content. This not only bloats documents, making them slow to download, but can also confuse software agents looking for alternative text (the "alt" attribute) for these images. CSS positioning properties mean that invisible images are no longer required to control positioning. </p><p>CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification. </p><p>CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet. </p><p>CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner. </p><p>CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output. </p><p>CSS provides more precise control over the display of alternative content than HTML alone. CSS2 selectors give access to attribute values, often used to provide alternative content. In CSS2, attribute values may be rendered in a document along with an element's primary content. </p><h3><a name="Implementations">CSS Implementations</a></h3> <p>At the publication of this NOTE, widely deployed browsers do not implement CSS consistently. However, the latest generation of browsers from a number of vendors demonstrates solid implementations of most of CSS1 and much of CSS2, and implementations continue to improve. </p><p>Obviously, the benefits of the features described in this document will not be realized without proper implementation of CSS1 and CSS2. Part of designing an accessible document with CSS involves ensuring that the document remains accessible when style sheets are turned off or not supported. </p><p>Until most browsers support CSS consistently, content developers may still create accessible documents that mix supported features of CSS with some presentation features of HTML. Documents that use HTML presentation features instead of CSS must transform gracefully. For example, tables used for layout must make sense when rendered serially. </p><div class="blogger-post-footer"></div> </article> <article> <h1>CSS3 Color profile</h1> <p>2008-03-14T11:24:00.003-07:00</p> <table class="tprofile" border="1" width="75%"> <tbody> <tr> <th class="title" colspan="2"><span class="modulename">CSS3 Color</span> profile </th></tr><tr> <th>Specification </th><td>HTML4 </td></tr><tr> <th>Accepts </th><td>HTML4 color keywords<br />RGB six digit hex color values </td></tr><tr> <th>Excludes </th><td>'color' property<br />'opacity' property<br />'color-profile' property<br />'rendering-intent' property<br />@color-profile rule<br />RGB three digit hex color values and RGB functional notation color value<br />RGBA color values<br />HSL and HSLA color values<br />SVG color keywords<br />'currentColor' color value<br />CSS2 UI Colors<br />'transparent' color value<br />'flavor' color value </td></tr><tr> <th>Extra constraints </th><td>none. </td></tr></tbody></table> <table class="tprofile" border="1" width="75%"> <tbody> <tr> <th class="title" colspan="2"><span class="modulename">CSS3 Color</span> profile </th></tr><tr> <th>Specification </th><td>CSS level 1 </td></tr><tr> <th>Accepts </th><td>'color' property<br />HTML4 color keywords<br />RGB color values </td></tr><tr> <th>Excludes </th><td>'opacity' property<br />'color-profile' property<br />'rendering-intent' property<br />@color-profile rule<br />RGBA color values<br />HSL and HSLA color values<br />SVG color keywords<br />'currentColor' color value<br />CSS2 UI Colors<br />'transparent' color value<br />'flavor' color value </td></tr><tr> <th>Extra constraints </th><td>none. </td></tr></tbody></table> <table class="tprofile" border="1" width="75%"> <tbody> <tr> <th class="title" colspan="2"><span class="modulename">CSS3 Color</span> profile </th></tr><tr> <th>Specification </th><td>CSS level 2 </td></tr><tr> <th>Accepts </th><td>'color' property<br />HTML4 color keywords<br />RGB color values<br />CSS2 UI Colors<br />'transparent' color value </td></tr><tr> <th>Excludes </th><td>'opacity' property<br />'color-profile' property<br />'rendering-intent' property<br />@color-profile rule<br />RGBA color values<br />HSL and HSLA color values<br />SVG color keywords<br />'currentColor' color value<br />'flavor' color value </td></tr><tr> <th>Extra constraints </th><td>'transparent' color value not valid for 'color' property. </td></tr></tbody></table> <table class="tprofile" border="1" width="75%"> <tbody> <tr> <th class="title" colspan="2"><span class="modulename">CSS3 Color</span> profile </th></tr><tr> <th>Specification </th><td>SVG 1.0 and 1.1 </td></tr><tr> <th>Accepts </th><td>'color' property<br />'opacity' property<br />@color-profile rule<br />HTML4 color keywords<br />RGB color values<br />CSS2 UI Colors<br />SVG color keywords<br />'currentColor' color value </td></tr><tr> <th>Excludes </th><td>'color-profile' property<br />'rendering-intent' property<br />RGBA color values<br />HSL and HSLA color values<br />'transparent' color value<br />'flavor' color value </td></tr><tr> <th>Extra constraints </th><td>'currentColor' color value not valid for 'color' property. </td></tr></tbody></table><div class="blogger-post-footer"></div> </article> <article> <h1>Sample style sheet for (X)HTML</h1> <p>2008-03-14T11:24:00.001-07:00</p> <p>This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents. </p><pre>html {<br /> color: black;<br /> background: white;<br /> color-profile: sRGB;<br /> rendering-intent: auto<br />}<br /><br />body[text] {<br /> color: attr(text,color};<br />}<br /><br />body[bgcolor],table[bgcolor],tr[bgcolor],td[bgcolor],th[bgcolor] {<br /> background-color: attr(bgcolor,color);<br />}<br /><br />font[color] {<br /> color: attr(color,color);<br />}<br /><br />/* traditional desktop user agent colors for hyperlinks */<br />:link { color: blue; } <br />:visited { color: purple; }<br /><br />img,object {<br /> color-profile: auto;<br /> rendering-intent: auto<br />}<br /><br />/* default focus outline */<br />:focus {<br /> outline: 1px dotted gray;<br /> outline: 1px solid flavor;<br />}<br /></pre><div class="blogger-post-footer"></div> </article> <article> <h1>CSS System Colors</h1> <p>2008-03-14T11:23:00.001-07:00</p> <h4 id="css2-system">CSS2 System Colors</h4> <p><strong>Deprecated.</strong> In addition to being able to assign pre-defined color values to text, backgrounds, etc., <a href="http://www.w3.org/TR/REC-CSS2/ui.html#system-colors">CSS2</a> allowed authors to specify colors in a manner that integrated them into the user's graphic environment. </p><p>For systems that do not have a corresponding value, the specified value should be mapped to the nearest system color value, or to a default color. Note that some profiles of CSS may not support System Colors at all. </p><p>The following lists additional values for color-related CSS values and their general meaning. Any color property can take one of the following names. Although these are case-insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible. </p><dl><dt><strong>ActiveBorder</strong> </dt><dd>Active window border. </dd><dt><strong>ActiveCaption</strong> </dt><dd>Active window caption. </dd><dt><strong>AppWorkspace</strong> </dt><dd>Background color of multiple document interface. </dd><dt><strong>Background</strong> </dt><dd>Desktop background. </dd><dt><strong>ButtonFace</strong> </dt><dd>Face color for three-dimensional display elements. </dd><dt><strong>ButtonHighlight</strong> </dt><dd>Dark shadow for three-dimensional display elements (for edges facing away from the light source). </dd><dt><strong>ButtonShadow</strong> </dt><dd>Shadow color for three-dimensional display elements. </dd><dt><strong>ButtonText</strong> </dt><dd>Text on push buttons. </dd><dt><strong>CaptionText</strong> </dt><dd>Text in caption, size box, and scrollbar arrow box. </dd><dt><strong>GrayText</strong> </dt><dd>Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. </dd><dt><strong>Highlight</strong> </dt><dd>Item(s) selected in a control. </dd><dt><strong>HighlightText</strong> </dt><dd>Text of item(s) selected in a control. </dd><dt><strong>InactiveBorder</strong> </dt><dd>Inactive window border. </dd><dt><strong>InactiveCaption</strong> </dt><dd>Inactive window caption. </dd><dt><strong>InactiveCaptionText</strong> </dt><dd>Color of text in an inactive caption. </dd><dt><strong>InfoBackground</strong> </dt><dd>Background color for tooltip controls. </dd><dt><strong>InfoText</strong> </dt><dd>Text color for tooltip controls. </dd><dt><strong>Menu</strong> </dt><dd>Menu background. </dd><dt><strong>MenuText</strong> </dt><dd>Text in menus. </dd><dt><strong>Scrollbar</strong> </dt><dd>Scroll bar gray area. </dd><dt><strong>ThreeDDarkShadow</strong> </dt><dd>Dark shadow for three-dimensional display elements. </dd><dt><strong>ThreeDFace</strong> </dt><dd>Face color for three-dimensional display elements. </dd><dt><strong>ThreeDHighlight</strong> </dt><dd>Highlight color for three-dimensional display elements. </dd><dt><strong>ThreeDLightShadow</strong> </dt><dd>Light color for three-dimensional display elements (for edges facing the light source). </dd><dt><strong>ThreeDShadow</strong> </dt><dd>Dark shadow for three-dimensional display elements. </dd><dt><strong>Window</strong> </dt><dd>Window background. </dd><dt><strong>WindowFrame</strong> </dt><dd>Window frame. </dd><dt><strong>WindowText</strong> </dt><dd>Text in windows. </dd></dl> <div class="deprecated-example"> <p style="display: none;">DEPRECATED EXAMPLE(S): </p><p>For example, to set the foreground and background colors of a paragraph to the same foreground and background colors of the user's window, write the following: </p><pre>p { color: WindowText; background-color: Window }<br /></pre></div> <p class="note"><strong>Note.</strong> The computed value of a System Color keyword value is the keyword itself. </p><p>The CSS2 System Color values have been deprecated in favor of the CSS3 UI 'appearance' property for specifying the complete look of user interface related elements. </p><div class="blogger-post-footer"></div> </article> </main></body></html>