|
HTML Tutorials
CSS Introduction
What's the big fuss with CSS?
Let's have a look at Cascading Style Sheets (CSS) and find out why it is so powerful when it is combined with html
 Stylesheets (CSS)
|
Style sheets are used to enhance document content. If you use an external css file then it easier to change a color, font etc. on all of the web pages by changing the value in the the css file.
There are different ways of applying style sheets in a HTML document.
-
Internally on the html page with <style> tags
-
From outside the html document by calling the css file
An example of a styling tags in the head section.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
body{
background-color:green;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1>This an example of CSS</h1>
</body>
</html>
|
This is how it will look in a web browser
|
body css |
background-color:green; |
|
h1 css |
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF; |
Styling using Class
All html 4 tags that display content can accept classes. You can add classes to your stylesheets and call it between the body tags.
An example of a styling tags and a classes in the head section
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<style type="text/css">
body{
background-color:green;
}
.exampleclass
{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1 class="exampleclass" >This an example of CSS</h1>
</body>
</html>
|
This is how it will look in a web browser
Using Identity with Style sheets
In HTML 4 you can also use an attribute called identity which as name can be applied to.
The "id" tag can be used to refernce a style sheet and apply the formatting in between the body tags of your web page.
An example of a styling tags an identity (id)in the head section
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<style type="text/css">
body{
background-color:green;
}
#exampleid
{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0000FF;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1 id="exampleid" >This an example of CSS</h1>
</body>
</html>
|
This is how it will look in a web browser
Working With CSS Colours
|
If you apply colors in html 4 then it is important to have the color number in hexadecimal and a preceding "#" character e.g.
color="#FF00FF"
The six number hex value represents, red-green-blue (RGB) that form the color.
Color names are represented in either hexadecimal numbers or color names. You can specify any color by its hex value or choose from 16 color names.
16 HTML Named Colors And Hex Values
|
Name |
Hexadecimal Value
|
Color
|
|
|
|
|
|
aqua |
#00FFFF |
|
|
black |
#000000 |
|
|
blue |
#0000FF |
|
|
fuchsia |
#FF00FF |
|
|
gray |
#808080 |
|
|
green |
#008000 |
|
|
lime |
#00FF00 |
|
|
maroon |
#800000 |
|
|
navy |
#000080 |
|
|
olive |
#808000 |
|
|
purple |
#800080 |
|
|
red |
#FF0000 |
|
|
silver |
#C0C0C0 |
|
|
teal |
#008080 |
|
|
white |
#FFFFFF |
|
|
yellow |
#FFFF00 |
|
An example of a styling tags in the head section.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css"> body
.body
{
font-family: Arial,sans-serif;
color: #008000;
background-color: #FFFFFF;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1 class="body">This an example of CSS</h1>
</body>
</html>
|
The result will be as follows:
You can also use the color name in the hexadecimal value place which will give the same result:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css"> body
.body
{
font-family: Arial,sans-serif;
color: #green;
background-color: #white;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1 class="body">This an example of CSS</h1>
</body>
</html>
|
CSS And Divident Content (Div) Tags
|
You can group content elements with div in HTML 4 documents.
Div tags can also be very useful for web page layout. Eacsh div block can be set with its very own style rules.
You can also you the class and id attributes to style the div blocks.
Here is an example of implementing some div tags in a HTML 4 document.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
div
{
background-color: yellow;
}
#block1 { position:absolute; top:2px; left:2px; }
#block2 { position:absolute; top:30px; left:10px; }
#block3 { position:absolute; top:70px; left:15px; }
</style>
</head>
<body>
<div id="block1">
<p>This is block 1</p>
</div>
<div id="block2">
<p>This is block 2 </p>
</div>
<div id="block3">
<p>This is block 3 </p>
</div>
</body>
</html>
|
This is how the above code will look in a web browser:
How To Align Text With CSS
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<style type="text/css">
div
{
background-color: yellow;
}
#block1 { text-align:center; }
</style>
</head>
<body>
<div id="block1">
<p>This is block 1 <br />
This is still block 1
</p>
</div>
</body>
</html>
|
This is how it will look in a web browser:
As you can see the text is centered in the between the div tags.
|
