Techie Terminology and what it all means…

Select one of the options on the left to find out more about it…

CSS – Cascading Style Sheets

Cascading Style Sheets is an additional language that is used to produce standardised style settings across multiple pages of a website.

When just HTML is used custom style settings have to be repeated every time they are required, resulting in large cumbersome pieces of code. If for example you wanted to change the font used on the site you would need to change it in hundreds if not thousands of places.

Style settings are shared with object’s children, hence the term cascading. Style sheets can be included in a site in three different forms:

Referenced in the head section as a stand-alone file, this is the best way to share styles across multiple pages. Each browser will also contain a default set of style sheet values for certain tags such as headers and paragraphs.
Referenced in the head section with a style tag that will affect only tags in that page.
Within the body section and inside a tag, useful to add bespoke styling to a single element.

The following example shows how the default browser CSS has set different heading font sizes, rules in the head section set colours for the header and paragraph tags, finally the paragraph font has been directly changed to be in italic. As the values cascade the colour settings for the paragraph set in the head section are also used with values set in the body tag.


	<html>

	  <head>

	    <style type="text/css">

	      h1 { color: red; }

	      h2 { color: blue; }

	      p { color: green; }

	    </style>

	  </head>

	  <body>

	    <h1>This is heading 1</h1>

	    <h2>This is heading 2</h2>

	    <p style="font-style: italic;">

	      This is a paragraph.

	    </p>

	  </body>

	</html>