Style with CSS

The idea of the style sheets, applied to the pages Web cannot be simpler. Just as with a program of desktop publishing or text processor, the style sheet defines the format of the text, the headings, lists, etc. and you can specify the style details as much as it is needed. Any change that you introduce in the style sheet will globally apply in all the pages Web based on that style sheet.

Style sheets enable a separation of content and presentation. The HTML should only include tags that mark up the content of the page, while its appearance should be specified by CSS. The power of this system of defining the format of the pages is enormous. We’ll see that it is possible to change the look of a whole website, with as many pages as it may contain, just by modifying a single style sheet. Style sheets make a piece of cake of some maintenance tasks that with HTML only were time-consuming and generated lots of clutter in the markup, it can turn the task of reformatting everything in sewing and singing. Apart from this uncomparable comfort and power of using style sheets, there is also a number of sophisticated presentation, typography and layout effects that were impossible to achieve with ordinary HTML alone. For example:

The links in a page, with regular HTML have always the same colours. With a style sheet we can define so many types of links as we wish. For example, a style for a menu bar, another one for a sidebar, another style for the foot of the page and yet another one for the links within the body of the text; we can add as many variant as we need. A good example: see how different links behave in this same page.
The effect of change of colour and style when you mouse over a link in modern browser is something that you can do exclusively with style sheets.
In HTML the links are always underlined, and it is not possible to changeit. But with a simple order in the style sheet, they links will appear as you want: normal, bold, italics, underlined, striked through, overlined...
The style sheets allow a very complete typographic control, in comparison with the rather rudimentary features of HTML. With CSS you can define more finely the size, spacing, style, colours, backgrounds...
The disposition of the elements in the page can be controlled accurately and, if it is necessary, positions can be fixed absolutely. Or you might want to create fluid designs where everything reflows when the user changes the size of the window or the size of the fonts.
In combination with some Javascript, the style sheets allow to create dynamic pages, with or without the inclusion of graphics: scrolling elements, pull-down menus, slideshows and many more eye-catching designs.

What are stylesheets and how to use them

Style sheets are a mature web standard that began to be supported (partially) in the versions 3 and 4 of Netscape and Explorer. Explorer used to have better support of CSS, but the situation reversed completely with Mozilla, the best standards-based browsers. Now, each succesive version of either Mozilla, Opera or Explorer has better and better support for style sheets and both users and developers benefit from it.

the same website as it looks when changing its style sheet

The same page Web, without touching anything of its markup, with a totally different look as a result of a change in its associated style sheet. A sample of the CSS possibilities.

The style sheets for web pages are called Cascading Style Sheets, and they’re better by its abbreviation (CSS). They are “cascading” because the style at different levels can be defined, and each one overruns what was defined in the previous level. For example, you can specify a font for your <body> and it will cascade down to each text element in the page; but if you now specify a different font for the element <p>, each paragraph would now have a different font. The CSS markup is similar to HTML, in the sense that it consists of a code are written in simple text, and it can be either specified inline for a single HTML tag, embedded in the page, linked and imported from an external file. A linked or imported style sheet is a normal plain text file, with the extension .css

To apply style sheets to a Web isn’t an irreversible decision; everything can be changed very easily; if we already have lots of work done, CSS will let us apply styles without practically having to touch anything in individual pages. For example, this website a few hundred pages. If we wanted to change the background colour in each and every one of these pages we wouldn’t need to open any of them. We’d only need to change a line in the .css external file.

Let us explain briefly what does the CSS consist of. To each element in the HTML of the page (called selectors in CSS), for example, paragraphs, heading 1, heading 2, links...) you may specify diferent properties with a declaration, which includes a property, for example, color, and a value, for example red. Thus, this rule:
H1 { color: red }
would mean that the heading 1 would be in red colour. This way you specify all the desired properties for any element on a normal web page, not only fonts, text properties, colours, sizes... but also positioning of elements and display properties. This gives you an extremely powerful control on the way a page is displayed in a standards-compliant browser. And you can create as many variants or classes as you need for each selector, and unique ocurrences as well, using a unique identifier, an ID. For example, you may define several kinds of text in a typical page: one in white on a black backgound and another with inverse properties, other classes in different sizes, bigger or smaller, and different properties for captions, headings... and so on. The flexibility is absolute, like in a good DTP program.

One of the most attractive features of CSS is that, once you have defined the style, you can stop worrying about the consistence of your text specifications. Fonts, colours, alignment, or any other attribute will be applied with no errors automatically following the cascade model. And if you want to change something you just have to redefine the style and all its instances will be updated automatically. To change all the document or a group of documents as big as you want, even the whole website, you only need to use a centralised style sheet, linked to each web page. Whenever you edit this external style sheet file all the web pages will apply the newly redefined style rules. A monumental time saving and also a perfect way to ensure consistency and no errors. cambio global de estilo con css

An example of global style change in a website: a change in the external linked stylesheet file will automatically update the look of each page in the site.

