28 December 2008

Knowing CSS

CSS is the acronym for Cascading Style Sheets, and it is a language used to style web pages written in HTML and XHTML. In other words, with CSS stylesheets you can specify the colors, spacing, fonts and other design elements for all or some HTML pages inside a website.

CSS was developed to separate the content of the document (i.e. the information itself) from its presentation. This separation is beneficial both for web publishers and for the end user.

For web publishers, it becomes much easier to create tableless designs and to have a consistent look across different pages. Using just HTML, for example, you would need to specify your fonts, colors and spacing on every single page of your website. Imagine if we were talking about hundreds of pages. It would become time consuming to create all of them with the same design elements, and virtually impossible to make quick layout changes after that.

Using CSS, on the other hand, you would specify all your design elements on the stylesheet (usually called style.css), and the browser would refer to that document when displaying your HTML pages to know what color, fonts and spacing it should use.

As a consequence, it becomes much easier to make design changes, too. You would just need to tweak the CSS stylesheet to change a specific element, say the color of your links or the size of the H1 titles, across all your website pages.

The advantage for the end user, on the other hand, comes from the fact that CSS enables the same page to be displayed in different styles. It becomes possible therefore to have a version of your site for people that will access it on a computer monitor and another version for people that want to print it out.

Now the reader also asked about “why one should edit the CSS.” Well, provided you used a CSS based design, you should edit it whenever you want to make changes on your design. Suppose you have a WordPress blog, and you want to increase the size of your font, or perhaps align your logo slightly to the left.
You would need to log into your control panel, then choose “Design,” then “Theme editor.” and then you would need to edit the style.css file.

That is the stylesheet of your blog, and it controls all the design elements. If your theme was coded properly, it should be easy to understand what code is controlling what element, and within minutes you will be able to navigate around. Sometimes you will need to go with trial and error too, but as long as you keep a backup file, there is nothing wrong with that.

No comments: