Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) - Tutorial

Lars Vogel

Version 0.5

07.02.2010

Revision History
Revision 0.1- 0.2	12.04.2007	Lars Vogel
Created Article
Revision 0.3	05.11.2009	Lars Vogel
Added CSS based layout
Revision 0.4	04.02.2010	Lars Vogel
Clean-up
Revision 0.5	07.02.2010	Lars Vogel
added positioning with css

HTML and CSS

This article explains how to use CSS for styling HTML pages.

Table of Contents

1. Cascading Style Sheets (CSS)

2. Usage of CSS

2.1. First example
2.2. Syntax
2.3. HTML div container

3. Positioning HTML elements with CSS

4. CSS based layout

5. Thank you

6. Questions and Discussion

7. Links and Literature

1. Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) and layout to Web documents. This layout information is typically maintained in an external css file. HTML code which should use these files refer to these files in their code.

2. Usage of CSS

2.1. First example

Create the following css file "styles.css".

			

				
/* this is a comment */
/* we style only the h1 element*/

h1 {
	border-style:solid none solid solid;
	color:red;
}

For example this HTML defines that it will use the style sheet "styles.css" which can be found in the same directory.

			

				
<!DOCTYPE html>
<html>
 <head>
  <title>An HTML5 Document</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <h1>Your first HTML5 page</h1>
  <p>This is a <a href="http://www.vogella.de">link</a> to another webpage</p>
  <!-- this is a comment -->
 </body>
</html>

2.2. Syntax

css elements follow the following syntax

 selector { property:value; }

For example this defines the size an color for header tag h1

 h1 { color:red; font-size:48px; }

2.3. HTML div container

HTML allows to define sections via "div" containers. These "div" containers can be used to style parts of the HTML document differently. div can be identified by an id and / or by a class. The following example demonstrate both usages.

Create the file "stylesdiv.css"

			

				
/* this is a comment */
/* we style only the h1 element*/

#number1 {
	color:red;
}

#number2 {
	color:blue;
}

.class1 {
	font-weight: bold;
}

.class2{
	font-weight: normal;
	color: green;
}

Create the following HTML file to use the style sheet.

			

								
<!DOCTYPE html>
<html>
 <head>
  <title>An HTML5 Document</title>
  <link href="stylesdiv.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <div id="number1"> Some Text </div>
  <div id="number2"> Another Text</div>
  <div class="class1"> Styling with classes </div>
  <div class="class2"> Another class </div>
 </body>
</html>

3. Positioning HTML elements with CSS

CSS allows to setup element with fixed, relate and absolute positions. For example the following element has a fixed position and will not move even if you scroll down the HTML page.

			
<!DOCTYPE html>
<html>
 <head>
  <title>An HTML5 Document</title>
  <style type="text/css">
p.position_fixed
{
position:fixed;
top:200px;
right:5px;
}
</style>
 </head>
 <body>
  <h1>HTML5 with CSS positioning</h1>
  <p class="position_fixed"> <a href="http://www.twitter.com/vogella">Follow vogella on twitter</a> </p>
<p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p><p>lots of information here</p>
  
 </body>
</html>

For more examples see CSS positioning .

4. CSS based layout

You can use HTML div container and CSS to layout your webpage.

Your example the following webpage uses div container.

		

			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>This is a tile</title>
<link href="styleslayout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

		

			
<style type ="text/css">

body {
	margin: 0px;
	padding: 0px;
}

#header {
	background: #aba;
	width: 100%;
}

#leftcol {
	background: #aaa;
	float: left;
	width: 20%;
	height: 500px;
}

#rightcol {
	background: #aaa;
	float: right;
	width: 20%;
	height: 500px;
}

#content {
	background: #eee;
	float: left;
	width: 59%;
	height: 500px;
}

#footer {
	background: #aba;
	clear: both;
	width: 100%;
}
</style>

This result in the following layout.

5. Thank you

Thank you for practicing with this tutorial.

Please note that I maintain this website in my private time. If you like the information I'm providing please help me by donating.

6. Questions and Discussion

For questions and discussion around this article please use the www.vogella.de Google Group. Also if you note an error in this article please post the error and if possible the correction to the Group.

I believe the following is a very good guideline for asking questions in general and also for the Google group How To Ask Questions The Smart Way.

7. Links and Literature

http://de.selfhtml.org/ Selfhtml - German