Style Sheets - CSS
Control presentation and layout of web pages with Cascading Style Sheets (CSS).
Cascading Style Sheets (CSS) are a recommendation of the World Wide Web Consortium (W3C) introduced in late 1996, which offer extensive stylistic control over the presentation of Web pages. The W3C has published two major CSS recommendations, CSS1 and CSS2 (1998), which has gone through a first revision becoming CSS2.1. At present, the W3C is working on CSS3.
A style sheet is simply a text file (which has a .css suffix) written according to the grammar defined in the CSS recommendations that suggests a web browser how to draw a page.
CSS helps to simplify the task of maintaining web sites, separates formatting information from the structure of a document and provides sophisticated layout and design features for web pages.
Advantages of using Style Sheets
- Separation of formatting information – positioning, sizing, margins, type faces, etc. - from the structure and content of a document, as represented by HTML elements – headings, lists, paragraphs, links, etc.
- Easier site maintenance:central control over formatting which can be easily modified: one file (or set of files) can be used to control the overall design of a site.
- Wider array of attributes to control the design of pages than that available with HTML.
- Reduced size of the documents:eliminates redundant in-line styling (font, bold, color, etc.) which reduces the size of HTML files.
- Increased accessibility: users can much more easily override author style information.
- Possibility to apply of alternative Style Sheets for different output media devices: printers, voice browsers, PDA, etc.
Disadvantages of CSS
- Browsers are not fully standards-compliant with both CSS recommendations. The support for different properties and the way they are rendered can substantially vary form one browser to other.
- Platforms are another source of problems as they may have different default screen resolutions and font settings.
Use on EUROPA websites
- CSS 2.1 is the standard officially approved for use on EUROPA.
- Control presentation and layout with Style Sheets rather than with HTML presentation elements and attributes. Do not mix format instructions in both HTML code and via the Style Sheets simultaneously. This can lead to display conflicts with the browser’s or user’s default settings if the document is rendered without associated style sheets. HTML documents using Style Sheets must also be usable when CSS are disable.
- Create a site that renders well with any browser by marking up HTML documents with the proper structural elements (e.g. for headings use <Hx>, for ordered lists use <ol>, etc.). Misusing mark-up for a presentation effect makes it difficult for users with alternative browsers to understand the organisation of the page or to navigate through it.
Link each page to the standard CSS files.
The Commission and inter-institutional templates provide links to central CSS files, which define the mandatory upper and bottom part elements of the page. It also provides a definition by default for all HTML elements. Do not make local copies of these central CSS-files nor copy parts of it in your local CSS file(s) and change their values.
Centralise formatting instructions using an external CSS file.
In addition to the standard CSS files, you can use your own (local) Style Sheets to format the body part elements of your documents. Link it to your HTML pages using the LINK tag (i.e. <link rel="stylesheet" href="your local css file name" type="text/css">). With multiple linked Style Sheets (standards plus local) it is possible that conflicting style specifications may occur, but in general the order of specification is important, the latest taking precedence.
- Inside your local Style Sheets define first the HTML mark-up elements such as body, h1, p, td, ul, etc. This will give a coherent presentation to the whole site and will save many formatting instructions. If finer control or a more sophisticated layout is required, then create classes, id or use descendant (contextual) selectors.
- Follow CSS syntax rules as described by the W3C specifications and validate your own Style Sheets.
- Try to limit your styles to a subset of well known CSS properties that are sufficiently supported by the largest set of different browsers.
- Classes should be named in English, without accents and space.
- The property font-family will be a list of well known font family names always finishing by the value sans-serif. Each item in the list is separated by a comma. Font names should be capitalized except the value sans-serif. Example: font-family: Verdana, Arial, Helvetica, sans-serif;
- Do not fix fonts in absolute values (i.e. px) except in special cases but in relative ones (i.e. % or em) or use nothing at all in order to leave the font resizable via the browser. Proper use of relative sizing can be difficult when documents elements are nested since they refer to the font size of the parent element. Be aware of this inheritance and never give values under 75 % or 9 px, it may render your text unreadable on some platforms (i.e. Mac or Linux).
Guidelines and references
- Accessibility Features of CSS
- CSS Techniques for WCAG 2.0
- CSS tutorial
- Study - Accessible Style Sheets for EUROPA
Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.