Cascading Style Sheets (CSS)

TNC use Cascading Style Sheets (CSS) for all new projects. It is the recommended approach for development of a modern website as it produces a fast and efficient website that will be compatable with most platforms and accessable by most users.

What are the benefits of Cascading Style Sheets?

  • Websites developed using cascading style sheets load faster as the file size for each page is smaller. This is a result of one style sheet being applied to all web pages within the web site. The information is downloaded once rather than each time a page is requested.
  • Using style sheets makes the website more accessable as the page code is cleaner and contains less unnecessary markups. This allows text readers to more easily navigate through the content.
  • All things being equal, websites built with style sheets tend to out-perform others on search engines. This is as a result of the cleaner code which makes it easier for the search engines to index the web site content.
  • Updating and managing the site is more efficient as updating the single style sheet will update all instances of the style throughout the whole project.
  • Multiple style sheets can be written for differing platforms (PC, MAC, WebTV etc) to ensure that your website works on the widest range of platforms.

What are Cascading Style Sheets?

The concept behind cascading style sheets is a simple one.

Web sites are developed using hypertext markup language (HTML). This is a language which uses tags inserted around areas of text to mark up those areas as having a particular relevance. A web browser will read the tags and use these to layout the web page

For example, by placing <p> at the begining of a line of text and </p> end the area between the tags is designated as being a paragraph.

<p>This is a paragraph.</p>

A web browsers knows from these tags that a paragraph should be laid out on a line of its own. HTML doesn't allow for advanced styling and this is where Cascading Style Sheets come into their own.

By using Cascading Stlye Sheets you can assign styles to tags. The browser reads the content of the style sheet and lays out the web page according to the style sheet information. So for example the style:

p { text-align: center; }

tells the web browser to align all paragraphs centrally.

Note that the style sheet can be a separate file from the web page.