INLINE STYLE SHEET:
<html>
<head>
<title>inline styles</title>
</head>
<body>
<p> this text does not have any style applied to it</p>
<p style="font-size:20pt">this text has the <em>font size</em>style applied to it,making it 20pt</p>
<p style="font-size:20pt;color:#0000ff">this text has the <em>font size</em>and<em>color</em>styles applied to it,making it :20pt and blue</p>
</body>
</html>
EMBEDDED STYLE SHEET:
<html>
<head>
<title>embedded sheets</title>
<style type="text/css">
em {background-color:#8000ff;Color:white}
h1 {font-family:arial,sans-seriff}
p {font-size:14pt}
.special{color:blue}
</style>
</head>
<body>
<h1 class="special">deital&associates,inc.</h1>
<p>deital&associate,inc.is an internationally recognized corporate training & publishing</p>
<h1>clients</h1>
<p class="special">the company's clients include many<em> fortune 1000 companies</em>,government agencies, branches of the military and business organisation</p>
</body>
</html>
CONFLICTING STYLES:
<head>
<title>more styles</title>
<style type="text/css">
a.nodec {text-decoration:none}
a:hover {text-decoration:underline;color:red;background-color:#ccffcc}
li em {color:red;font-weight:bold}
ul {margin-left:75px}
ul ul.{text-decoration:underline;margin-left:15px}
</style>
</head>
<body><h1> shopping list for <em>monday</em>:</h1>
<ul><li>milk</li>
<li>bread<ul>
<li>white bread</li>
<li>rye bread</li>
<li>whole wheat bread</li>
</ul></li>
<li>rice</li>
<li>potato</li>
<li>pizza<em>with mushroom</em></li></ul>
<p><a class="nodec" href="http://www.food.com">go to the grocery store</a></p>
</body>
</html>
LINKING EXTERNAL STYLE SHEET:
<html>
<head>
<title>more styles</title>
<style type="text/css">
a.nodec {text-decoration:none}
a:hover {text-decoration:underline;color:red;background-color:#ccffcc}
li em {color:red;font-weight:bold}
ul {margin-left:75px}
ul ul.{text-decoration:underline;margin-left:15px}
</style>
</head>
<body>
<h1> shopping list for <em>monday</em>:</h1>
<ul>
<li>milk</li>
<li>bread
<ul>
<li>white bread</li>
<li>rye bread</li>
<li>whole wheat bread</li>
</ul>
</li>
<li>rice</li>
<li>potato</li>
<li>pizza<em>with mushroom</em></li>
</ul>
<p><a class="nodec" href="http://www.food.com">
go to the grocery store</a></p>
</body>
</html>
EXTERNAL STYLE SHEETS :
a{text-decoration:name}
a.hover{text-decoration:underline;color:red;background-color:#ccffcc}
li em{color:red;font-weight:bold;background-color:#ffffff}ul{margin-left:2cm}
ul ul{text-decoration:underline;margin-left:5cm
No comments:
Post a Comment