As we said earlier, it is also possible to define different variants for the links (something impossible with the HTML alone). For example, we can create a type of link for navigation or menu bars and introduce different kinds of links in any single page, each with its own characteristics of font, background and text colour, etc. and define its :hover properties, that is which change must take place when the mouse passes over the link.

How to create, edit and apply CSS.

Any good web publisher now incorporates easy visual systems to create and apply style sheets; generic styles can be assigned to selectors like paragraph blocks, tables, list items, links... or special classes and IDs can be created as well with a descriptive name to identify them, for example “caption” or “footnote” (it’s better to use meaninful names, not based on the appearance, because you might change this and a name like “red link” would make little sense if you changed it to green. In a visual editor, it’s easy to create the style rules, because all you have to do is to choose the different selectors and establish their declarations using the program’s menus and palettes.

Applying a style sheet.

La aplicación del estilo es totalmente flexible. Puede hacerse de varios modos y a diferentes niveles. Desde toda una web a un carácter individual, según convenga; y cuanto más específico sea un estilo, se impondrá a los que afectan la página más globalmente. Puede aplicarse por medio de un enlace a un fichero externo (por ejemplo, estilo.css), con un estilo para una página completa, que se incluye dentro de la sección <head> del html, o con un estilo definido para una sección particular de la página. Para más flexibilidad, un formato aplicado directamente desde el html se impondrá a su vez a la definición del estilo. Like everything related to CSS, the application of the style is totally flexible. You can do it in several ways and at different levels, ranging from a whole website to a single character. The more specific it is a style, the more it overrides other more general rules, following the cascade model. You can link an external file, for example one called style.css, import it (several stylesheets, if you wish, for a single page) or embed the style for a page. In both cases you include either the link or the style inside the <head> section of the web page. Then you can define a particular style for a specific section of the page, an inline style, using a tag in HTML, the <style> tag.

The options of linking and importing an external style sheet have enormous advantages. First, you format all the pages at once, with the peace of mind of being able to change everything with a single .css file. For specific variants of the style, the classes and IDs, you will have to indicate at the HTML level which class or ID is associated to a given object in the page, something simple to do, especially with a visual editor, where you simply have to choose from a drop-down menu or a palette. A linked style sheet will appear in the code of the page like <link rel= "stylesheet" href="style-sheet_name.css">. You can download this file and use it to analyse it and learn in a practical way. You can even “recycle” parts of this stylesheet.

If we have ten, one hundred, a thousand pages linked to the external style sheet, all these pages will have a consistent look. Changing for example the base font for the texts, would need only editing a line of code in the style sheet. In a few minutes of work we can update all our website, with no mistakes, and we don’t even need to open a single web page! This is power and comfort; try to do the same with a website full of <font> tags! Most changes will be equally simple; just edit the external style sheet and everything will be updated instantly.

CSS editors.

Para crear y aplicar hojas de estilo a las páginas Web, no deseamos, evidentemente, tener que liarnos con el código HTML o aprender las especificaciones de CSS. Queremos hacerlo de forma sencilla, como si trabáramos en un procesador de textos. Crear los estilos como los creamos y aplicamos en Word. FrontPage Express y Composer (al menos hasta la versión 5) NO permiten crear o aplicar visualmente hojas de estilo. Con estos editores deberíamos, pues, hacerlo a mano.

Por fortuna, existe una solución: emplear un programa de edición de CSS. Existen un buen número de ellos, algunos freeware, como Ystylist o Cascade (encontraréis las direcciones en la página Cheapware.); o muchos otros en la página de CSS del World Wide Web Consortium.

To create and apply style sheets we can take advantage of a variety of programs that speed up the coding. Visual editors can do the trick even better, preventing us to deal with code at all! FrontPage Express doesn’t support CSS but the most recent versions of Composer do.

There are several CSS editors; some are freeware, like Ystylist or Balthisar Cascade. Many tools are listed in the CSS page of the W3 Consortium. Style Master and Style Edit Pro are two of the most popular and powerful commercial editors, but you can also take advantage of other CSS-aware HTML editors like NVU, HTMLKit —with an excellent CSS support and plugins— or NoteTab, which has several CSS Libraries that let you edit style sheets very easily and intuitively. On the other hand, the advanced web publishers (Fusion 5+, Dreamweaver, Golive...) support CSS and include visual editing tools.

Resources

As you’ll have realized by now, style sheets is something that’s well worth learning. There is a wealth of excellent resources in the web to learn the basics and advanced techniques as well.

First of all you should visit the w3.org style page and you will find lots of resources linked there, including CSS tools like the validator, which you can use to test the validity and well-formedness of your styles.
In HTML Dog you’ll find a very good reference of CSS properties.
The CSS Zen Garden and A List Apart will show you the possibilities of CSS and standards-based design.
The developers of Style Master offer a comprehensive CSS help page, easily one of the best.
CSS Vault, a huge directory of everything CSS-related.
A good starter step by step tutorial, CSS from the ground up.
The Web developers’ handbook is an extensive list of resources which includes lots of CSS links.