What is CSS?

The CSS or Cascading Style Sheets is a programming language added to HTML to help developers create better looking websites in a simple manner.

CSS was added to the HTML 4.0 to help with the separation of content styling from the content itself. That tremendously helped web designers maintaining larger sites as it was obvious that such a task was almost impossible to do with so many elements needed to be modified, one by one. Now with the external style sheets and a proper selector, it took a second to apply one change to all the pages having declared element inside them.

Basic CSS syntax is made of a selector (which might be an HTML element itself, its id or class attributes, etc...) and a property name with its values. For details regarding the selectors, properties and other terminology refer to adequate sections.

Styles can be easily applied to an XML document as well as to a HTML one. For simplicity reasons in this tutorial we are going to refer to HMTL only.

Example

A typical CSS / HTML combination example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
h2, h3, h4 {
	color:#345;
}
.gray {
	background-color:gray;
}
.teal {
	background-color:teal;
}
.yellow {
	background-color: yellow;
}
</style>
</head>
<body>

<div class="gray">
<h2>H2 title</h2>
<p>All titles are same colors<p>
</div>

<div class="teal">
<h3>H3 title</h3>
<p>Boxes (&lt;div&gt;) are different background</p>
</div>

<div class="yellow">
<h4>H4 title</h4>
<p>Internal CSS<p>
</div>

</body>
</html>

›› go to examples ››

Example

A typical CSS / HTML combination example:

Comments

About

Contact

Get Connected