What is CSS?

CSS Explained

CSS was officially launched in 1996 as part of the W3C standardisation of HTML and web languages. With the advent of content management systems like WordPress (which powers this website), a lot of people don’t need to know the code behind the scenes anymore. If, however, you want finer control of your graphics – or more originality – CSS is certainly worth learning.

Basically, CSS allows you to have a separate document to control the appearance of text and images on your browser screen. Before CSS, we had to put all the layout, style and appearance information in the same document as the content – so if you wanted to change all the headings to another colour, you had to change it manually in all the headings on the page. With CSS, we only need to change the heading attribute and all the headings on the page change automatically.

Some common attributes controlled by CSS are:

• colour
• font
• location and position on the page
• border types
• special text effects such as outline and shadow.

CSS3 is now standard amongst all the latest versions of the most popular browsers. Until CSS3 came along, to do any fancy graphics you needed a plug-in program like Flash. The problem with Flash is that search engines can’t read the content – plus, as browsers upgrade, so too do the plug-ins and this means some older versions can’t display content designed for newer versions. But now some very sophisticated graphics effects can be displayed right in your browser, without the need for an external plug-in. This speeds up websites in general, and also allows more versatility to manage the content of websites without disturbing the fancy appearance – and allows SEO bots to read the content of the spinning box or text fading in and out, or moving around the screen.

Some of the cool stuff you can do with CSS3 are:

• Colour gradients without having to load an image
• Cool-looking buttons and backgrounds
• Borders with rounded corners
  • Seems basic but this has only been available recently
• Easy angular text
  • that is, not just horizontal
• Animation
  • controlled by the code, not streamed or downloaded Flash or GIFs
• Fancy text effects
  • glowing text, broken text, disjointed text, opaque text

There are even complete images created purely in CSS, but often require a thousand or more ‘elements’ to be created – these images are manipulations of layers of polygons and arcs. CSS3, in particular, is responsible for a large part of the new slicker look that many webpages have at present and the higher-quality rendering of pages.