5. CSS with formatting
text and links
5A) Create a program with external
style sheet.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel= “stylesheet” href=”mystyle.css”>
</head>
<body>
<h1>This a heading </h1>
<p>This is paragraph</p>
</body>
</html>
>>>CODE: CODE: file name save with mystyle.css for external<<<
body { background-color: lightblue;
}
h1 { color:navy; margin-left: 20px;
}
OUTPUT:
5B) Create and use different
font style and size.
CODE:
<!DOCTYPE html>
<head>
<title> font style and size </title>
<style>
p.normal { font-style: normal;
font-size: 20px;
}
p.italic { font-style: italic;
font-size: 10px;
}
p.thick { font-weight:bold;
font-size: 20px;
}
</style>
<body>
<h1> the font-style and font-size property </h1>
<p class="noraml"> this is a paragraph is normal style and in 20px </p>
<p class="italic"> this is a paragraph in italic style and in 10px </p>
<p class="thick"> this is a paragraph </p>
</body>
</html>
OUTPUT:
5C) Creating styles for nested tag.
CODE:
<html>
<head>
<style>
p a { color:red;}
table tr th { background-color:beigh;}
</style>
</head>
<body>
<p> this is a <a href="https://abc.org/">link </a> within a paragraph element.</p>
<table style ="width:100">
<tr>
<th>name </th>
<th>age </th>
</tr>
<tr>
<td>ram</td>
<td>50</td>
</tr>
<tr>
<td>rohan</td>
<td>17 </td>
</table>
</body>
OUTPUT:
