www.SEOClock.co.uk

CSS Design

Posted by Mike Campbell on December 9, 2009  |   No Comments »

CSS stands for Cascading Style Sheets and is a newly adopted method of customising the style, colours and layout of a website. CSS can be used to totally change the way that a site looks while using the same html and also the same text embedded in the page.

Cascading style sheets truly show there power when you are developing a site or application where it needs cross platform compatibility and also be available for users to view on a mobile application like a netbook or mobile handset device

The main principles of CSS is to tell the html within a page how it would like it to be displayed. Conventionally like word. Web pages had simple styles like BOLD, size 1,2,3,4,5. The style sheet which contains the CSS has allowed the size of the webpage to be dramatically reduced and also allow for the styles for the fonts, boarders layout including background images to be held off of the webpage in a external file that is called as the page is loaded and referenced by the html page when then style is required.

The style that is required is called and accessed via a Style tag. These style class tags are defined as follows :

The above would be defining that the paragraph style would load a class called “right”. Within the external style sheet there will be a style defined as: p.right {text-align:right}. The script will look through the external style sheet file and then find the paragraph style that matches “right”. Once found it will use the information to style the output that the user would see on the webpage.

This way of developing and designing websites allows much more flexibility to the sites and the information held on them. It allows the tags to be repeated throughout the html page without having the type of font / size constantly repeated from style to style.

A small style class like is able to have all the following setting

·Font Size

·Font Weight

·Font Colour

·Position

·Alignment

·Line height

·Border

·And many more!

Efficiently using the css can reduce the page size by up 2-300% making the browsing experience for the user faster and more enjoyable. It is a standard now throughout web development that the Cascading style sheet will have a file extension of .css , this is normally found at the top of the html page and the css file can normally be found within the tag. This tells the html parsing engine within the user’s browser to load the style sheet in to memory and to use it when loading and parsing the page as outputted to the users screen.

CSS has revolutionised web development however needs to be planned carefully. As the changes that are made to a single style sheet site will effect the whole of the site. It becomes important to define the sections of the site and break down what styles are required to make sure you group them and down effect othere sections of the site when changing the styles within that section.

Tags: ,