67.20% of pages uses CSS in one way or another. But how is it used?

Figure 19 shows, that most often only external stylesheets are used. But practically the same amount of pages use external stylesheets in combination with inline styles.

63.43% of pages with CSS uses some external CSS file. But almost the same amount of pages (61.51%) uses inline styles.

external, external + inline, inline, external + embedded + inline, embedded + inline, embedded, external + embedded

Figure 19. How is CSS connected to HTML. <link> designates the use of external stylesheets, not only linking external sheets with link element, but also external CSS imported with @import rule.

72.2% of pages with external CSS link only one CSS file, 17.9% links two files, 4.0% three and 3.9% four. The remaining 2% uses more than four external stylesheets.

Figure 20 shows how external CSS is usually larger in size than CSS inside HTML. Inline and embedded CSS in contrast follow quite similar usage pattern.

Figure 20. Comparison of code sizes between external, embedded and inline CSS. The CSS in external files is usually larger than CSS inside HTML.

CSS properties

So, what are the most common CSS properties? Figure 21 gives a listing of most popular properties out there.

color, font-size, font-family, text-decoration, font-weight, background-color, width, text-align, margin-top, margin, margin-bottom, border, padding, ...

Figure 21. Most frequently used CSS properties.

The top 5 of CSS properties consists entirely of typografical tools. Not many web designers out there, who accept the browser default settings. But the shorthand property font appears only in the code of 13% of CSS-using pages. I guess this is because font has the most complex syntax of all CSS2 attributes – even I prefer not to use it, although I know the syntax by heart.

Property color

The word “color” probably wasn’t the best choice for a property describing the color of text. text-color or font-color would have been more intuitive – in the result set thousands of pages used either of those. Although as much as I tested on various browsers neither text-color or font-color seemed to have any effect at all.

There is no graph for this property, but you can check out the values for this and many other properties from css-properties.txt.

Property font-size

As figure 22 clearly shows, most pages use either pixels or points to designate the font size. And both of these units are considered bad practices for that purpose, especially points, which make no sense at all in web context.

Another interesting thing to note from that figure is the significant number of pages using integer value for this property – being not allowed according to W3C, this is entirely the fault of browser vendors, as practically all browsers interpret integer value for this property as if it had px appended.

Looking at the font size keywords reveals, that decreasing the font size is clearly more common than increasing it.

px, pt, %, em, INTEGER, small, x-small, xx-small, medium, smaller, large, x-large, larger, inherit, xx-large

Figure 22. What kind of values are used with the font-size property? Most pages use either pixels or points.

Property font-family

Many of you have probably seen the combination:

font-faily: Arial, Verdana, Helvetica, sans-serif;

Well, these are the four most common font family names you come across in internet. (See figure 23.)

From the set of generic font family names sans-serif, serif and monospace are used mostly. cursive and fantasy are really rare.

If you look at the figure, you see some quite popular fonts like times, new and roman, indicating the lack of proper quoting in constructs like this:

font-family: Times New Roman, serif;
Arial, Verdana, Helvetica, sans-serif, Geneva, Times, serif,  Times New Roman, New, Courier, Tahoma, Roman, Georgia, Web, ...

Figure 23. 50 commonest font family names. Dark bars indicate generic font family names.

Property text-decoration

The commonest use of this property is probably removing the underlines from links, but adding the underline is very common too. (See figure 24.)

none, underline, overline, line-through, blink, bold

Figure 24. Common values for text-decoration property. Note the invalid value bold.

Property font-weight

No real surprises here. Making text bold is more common than removing the boldness. Some pages also make use of the integer values and bolder and lighter keywords, which aren’t quite consistent across browsers. Three last values in figure 25 are invalid.

bold, normal, INTEGER, bolder, lighter, plain, none, regular

Figure 25. How is the font-weight property used?

Property width

The situation with width is somewhat similar to font-size as both properties designate lengths. Although points are used rarely, integer values are quite common (again interpreted as pixels by browsers, but invalid according to CSS recommendations). (See figure 26.)

px, %, INTEGER, auto, em, pt, in

