Cascading style sheets are invented and used to separate layout of a web page from its content.

The maintenance of the site and page readability gets much easier when the layout and visual presentation get separated from the content.

Style sheets can be added to a HTML code in three ways:

  • inline styles; added directly as a code to an HTML element via the style attribute
  • internal styles; added to the HTML document's head section as a code inside a <style> element
  • external styles; added to the HTML document head section as external file reached via an URI inside a <link> element

To apply certain styling to more then one HTML page or, i.e., more then one element the best approach is to use external style sheets. By using external style sheets, site's style upgrades (modifications) become incredibly easy.

The markup language for CSS differs from HTML and therefore will not be tutored here but instead all of the above mentioned insertion possibilities will be shown in examples that follow.

The inline styles are somewhat different then the internal or external ones in coding. That is due the fact that they are placed inside of an HTML element through a style attribute. While in the external and internal styles elements are being delimited from the properties by curly brackets {}, inline styles use quotes "".

Typical syntax for inline CSS:

<body style="CSS code"></body>

Typical syntax for internal CSS:

<head><style type="text/css" />CSS code</style></head>

Typical syntax for external CSS:

<head><link rel="stylesheet" type="text/css" href="CSS_code.css" /></head>

Example

Cascading style sheets:

 

›› go to examples ››