Using Style Attribute in HTML page
This guide gives basics on styling your html page with the style attribute
What is Style Attribute in HTML
As we know by now that an attribute in html is what adds further information to the html elements. In this case we are going to discuss about the style attribute and from the name itself, a style attribute will help in adding features such as color, font size, font-type and more such features that will enhance the style and aesthetics of the html elements. Let us understand this with some basic examples as shown below.
Adding color to a heading text
We can render some coloring style to an element, in this case, a heading text as shown below by giving the text a purple color. We get this done by writing the style attribute inside the <h1> tag and follow it up with an ‘equal’ sign followed by the color attribute with a colon and then the color of your choice, in this case it is purple and when you mention that color is equal to purple , ensure that they are written within the open and closed quotes as shown below. Please note that you need to write a semi colon after writing the value of the color , that is after writing purple here in the code block you need to type a semi colon in order to finish the style code.
The source code is also available in my code editor where you will be able to see the result of this code , that is, the color of the heading will be rendered in purple , this cannot be reflected in this post, so you need to check out the full view of the code output there.
<h1 style = "color: purple;">HELLO WORLD!</h1>Changing font size of a paragraph text
Here we are going to change the font size of the text in a paragraph using the style attribute as shown below. You can use different font sizes to test your result in the console. Do remember to check the result here.
<p style = "font-size: 36px;">Changing the font size of a paragraph text as shown here.</p>
<p style = "font-size: 50px;">Changing the font size of a paragraph text as shown here.</p>
Conclusion
Here we learnt how to do styling of a html page using the style attribute but remember that this attribute used in the above method is referred to as inline-styling . Inline style is not used as a best practice for long term use when you start using html css and javascript for making professional pages but, as a beginner, you can use this type of styling in making basic documents and pages in html.
For more such knowledge:
