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

20 thoughts on “HTML Styles”

  1. Thanks I have just been looking for information about this subject for a long time and yours is the best Ive discovered till now However what in regards to the bottom line Are you certain in regards to the supply

    Reply

  2. Your work has captivated me just as much as it has you. The sketch you’ve created is tasteful, and the material you’ve written is impressive. However, you seem anxious about the prospect of presenting something that could be considered questionable. I believe you’ll be able to rectify this situation in a timely manner.

    Reply

  3. I loved as much as you will receive carried out right here The sketch is tasteful your authored subject matter stylish nonetheless you command get got an edginess over that you wish be delivering the following unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike

    Reply

  12. Tech to Force naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

    Reply

  16. What i do not realize is in fact how you are no longer actually much more wellfavored than you might be right now Youre very intelligent You recognize thus considerably in relation to this topic made me in my view believe it from numerous numerous angles Its like men and women are not fascinated until it is one thing to do with Lady gaga Your own stuffs excellent All the time handle it up

    Reply

Leave a Comment