This paragraph is helvetica, purple, size 30, and underlined.
This paragraph is courier, green,
and size 24.
Changing the font appearance is easy to do using CSS.
Note that we have a pair of HTML <style type="text/css">...</style>
tags inside a pair of <head>...</head> tags.
We simply assign a series of one or more selector to have various style properties.
In this example, we declare three classes (font1, font2, font3) that each have different families,
sizes, and colors.
The dot in front of each selector (.font1) is mandatory.
The HTML head, span, and style tags must be closed.
Further, you must use a semi-colon ; to separate each property tag.
.font1 { font-family: helvetica; font-size: 30; color: purple; text-decoration: underline; }
Note that as an alternative, we could have directly assigned each of the three classes to the font tag:
font.font1 { font-family: helvetica; font-size: 30; color: purple; text-decoration: underline; }
We use a pair of <span> ... </span> to effect the style declaration.
We select the specific style that we wish to apply by simply referring to the class in the span tag.
Code:
<html>
<head>
<title>
DevGuru
CSS Example
</title>
<style type="text/css">
.font1 { font-family: helvetica; font-size: 30; color: purple; text-decoration: underline; }
.font2 { font-family: courier; font-size: 24; color: green; }
.font3 { font-family: arial; font-size: 14; color:: #333364; }
</style>
</head>
<body>
<br><br>
<span
class="font1">
This paragraph is helvetica, purple, size 30, and
underlined.
</span>
<br><br>
<span class="font2">
This paragraph is courier, green, and size 24.
</span>
<br><br>
<span class="font3">
Changing the font appearance is easy to do using CSS.
Note that we have a pair of HTML <style type="text/css">...</style>
tags inside a pair of <head>...</head> tags.
We simply assign a series of one or more selector tags to have various style properties.
<br><br>
In this example, we use the HTML font tag as the selector tag.
We declare three classes of font (font1, font2, font3) that each have different families, sizes, and colors.
The dot in front of each selector (.font1) is mandatory.
The HTML head, span, and style tags must be closed.
Further, you must use a semi-colon ; to separate each property tag.
<br><br>
We use a pair of <span> ... </span> to effect the style declaration.
We select the specific style that we wish to apply by simply referring to the class in the span tag.
</span>
</body>
</html>