HTML Styles

By | February 21, 2021
HTML Styles

Every browser has a specific engine which parses the HTML document and displays a default style of the page content.

HTML Style Attribute

style is an attribute that can be used along with many HTML tags. With the help of style, we can change the default style of the element by changing their font size, colour, font etc.

Vamware

It is also known as Inline CSS, where we can change the individual element style.

Style syntax

<tagname style="property:value;">

property and value are part of CSS.

Change the background Color

Using the CSS background-color property we can change the background colour of <body> and all the HTML elements that are under body tag.

Example

<body style="background-color:yellow;">

<h1>TechGeekBuzz</h1>
<p>Welcome to TechGeekBuzz.</p>

</body>

This will change the background colour of the page from white to yellow.

Change the Text colour

By default, black is the colour of every text element, but it can be changed using style attribute and color property.

Example

<h1 style="color:red;">This heading is Red</h1>
<p style="color:blue;">The colour of this paragraph is Blue.</p>

Change Text Font

The font of the text can be altered using font-family property.

<h1 style="font-family:calibri;">TechGeekBuzz</h1>
<p style="font-family:batang;">HTML 5 Tutorial </p>

Change Text Size

The size of the text can also be changed using style attribute and font-size property.

<h1 style="font-size:400%;">TechGeekBuzz</h1>
<p style="font-size:200%;">HTML 5 Tutorial </p>

Align Text

The alignment of the text can also be altered using CSS text-align property, we can put text in the centre, left or right.

<h1 style="text-align:center;">TechGeeKBuzz</h1>
<p style="text-align:left;">Welcome to TechGeekBuzz.</p>

Multiple Style properties

Within a single element, we can define multiple style property. For instance, if we want to change the font size and colour of a paragraph tag then we can pass multiple CSS properties in that paragraph tag.

Example

<h1 style="color: red;">TechGeeKBuzz</h1>
<p style=" color:blue; font-family:algerian;"> Welcome to TechGeekBuzz.</p>

Summary

  • style is an attribute, which can work along with many HTML body elements.
  • With style, we can change the style, font, colour, background, etc. of a page.
  • The HTML style attribute is also known as inline CSS.
  • Styling an element will be limited to that element; it won’t affect similar other elements present on the document.
  • style properties and values are part of CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *