Skip to main content

Cascading Style Sheets (CSS)

Style sheets can be used to tell a browser how to display web pages. The benefit of using style sheets can be best seen when there are a lot of web pages that all have the same formatting, for example, background colour, text style layout, and so on. If a change in formatting is required, there is no need to change every single page, which can be tedious and time consuming; you simply change the style sheet. All the web pages that need the same formatting point to the style sheet, which tells the browser how to display the pages.

CSS are saved with the extension .css. Here is an example showing an HTML web page using the link tag <link> to point to the style sheet:

 
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="sheet1.css" /> 
   </head>
   <body>
      <h1>Hello World</h1>
      <h2>Goodbye World</h2>
   </body>
</html>
 

Below is the content of the style sheet saved as sheet1.css. Note that style sheets have a selector, a property and a value. In the first line of our example, 'body' is a selector, 'background color' is a property and 'yellow' is a value:

 
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
 

Next: Server-side Scripting