5 - HTML Styles

HTML Style Attribute

To make the content beautiful and appealing we would need to apply some styling. Styling can be applied also via CSS which we'll learn in the CSS lessons. However, what we learn here under the style attribute can be applied later on for the CSS.

The style attribute is used as any other attribute to the HTML elements.

<tag style ='property:value;> Content </tag>

The style could have a property such as color and a value or what color.

HTML style attribute exercises background-color:value;

<h1 style="background-color:green; "> Forth pre-defined content</h1>
<hr>
<pre style="background-color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin 
pharetra urna nec porta porttitor. Integer lobortis mattis iaculis. Suspendisse nec fringilla ex. Curabitur urna erat, 
ullamcorper non nisl ac, varius egestas tortor. Donec in orci

sapien. Proin interdum libero risus, nec ornare eros mattis nec. Quisque sed tristique est, nec molestie diam. 
Fusce in velit vel turpis faucibus accumsan nec non neque. Curabitur ac consequat diam. Donec et mauris quis est 
lobortis feugiat

quis nec leo. Integer vulputate, mauris molestie lobortis posuere, augue nunc vestibulum mauris, nec 
vehicula quam enim nec mi. Pellentesque pretium volutpat dolor nec tempus. Proin imperdiet velit ut nisl egestas 
egestas. Fusce at lorem efficitur,

eleifend diam et, maximus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.</pre>

 



 



The change is visible already. You can use any colors to play around in your concept

We can also change the font of the text too by simply adding another property to the style attribute. Let's make the font to Ariel for the heading and Verdana for the <pre> element.



 



 

We can also change the font size of the text by simply adding another property to the style attribute. Let's make the font size for the heading to 300% increase and for the <pre> element 200%

HTML style font-size:300%; attribute;exercise

 



 

We can notice the change at this point. The font of the heading increased and the font for the <pre> element also increased.

We can also align the text by simply adding another property to the style attribute. Let's make the alignment to the center.



 



We can notice the change at this point. The text was aligned or was centered.

At this point, I truly hope that you see where this is all going and what we can do by simply learning the specifics of the HTML markup language. We can really build nice web pages. The style attribute can be applied to any HTML element. This way we can change the appearance of the web page.

Examples

body, div section, heading, paragraph etc We learned about the following style attributes background-color color font-family font-size text-align