CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.


Example
Use of CSS color, font-family and font-size properties:
FONT-FAMILY:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
A new webpage opens as shown below with the selected font-family

FONT-SIZE:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:500%;">This is a heading</h1>
<p style="font-size:100%;">This is a paragraph.</p>
</body>
</html>
A new webpage opens as shown below with the selected font-size

FONT-COLOR:
<!DOCTYPE html>
<head>
<title>
css colors
</title>
<body>
<h1 style="color:hsl(60, 87%, 34%)">Hello</h1>
<p style="color:hsl(0, 100%, 50%)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A earum dicta sunt quos? Corporis officia ad reprehenderit veniam hic! Nisi, magni eum! Repudiandae, veritatis accusantium vel repellendus assumenda animi mollitia?</p>
</body>
</head>
A new webpage opens as shown below with the selected font-colors

No comments:
Post a Comment