A Beginner's Guide To CSS

CSS, or Cascading Style Sheets, is a ‘language’ that website designers use to develop the style, look and feel of layout, text and colours on a website page.

Used properly, CSS can be used to separate design from content, making websites easier to use and ultimately, maintain. It can also help with download times as the CSS is downloaded only once and held in browser cache.

A good (the best?) website development technique is to build your pages using HTML and link this page to what is called an external css file that controls all elements of style on the site. You then link the stylesheets in your <HEAD> like so:

<link rel="stylesheet" href='../style1/css/hobo.css' type="text/css">

What is CSS?

  • CSS means (is an acronym for) ‘Cascading Style Sheets’
  • CSS Styles help define how to display HTML elements in a browser
  • CSS Styles are normally stored in ‘External’ CSS Style Sheets on a site
  • CSS Styles were added to HTML 4.0 by the W3c
  • External Style Sheets can save website designers a lot of time and effort when updating sites – we at Hobo use them
  • Multiple CSS style definitions are designed to ‘cascade’ into one

What Is CSS For?

HTML tags / elements were originally designed to define the content of a document. They were supposed to say “This is a header”, or “This is a less important header “, or “This is a paragraph “, and by using tags like <h1>, <h2>, <p>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Netscape and Internet Explorer continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification. It soon became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) – the non profit, standard setting consortium, responsible for standardizing HTML – created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets, although some, handle them slightly differently, which an be a pain to the website designer!

Cost Effective Website Design With CSS

CSS defines how HTML elements are to be displayed. CSS Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS allows website developers to control the style and layout of multiple web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many website pages as you want. To make a site-wide change, simply change the style, and all elements in the website are updated automatically.

Multiple Styles Will Cascade Into One Style

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order of CSS

CSS styles will “cascade” into a style by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

For a more complete guide to CSS – visit W3C Schools.

UK Government recommendations:

‘Use HTML to structure the document, not style it. Use Cascading Style Sheets to format and style basic elements of a website’

Guidelines for UK Government websites
Illustrated handbook for Web management teams

If you enjoyed this post, please share :)

Written by Shaun Anderson