Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a mechanism for adding style and layout (e.g. fonts, colors, spacing) 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

Pick a certain directory can create the following file "styles.css".

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

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

In the same directory define this HTML file. This file 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. CSS syntax

CSS defines via selectors certain values for pre-defined properties. This follows the following syntax,

			
selector { property:value; }

For example the following css file defines the size an color for header tag h1. The rest of the HTML file is not affected by this definition.

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

2.3. HTML container via id and class

HTML allows to define sections via "div" containers. These "div" containers can be used to style parts of the HTML document differently. For this purpose you can identify the div containers via id and class attributes.

An id must be unique in the HTML document while the class attribute can be defined for several HTML elements. CSS allows to style these elements via special selectors. div can also be identified by an id and / or by a class and can container other block elements.

The following rule applies:

Table 1. Styling div containers

Definition	CSS selection rule
<div id="myid">Content</div>	#myid {css rules....}
<div class="myclass">Content</div>	.myclass {css rules...}

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>

You can also select by position in the HTML document. For example "td a" only selects links which are within a table row.

You can also use other attributes for example the following will define certain styling for links which have been visited or over which the mouse hovers. The will identify if you have a link already visited or if the mouse hovers over a link and will change the display of the link accordingly.

			
a:visited {color:grey}
a:hover {text-decoraton:underline}

3. Defining size

The most consist way to define size is the unit "em" which is a relative unit to the font-size. 1em is as large as the font-size. You can use 1em for defining the space between words (word-spacing), or letters (letter-spacing) or to define the line height (line-height) of an HTML element. text-indent allows you to define the intent of the first line of a paragraph. text-indent: -1em put the first line a bit before the rest of the text.

4. Alignment and Text transformations

Via text-align you can define how your content (not only text) should be aligned. text-transform allow to transform the text to upper, lower case or to capitalize the first letter.

				
texttransform:uppercase;
texttransform:lowercase;
texttransform:capitalize;

text-align:left;
text-align:right;
text-align:center;
text-align:justify;

5. Margins and padding

You can define margins and paddings for your HTML block element. A block element can be though of as a box which contains something.This box has a border to other elements. Padding defines the inner distance of elements to the end of the box. Margin defines the outer distance of other elements.

			
<!DOCTYPE html>
<html>
 <head>
  <title>Margin, padding test</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
 </head>

 <body>
  <p id="test">Your first HTML5 page</p>
 </body>
</html>

			
#test {
	width: 200px;
	height: 60px;
	padding: 10px;
	border: 5px dotted blue;
	margin: 5px;
}

The total size of the HTML box is defined by the initial size of the box, plus the margins and the padding and a border, if defined.

6. Positioning HTML elements with CSS

CSS allows to setup element with fixed, relate and absolute positions. Relative is the standard and will change the distribution of the different text containers based on the available space.

Frequently you want to make sure that you boxes stay on a specific place. You can use postion:absolute for this. A block element with this style will be removed from the normal flow of the HTML page and will have a fixed space. For example:

			
<!DOCTYPE html>
<html>
<head>
<title>An HTML5 Document</title>
<style type="text/css">
#center {
	position: absolute;
	width: 200px;
	left: 400px;
	background-color: green;
}
#left {
	position: absolute;
	width: 200px;
	background-color: blue;
	top:200px;
}
#right {
	position: absolute;
	background-color: red;
	left: 200px;
	width: 200px;
}
</style>
</head>
<body>
<h1>HTML5 with CSS positioning</h1>
<p id="center">Center fixed box</p>
<p id="left">Left fixed box</p>
<p id="right">Right fixed box</p>

</body>
</html>

If you want to have a element always on a certain position you can use the 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 .

7. 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.

8. Thank you

Please help me to support this article:

9. Questions and Discussion

Before posting questions, please see the vogella FAQ. If you have questions or find an error in this article please use the www.vogella.de Google Group. I have created a short list how to create good questions which might also help you.

10. Links and Literature

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