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.

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

HTML style attribute exercises background-color:value;

HTML Styles

HTML Styles

 

HTML Styles

 

HTML Style

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.

HTML Style

HTML Style

 

HTML Style

 

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

HTML Style

 

HTML Style

 

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.

HTML Style

 

HTML Style

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

 

Ad: Wordpress blog setup services. Get your Wordpress blog setup in under $100 and in less then 3 days! Click here

Mobile App Creation

Mobile App Creation Service

Ad: Get a mobile app based on your website. Get more visitors. Get into your customer pockets! Click here