html

HTML Styles

HTML offers a Style attribute to implement different styles e.g. background-color, font, etc. on HTML elements. It utilizes various properties to describe the appearance of any HTML document. We can call the style tag the mini CSS of the HTML document.

This write-up will explain how we can set the style attribute within the HTML elements. To achieve this objective this article will provide multiple examples. So, without a further delay let’s begin!

Syntax

The syntax of the HTML style attributes includes a property and its value as shown in the below snippet:

<starting-element style="property: value;">

In the HTML style attribute, we can set multiple properties for one HTML element such as font style, background color, etc. In such scenarios, we have to insert a semicolon “;” after each property as shown in the following script:

<tarting-element style="property: value; property: value;">

How to add a style to an HTML element

This example will apply a couple of styles on different HTML <p> elements

<html>
<body>
<p>Simple paragraph</p>
<p style="background-color:purple;">Paragraph with background color</p>
<p style="font-size:x-large;">Paragraph with x-large font size</p>
</body>
</html>

The first <p> element didn’t utilize the style attribute so it will display a normal paragraph. However, the second and third paragraphs implanted style attributes for different purposes. As a result, the browser will show the following output:

How to use multiple properties in the style attribute

In the above example, there were three different paragraphs each element has a unique style. Now consider another example that will implement the multiple styles in the same paragraph:

<html>
<body>
<p>Simple paragraph</p>
<p style="background-color:gold;text-align:center;">Paragraph with gold background and center aligned</p>
<p style="font-size:x-large; font-style: italic;">Paragraph with x-large font size and italic style</p>
</body>
</html>

The above code created three <p> elements. The first one is the simple one, the second paragraph utilized the style element with multiple properties to set the gold background color and center-aligned text. The third paragraph also implements the two properties to set the font in extra-large and italic style.

Now, this article will discuss the most frequently utilized style properties as given below:

  • The color property is used to set the text color.
  • The background-color property sets the background color of the HTML element.
  • The font-style property sets the different font styles for an HTML element e.g. italic, bold, etc.
  • The font-family property implements the font for HTML elements like monospace etc.
  • The font-size property in HTML sets the size of any HTML element such as small, 12px, etc.
  • The text-align is used to set the alignment of the text like center, right, etc.

Conclusion

The HTML styles directly affect the apparent look of any HTML document. This write-up explained what is HTML style attribute? How does the style attribute work? What properties it can have? And how significant it is for styling any webpage. This article elaborated these concepts with the help of some examples to provide a clear view.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.