Home
Ronda
Ressources
Cascading Style Sheets Tutorial
 

  Introduction

JAVA
  Menu

  Sockets

  Text Files

CSS
  CSS tutorial

LINUX
  Commands

  
  

One drawback of HTML is that the same HTML code contains both data and its formatting. This makes HTML documents difficult to maintain. Imagine you want to modify the background color of all the pages in your site. If you use only HTML in your pages, you must modify the bgcolor attribute of the body tag in each page. Cascading Style Sheets (CSS) provide a more confortable way for maintaining web pages by separating presentation from content. In addition, it provides richer data presentation facilities.

An example of a style

Here is an example used withing this site:

body { background-color : silver }
div.title { text-align : center; color : black; font-weight : bold; font-size :  200%}
p.ptitle {color : black; font-weight : bold; font-size : 150%}

In this example, the background color of the document is set to "silver". a class of div elements is created. Elements of this class will be centered, of black color, bold and with font size of 200%. Finally, a class of the p elements is created. It is called ptitle. Elements of this class are of black text, bold and of size 150%.

Where to put the styles

  1. Inline Style:
    2. 	<h1 style="color: red; font-size : 200%"> red header </h1>
    In this inline style example we use a style instead of attributes inside the h1 tag.
  2. Internal Style:
    3. 	<head>
	<style type="text/css">
	<!--
	h1 {color: red; font-size : 200%}
	-->
	</style>
	</head>
    Styles can also be put at the top of the file in the head tag as in this example. The comment just after the style tag allows the browsers that don't support CSS to skip these styles.
  3. External Style:
    4. If some styles are used in multiple HTML files, it is more beneficial to put them in an independant file from which the HTML files will read the styles. In this example the file of styles mystyle.css is linked to the current html file. 
    	<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
	</head>

Example

If your browser supports CSS, you may have noticed that all the code fragments in this page are displayed in the same format different from the other text. The style allowing this is the following: 
	div.code {color : black; font-size :  80%; background-color: white; border-style: solid; border-color: black}

We have defined a class "code" for the div tag that is used every time we need to display code.

That is enougth for you to experiment for yourself with other kinds of possibilities. I will redesign the hole site and every time i'll define a new CSS class i will add it in this section. So feel free to check from time to time.