What is Cascading Style Sheets (CSS)?




Styling of your site

One of the mantras in having a site is having all pages set up the same way. A part of the site's "personality" is the colors, fonts, etc. being used. Therefore it is an advantage in regards to the user experience of the site, if this is consistent. By having one place with the definition of e.g. the font and font size of the text, you ensure that you have no errors making the pages look odd. Looking at it the other way around, if you decide that e.g. the styling of your headlines has to be changed, the changes will be applied on all pages, without having to open and edit all the pages, by making the changes in the style sheet.

One of the more modern uses is known as adaptive design. Today your pages are shown on a number of devices like smartphones and tablet computers. The layout you have for an ordinary computer screen can be unsuitable for a small screen on a smartphone, which is why you would want another layout for smartphones. Also there can be an advantage in printouts looking different from what is shown on the screen.




What is it?

CSS, for all intents and purposes, is a small file with instructions. For tags you have the attribute STYLE, where you define e.g. colors and size of elements. Instead of writing the same code again and again, e.g. that the header H1 has to be in the font Arial, you write once in the style sheet, that the tag H1 uses Arial. Basically the style sheets don't do anything you can't do with the attribute STYLE, and the syntax is exactly the same, it is solely a matter of making the programming easier and clearer.

The file is placed somewhere on the site, e.g. I use a directory named StyleSheets for most of the sites I make, and at the top of each page on the site, the file is called.

It sounds simple, and it can be, if you only use the tool for simple formatting. Modern CSS, called CSS3, can do far more than this, as several tags and attributes allow conditional programming, i.e. if 1: do this, if 2: do this instead, e.g. to accommodate for different browsers requiring different instructions for doing the same thing at some tags.