stylesheets

The CSS (Cascading Style Sheets) language separates style information from HTML mark-up

example of image bar

image floated right, caption and text positioned left

.pic { float:right; }
.close { clear:right; }
/* more formatting code.. */

The other CSS topics in this page are:

why CSS,
tables vs. divs,
visual formatting,
fonts,
colors,
printing, and
reference links.

Just for fun, image bars that use the same HTML mark-up, but look different, because of different styling. The image bar above is a colored strip with the image floated right, and caption text and more related text positioned left, while the second image bar below has the image together with caption text in a box floated left, with related text positioned right.

summer photo

This example has image and caption in a box floated left, and text positioned right. The styling code includes positioning and text styling, but the essential part is

.picbox { 
  border: thin solid silver; 
  float:left; 
}
.close { clear:left; }
/* more formatting code.. */

The HTML mark-up for both image bars is

<div class="box">
  <div class="picbox">
     <div class="pic"><img src="picfile.jpg" /></div>
     <p class="caption">caption text</p>
  </div>
  <div class="text">
     <p>some related text</p> <p>more text...</p>
  </div>
  <div class="close"> </div>
</div>

why CSS

It is good practice to have all styling information in separate CSS files, that helps with having compact HTML files, and the appearance of a page is flexbile, modifications are easy to do in a few stylesheets files used by many HTML documents. When HTML douments are viewed in a browser, most browsers cache the related CSS files, thus saving bandwidth.

Not all browsers render CSS settings in the same way, IE for example does not support all CSS2 features, sometimes various work-arounds are needed, or conditional comments can be used in HTML files to select stylesheets according to the browser.

tables vs. divs

Tables are better used only for presentation of data, not for layout. It is better to use for layout elements like <div> instead of tables, this makes the HTML mark-up even more compact, and correctly designed HTML pages are rendered in the same way by most browsers. Using tables only for presentation of data, not for layout, helps also with accessibility, screen readers make extra effort with tables to present the complex structure of a table in an easy to understand way.

visual formatting and positioning

The CSS code attaches styling properties to HTML elements, for text formatting and positioning in the browser window (the viewport). These properties are inherited by elements down the HTML document tree (hence cascading style sheets). Spatial positioning is done via the box model, each HTML element is positioned according to its type (block, inline, etc.) and styling properties. Examples of block elements are <div> or <p> and of inline elements <img> or <span>.

Elements styled as floats (with float:left or float:right) are taken out of the normal flow of positioning, and to appear spatially enclosed within their parent element a clear rule is necessary, (clear:left, or clear:right or clear:both).

The margin and padding properties are used for positioning. The best way to use them is with the shorthand margin and padding properties: if there is only one value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

fonts

There are various CSS font properties, font-style, font-variant, font-weight, font-size, line-height and font-family. It is good practice to set font size for screen display in relative units, like em, not absolute, like pixels, so people can adjust the text size. This means that the whole page layout must be flexible to accomodate various text sizes. The font size setting for printing is better done in absolute pt units.

colors

It is important that the text and background colors are contrasting, for the text to be easy to read. The inheritance of properties via the cascading effect of the stylesheets can cause sometimes similar text and background colors, so it is good practice when setting one of the colors (background or text) to set the other as well, with the 'color' and 'background-color' properties.

printing

The appearance of a printed HTML page (viewed in a browser with 'Print Preview'), can be set in stylesheets by using media types, for example by adding a <link> element to the <head> part of an HTML document,

<link rel="stylesheet" type="text/css" 
      media="print" href="print.css" />

Background colors and background images do not appear at printing by default.

Some page components do not need to appear in the printed version, for example the site navigation bar, so they are styled with display:none, with margins of the remaining visible elements changed accordingly.

Setting font size and font types in the printing stylesheet: the font units recommended for printing are absolute, for example
font-size:12pt (not relative, like for the browser).

There are properties specific to paged media, that set page breaking point, like pagebreak. This is quite difficult to set right, and it depends on browser settings for printing format.

Another styling specific to printing refers to hyperlinks. About printing hyperlinks, Eric Meyer gives a very nifty example of printing the URL, in his A List Apart article on using stylesheets for printing. He uses CSS generated content and the :after pseudo-element, so it works only in CSS2-conforming browsers, like Firefox or Opera.

#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }

reference links

www.w3.org/TR/CSS2/: CSS2 specification
jigsaw.w3.org/css-validator/: CSS validator
www.w3.org/Style/Examples/007/: CSS tips and tricks by Bert Bos
www.alistapart.com/articles/practicalcss/: practical CSS layout tips, tricks and techniques by Mark Newhouse
www.w3.org/QA/Tips/font-size: care with font size - W3C QA tips for webmasters
web.mit.edu/jmorzins/www/fonts.html: safe web fonts
html-color-codes.com: web color chart hexadecimal by VisiBone
www.w3.org/QA/Tips/color: if you pick one color, pick them all - W3C QA tips
www.alistapart.com/articles/goingtoprint/: Going to print by Eric Meyer
www.w3.org/TR/CSS2/media.html: Media types in CSS2
www.w3.org/TR/CSS2/page.html: Paged media in CSS2