CSS in your web design
Monday, January 4th, 2010
CSS, short for Cascading Style Sheets, is a method of web design that allows the web designer to control the display of the site from a single file included into each page. Cascading Style Sheets separate the style of a page such as layout, colour and fonts from the content of the page such as text and images.
A style sheet is a file, much like an HTML file. Style sheets can be opened and edited or created in any text editor (we use Scintilla Text Editor because it has syntax highlighting for many languages).
Using CSS you can implement changes across your entire site quickly from the one CSS file. You can update colours and fonts, positioning, etc easily from this one CSS file. This change will cascade across every page on the site. The CSS file can be referenced by each html file on the site.
Using CSS you can alter the appearance of any HTML element on your page. This is very useful to change their default look. For instance, the <h1> tag displays huge, black, “ugly” text. However, due to the importance of the <h1> tag for SEO purposes, you really don’t want to abandon them completely. Using CSS you can alter completely the appearance of the <h1> (or any other) tag.
Table-less design is used to control page layout without using HTML tables. Rather, the “tables”, ie, positioning and text are controlled using CSS. This has many advantage, some are listed below.
Advantages of CSS
CSS has far more style attributes than HTML.
Your sites content to code ratio is maximised. By removing the style info and placing it in a separate file, the content to code ration is maximised which has great advantages from a SEO point of view.
Your pages may load faster. Many web browsers (depending on user settings) cache content (store local copies on your hard drive). This means that once the style sheet is cached, your web browser may use the local copy for subsequent page views. This saves time and bandwidth.
Change display based on the media: There flexibility in presenting the content. You can use a style sheet for different media. So, If the user is browsing on a mobile device with a smaller screen you could display content differently. Similarly, if a user wants to print a page, you could use CSS to format the page for a printer. This might include removing navigation bars, etc
Disadvantages of CSS
Not all browsers render Style Sheets equally. Some Style Sheet element may be supported while others not.
There is relief thought; latest versions of browsers are becoming more standards-compliant