HTML Styles

by

In this HTML tutorial, we will learn about HTML Styles. We will also cover different examples related to HTML styles.

HTML Styles

The HTML style attribute is used to add styles to an element, such as colour, font, size, and more.

Code:

In the below code, we have explained basic styling on an HTML page which helps to make our webpage or website attractive for users.

<!DOCTYPE html>
<html>
<body>

<p>Welcome to Pythontpoint</p>
<p style="color:red;">I amPythontpoint in red</p>
<p style="color:blue;">I am Pythontpoint in blue</p>
<p style="font-size:50px;">Lets make Pythontpoint Bigger...!</p>

</body>
</html>

Output:

In the below Output we can see the example of different HTML styles.

HTML Styles
HTML Styles

Check this code in Repository from Github and you can also fork this code.

Github User Name: PythonT-Point

Font Styling in HTML

Font style have three parts:

  • Normal – The text is shown normally
  • Italic – The text is shown in italics
  • Oblique – The text is “leaning” (oblique is very similar to italic, but less supported)

NORMAL FONT

To display text in a normal font in HTML, we can simply use the default font style provided by your web browser. This is done by using the <p> tag, which stands for paragraph. Here’s an example:

Code: In the below code, we have explained basic styling on an HTML page by using Normal Font which helps to make our webpage or website attractive for users.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">I am Phythontpoint.</p>
<p class="light">I am Phythontpoint</p>
<p class="thick">I am Phythontpoint</p>
<p class="thicker">I am Phythontpoint.</p>

</body>
</html>

OUTPUT

In the below Output we can see the example of normal font styles:

Untitled
normal

ITALIC FONT

In the below code, we have explained basic styling on an HTML page by using Italic Font with help of <emp>tag and <i>tag which helps to make our webpage or website attractive for users.

<em> TAG

The “em” in <em> literally stands for emphasis. Browsers will, by default, make italicize text that is wrapped in HTML <em> tags.

<!DOCTYPE html>
<html>
<body>
I am <em>Phythontpoint.</em>

</body>
</html>

OUTPUT

In the below Output we can see the example of Italic font style with the help of <em> tag:

Untitled1
italic

<i> tag

The <i> element is to apply italics to text without implying emphasis. It’s to visually set some text apart from other text without implying that a reader is applying extra weight to those words. Perhaps something like;

<!DOCTYPE html>
<html>
<body>
I am <i>Phythontpoint.</i>lets make phythonpoint bigger.....

</body>
</html>

OUTPUT

In the below Output we can see the example of Italic font style with the help of <i> tag:

Untitled2

Oblique

The oblique is very similar to italic, but less supported

To display text in an oblique font in HTML, you can use the style attribute along with the font-style property set to oblique. Here’s an example:

<!DOCTYPE html>
<html>
<body>
<p style="font-style: oblique; font-family: Arial, sans-serif;">Welcome to pythontpoint.in.</p>
</body>
</html>
oblique
oblique

So, in this HTML tutorial, we have discussed about the HTML Styles and we have also covered different examples related to its implementation. Here is the list of examples that we have covered.

  • HTML Styles
  • Font Styling in HTML
  • NORMAL FONT
  • ITALIC FONT
  • <em> TAG
  • Oblique

Suggestions

Comments are closed.