Friday, September 29, 2023

CSS Colors, Fonts and Sizes

  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.

CSS COLORS
CSS FONT-FAMILY
Font Family(CSS)

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

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...