This is the web page we created in our XHTML tutorials :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
<h2>Weekly Specials</h2>
<ul>
<li>Memento</li>
<li>The Dark Knight</li>
<li>Avatar</li>
<li>The Last Samurai</li>
<li>Blade Runner</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Embed the style attribute in the <head> element as :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movies Freak</title>
<style type="text/css">
/* CSS rules */
</style>
</head>
Embed these CSS rules within the style element
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
as :
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
</style>
These CSS rules are used to override browser defaults and implement yours .Every time you change CSS code in the HTML file ,
save your file and reload it to see the changes .
Add :
body {
color: #800080;
}
to
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
body {
color: #800080;
}
</style>
#800080 is the color code of purple color .This turns all the text in the body part of html file to blue .This is a hexadecimal notation .
80-hexadecimal value of red .
00-hexadecimal value of green .
80-hexadecimal value of blue .
Applying font-type to the text in body
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
}
The browser tries to implement first Times New Roman ,if this font-type is not available with user system then sans-serif and at last Verdana .Times New Roman is double quoted as it consists of spaces .
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
font-size: 75%;
}
line-height - This property provides space between two consecutive lines .e.g. if you want a distance of half the length of the inline box consisting your line , then ,
line-height: 150%;
font property - All properties that apply to text can be specified in this property such as font-size , font-family font-style, font-variant, font-weight, and line-height .
These two CSS rules are similar .
h2 {
font: italic small-caps bold larger/150% Zapfino, cursive;
}
h2 {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: larger;
line-height: 150%;
font-family: Zapfino, cursive;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
<h2>Weekly Specials</h2>
<ul>
<li>Memento</li>
<li>The Dark Knight</li>
<li>Avatar</li>
<li>The Last Samurai</li>
<li>Blade Runner</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Embed the style attribute in the <head> element as :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Movies Freak</title>
<style type="text/css">
/* CSS rules */
</style>
</head>
Embed these CSS rules within the style element
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
as :
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
</style>
These CSS rules are used to override browser defaults and implement yours .Every time you change CSS code in the HTML file ,
save your file and reload it to see the changes .
Add :
body {
color: #800080;
}
to
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
body {
color: #800080;
}
</style>
#800080 is the color code of purple color .This turns all the text in the body part of html file to blue .This is a hexadecimal notation .
80-hexadecimal value of red .
00-hexadecimal value of green .
80-hexadecimal value of blue .
Applying font-type to the text in body
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
}
The browser tries to implement first Times New Roman ,if this font-type is not available with user system then sans-serif and at last Verdana .Times New Roman is double quoted as it consists of spaces .
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
font-size: 75%;
}
line-height - This property provides space between two consecutive lines .e.g. if you want a distance of half the length of the inline box consisting your line , then ,
line-height: 150%;
font property - All properties that apply to text can be specified in this property such as font-size , font-family font-style, font-variant, font-weight, and line-height .
These two CSS rules are similar .
h2 {
font: italic small-caps bold larger/150% Zapfino, cursive;
}
h2 {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: larger;
line-height: 150%;
font-family: Zapfino, cursive;
}
