HTML Style Sheet

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color="red" size="5">Hello, World!</font></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:yellow;font-size:24px;">Hello, World!</p>
</body>
</html>

External Style Sheet


.red{
   color: yellow;
}
.thick{
   font-size:50px;
}
.green{
   color:blue;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>
</body>
</html>

Internal Style Sheet

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.green{
   color: green;
}
.thick{
   font-size:40px;
}
.yellow{
   color:yellow;
}
</style>
</head>
<body>
<p class="green">This is green</p>

<p class="thick">This is thick</p>

<p class="yellow">This is yellow</p>

<p class="thick yellow">This is thick and yellow</p>
</body>
</html>

Internal Style Sheet

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
 

COMMENTS

Leave a Comment