Examples of Cascading Style Sheets

Using classes in CSS

Using classes in CSS we can apply different styles to paragraphs of text:

Some text in italic.

a + fu(m) = ps(x)

This text is centered by CSS

HTML code: In head section:

<style type = "text/CSS">
<!--
	P.tekstA { font-style: italic; margin-left: 0.5}
	P.symbolA { font-family: Symbol; text-align:center}
	P.centred { text-align: center; margin-left:0.5 cm; margin-right:0.5 cm}
-->
</style>

In body section:

<P class = tekstA>Some text in italic. </p>
<P class = symbolA>a + fu(m) = ps(x)</p>
<p class = centred>This text is centered by CSS</p>

We can do the same by using IDs as classes:

This header is in red.

Text in this paragraph will be blue.

HTML code: In head section:

<style type = "text/CSS">
<!--
#blue { color: blue}
H3#red { color: red}
-->
</style>

In body section we use IDs:

<h3 id = red>This header is in red.</h3>
<p id = blue>Text in this paragraph will be blue.</p>

Back

Back to main page