More advice for the full screen mode.
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
Table of topic groupsFront page of CSS-guideExtra pages > F Some advice how to design CSS files

F Some advice how to design CSS files



This page has also a special "slide show" format for Opera 4.x+, when you use the full screen mode (for example by pressing the F11 key).
  • It is reasonable to define CSS as far as possible in separate files. At this way CSS is easiest to update.

  • Newest browsers support media types and media groups[S]. At least media types screen, projection and print should be noticed.

  • The author must choose, if he wants to use media blocks (eg. @media print {...}) or media attributes (for example media="print").

  • At least for the Netscape 4.x series should define own style sheets (in a special page[S] is exact advice).

  • The CSS encoding (like other encoding too, for example JavaScript and DHTML) must design so, that the content is accessible to all browsers even if the presentation is different (I handle in an another page basics of WWW[S]).


Media blocks

Advantages of media blocks:

  • You can create common definitions to several media types, for example:

    @media screen, projection {
    html {background-color:#603}
    body {background-color:white}
    @media print, projection {
    h3.Break {page-break-before:always}
  • If you group CSS according to the property values, changing one value could affect as wide as possible, when the updating is very powerful and easy. For example:

    blockquote.code, blockquote.cite, address, pre.code, div.code {border: 1px solid #603;}
    code, kbd, var, blockquote.code, div.code, pre.code {background-color:#cff}

Disadvantages of media blocks:

  • The browser must download a quite large file. I don't have however found any difficulties with this matter.
  • To find an individual point, is sometimes difficult in a large file even if media blocks have empty space between them.

  • To find individual errors is sometimes difficult. Especially it is worth to to remember not to make errors in the terminating curly brackets. An additional or missing curly bracket cuts media blocks from incorrect places. Mark the termination point, for example at the following way:

    } /* the end of the media types screen and projection */
  • Media block don't work in Netscape 4.x, Opera 3.x, MS IE 4.0 for Windows and MS IE 5.x for Mac browsers (some of the them skip all media blocks and some of them read all media blocks without taking account for which media type they are intended).


Separate files

Advances of separate files:

  • If media types are in separate file, the sizes of individual files are smaller as in a combined CSS file. To find the place, which should be altered is easier.

  • Is is easier to take account browser specific features.

  • The media attribute (media="...") works also in MS IE Mac browsers.

Disadvantages of separate files:

  • The total control of CSS is more difficult, because one change is not enough.



Design so, that most of CSS is common to several sites. Define main CSS-file for modern browsers (for example basicScreen) such that it fits relative well for all modern browsers without JavaScript support enabled. Create then site or browser dependent CSS-files, for example:

  • Color themes. If you use new Mozilla Gecko and Opera 7.x browsers you can switch (View > Use Stylesheet in Mozilla Gecko browsers) between different color themes like in the example below:

    <link rel="stylesheet" type="text/css" href="../Css/ThemeCSS.css" media="screen, projection" />
    <link rel="alternate stylesheet" type="text/css" href="../Css/ThemeCommon.css" media="screen" title="The color theme for common pages" />
    <link rel="alternate stylesheet" type="text/css" href="../Css/ThemeHelp.css" media="screen" title="The color theme for help pages" />
  • Font themes (font-size, font-family etc. properties).

  • Custom CSS-files. I recommend to design the main CSS for fictional perfect CSS2 supporting browser. Custom CSS files fix rendering errors of browsers or they add browser-specific special features (look at from the source code of this page some examples how to detect browsers or look at another extra page[S]).



MS IE 5.5++for Windows and Mozilla 1.0+ have minimal implementation of paged media and Opera 4.x+ browsers have quite wide paged media support. All of these browsers can set page-break-after/before:avoid in order to control page breaks. Below is advice how to set page break points and other printing-related CSS:

  • Use certain element to divide pages into sections. Natural elements for this purpose are heading element H2-H6 depending on which is the main heading element of the pages (it is commonly H1 or H2).

  • Put before special bordered blocks and tables page-break-before:avoid.

  • You can set automatic control for Opera browser to eliminate pages to break from incorrect places by setting elements certain classes, which have page-break-inside:avoid.

  • You can reveal with Opera and new Netscape/ Mozilla browsers certain Web-addresses by setting for example a.showInPrinting:before {content:" <" attr(href) "> "}.