Figure 26. Most frequent value types of width.

Property text-align

As the text is aligned left by default, it’s no surprise that it isn’t the most popular one. Maybe only the justify column in figure 27 should be less tall, as justification doesn’t work well in web.

center, left, right, justify, none

Figure 27. The values used with text-align property.

I could go on and on with describing all the CSS properties listed on figure 21, but the less-popular ones aren’t that interesting plus the properties described above pretty much should give the overall picture. So instead I will continue with looking at CSS units in general.

But for those of you with in-depth interest to CSS properties and their values, css-properties.txt contains all the property-value combinations that appeared in the selection more than 1000 times.

CSS units

The following figure 28 resambles figure 25 which described the font-size property. The high volume of pages using points on the following figure is probably the result of font-size being used so heavily, that if effects the general statistics of CSS units.

px, pt, %, em, cm, in, ex, mm, pc, ms, s

Figure 28. Which units are used in CSS? Most pages only use pixels.


Colors are on the majority of pages specified with #rrggbb syntax. The next in popularity is #rgb and almost as popular is the use of keywords. Most unpopular was the use of rgb() function.

The most popular color was white, followed by black, red, blue and yellow.

Image formats

As seen from figure 29, most pages use GIF in CSS background images. JPEG is not so frequent and PNG is quite rare.


Figure 29. Image formats in CSS background images.


Most frequently used CSS selectors are given in figure 30. The list of less-popular selectors is continued in figure 31.

E, .class, :hover, :visited, :link, :active, E F, #id, *, E > F, ?, :focus, :?, [foo='bar']

Figure 30. Most frequent CSS selectors.

The first figure clearly shows, that the most frequently used selectors are the selectors of CSS1, except the pseudoclasses :first-letter and :first-line, which don’t have a lot of use. Håkon Wium Lie mentions these constructs in he’s thesis about CSS as features, that could have been left out from the specification without significant loss:

However, the cost of implementing these features far outweighted the benefits of the visual effects they provided.

The element selector definitely deserves it’s place as the most frequently used selector – almost 80% of pages with CSS make use of it. But the class selector is without no great reason about three times as popular as the ID selector; ID is even less popular than the descendant selector.

Of course it’s no surprise, that the link-related pseudo classes are in the top list, :hover being the first as there is no HTML-alternative to style this status.

All the other selectors belong to CSS2 (or even CSS3) and as these are not supported by the widespread IE6, webpages also make no significant use of those. Even the universal selector (*), the only one in CSS2 supported by IE6, gains only a little more usage than the child selector, which has no support in IE6.

It will be interesting to see if and how these graphs are going to change when IE7 finally reaches the market.

[foo='bar'], E + F, [foo], :first-child, ::after, ::before, [foo^='bar'], :last-child, :first-letter, :not(), [foo~='bar'], :lang(), ...

Figure 31. Less frequent CSS selectors. Continues the previous figure.

Element selectors

As mentioned before: the main activity with stylesheets is altering the default look of links (color, underline). The following figure 32 makes this even more clear – almost 90% of CSS-using pages select element a.

body is on the second place, but the gathered data doesn’t show weather it’s there because of setting some general properties for the whole page (like font and color) or just to adjust the margin and padding of the body element. I’m afraid of the latter.

I think I don’t have to mention which common practice the 50% of pages selecting td refers to.

For some reason there is a lot of styling of p elements. The following h1, h2 and h3 seem to me like more appropriate targets for styling. But I guess if we would count all the different headings as one general h element, they would largely outweight the selecting of p, maybe even td.

a, body, td, p, h1, h2, h3, li, ul, h4, div, table, th, input, img, select, form, h5, span, textarea, tr, hr, h6, blockquote, ol, html, b, label, ...

Figure 32. How frequently are different elements selected with CSS.

Class selectors

