-->

Cascading Style Sheets

skip to content


CSS Basics

Classification of Elements

Block-level Elements

paragraphs, headings, lists, tables, DIVs, and Body. One block level per line, they force a new line.

Inline Elements

A, EM, SPAN,images and form inputs. Do not force a new line.

List Elements

LI.

Link Stylesheet


<link rel="stylesheet" TYPE="text/css" href="demo.css">
 OR
<style type="text/css" media="all">@import "demo.css";</style>
2nd example will be ignored by older browsers that generally dont support CSS(2)

Add a style

<style>
P {font-family:times;color:red;font-weight:bold;}
</style>
<p>text affected</p>

affected text

Add a class

<style>
.red {font-family:times;color:red;font-weight:bold;}
</style>
<span class="blue">text affected</span>
affected text

Add another class

<style>
.box {
	margin:5px;
	padding:5px;
	text-align:center;
	border:#369 1px solid;}
</style>
<div class="box">text affected</div>
text affected

Link styles with Pseudo-classes

<style>
	a.big {color:#000;font-size:22px;}
		a.big:hover {color:red;background:white;}
</style>
<a href="#" class="big">Test Link</a>
Test Link