Inline
HTML Code:
<h1>This heading will not be affected</h1>
<p style="color:red; text-align:center;">
This paragraph will be red and center-aligned.
</p>
<p style="color:red; text-align:center; font-size:200%;">
This paragraph will be red, center-aligned, and in a large font-size.
</p>
Result:
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.
Internal
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
p.center {
text-align: center;
/* This is a single-line comment */
color: red;
}
p.large {
font-size: 200%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">
This paragraph will be red, center-aligned, and in a large font-size.
</p>
</body>
</html>
Result:
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.
External
In head add link.
HTML Code:
<head>
<link href="css_files/CSSFile.css" rel="stylesheet" type="text/css" />
</head>
CSSFile.css content:
p.center {
text-align: center;
/* This is a single-line comment */
color: red;
}
p.large {
font-size: 200%;
}
Result:
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red, center-aligned, and in a large font-size.