The selection of URI-s used for this research had one significant problem: some larger sites were represented with a lot of URI-s (e.g. there were thousands of cnn.com subpages) refering to pages with quite similar markup, many of them pointing to the exact same CSS files. One might think, that counting the code from one site about 10,000 times will make the results of the research too much a reflection of that site's code, and this thought certainly isn't wrong. But on the other hand, it wouldn't be quite fair to give to the one-page site of Bob Noname the same weight as to the multimillion-subpage site of microsoft.com. It's not a problem with a simple solution...

But what has this all to do with class selectors? Quite a bit, because when you look at the figure 33 containing most frequently used classnames, many of them do not reflect the general usage of class names in web, but the number of CNN sites in the selection for example.

Even with that kind of classnames removed, I don't count the data on that figure quite trustworthy – some of those large pages might have also contained much more generic class names like small and header making them appear more frequent than they really are.

All the shortcomings aside, you are still welcome to compare the results with the class names statistics of Google Web Authoring Statistics and John Allsopp's Semantics in the wild. But you should also note one of the main differences between this and those researches: this statistics is based on the classnames gathered from CSS files, while the others have counted classnames in HTML.

small, header, ... , footer, white, nav, link, title, byline, caption, h3, menu, black, ... , text, copyright, ... , boxtitle, text2, maintext, text1, ...

Figure 33. Most frequently used classnames. The classnames which clearly originate from some particular site are marked with white columns.

ID selectors

Happily, the big sites don't seem to make a lot of use from ID selectors, so the statistics shown in figure 34 are much more trustworthy.

The figure clearly distinguishes the top three ID names from the rest. content, footer and header are also in the top three of John Allsopp’s list of most frequent ID-s (if you exclude some quirks like BTAMarker).

content, footer, header, subnav, container, logo, menu, main, top, subhead, loginregister, nav, ...

Figure 34. Most frequently used ID-s. The ID-s which clearly originate from some particular site are marked with white columns.


Clearly the most popular at-rule is @import, appearing almost as frequently as all the others added together (See figure 35.) @media, @page and @font-face are not very rear too.

Interestingly many pages made use of at-rules, that aren’t part of CSS specifications. As much as I managed to find out, the rules like @list are Microsoft Office or some other MS product specific.

@import, @media, @page, @font-face, @charset, @list, @pagesection1, @meta

Figure 35. Relative frequency of different CSS at-rules.

Markup correctness

Only 40.92% of pages with CSS were using valid CSS2. This doesn’t mean all the other pages use invalid CSS – some of them might be using CSS1, CSS2.1 or CSS3 syntax which is not part of CSS2. But as the previous statistics has shown: not many pages make use of CSS not part of CSS2.

But what about pages that use valid (X)HTML? One would think that a page with valid markup will mostly contain valid CSS too. And indeed, in the set of pages with valid HTML, there are more pages with valid CSS, but the difference is not that big: only 51.39% of pages with valid HTML have valid CSS.

Figure 36 shows the distribution of pages by different CSS validator error messages per page. Happily the most frequent is no errors at all.

A quickly falling graph

Figure 36. Distribution of pages by different CSS validator error messages per page.

16 most frequent error messages are given in the following figure 37. Explanations of the error message numbers are given in the following text.

Error messages 1, 2, 3 and 4 are by large the most common ones.

Figure 37. Most frequent error messages of W3C CSS validator.

  1. Property x doesn't exist
  2. y is not a x value
  3. Unrecognized
  4. You must put an unit after your number
  5. Parse error – Unrecognized
  6. Attempt to find a semi-colon before the property name. add it
  7. Too many values or values are not recognized
  8. Unknown dimension : x
  9. x is not a valid color 3 or 6 hexadecimals numbers
  10. Generic family names are keywords, and therefore must not be quoted.
  11. Too few values for the property x
  12. In CSS1, a id/class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such ids/classes are parsed as unknown dimensions (to allow for future additions of new units)
  13. x negative values are not allowed
  14. Invalid separator in shape definition. It must be a comma.
  15. x is an incorrect operator
  16. Unknown error

Kirjutatud 12. juunil 2006.


Eesti Trinoloogide Maja. Eesti trinoloogiahuviliste avalik kogunemiskoht. info@triin.net



RSS, RSS kommentaarid, XHTML, CSS, AA