HTML #7 -Style Attribute Introduction, Uses and How to use

Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about "style" attribute, its uses and also know about the syntax of using it. We will also know about some style Attribute "property:value" pair, which we can use in the style attribute for various purposes. We will cover it through example codes, which will help us to know more about Style attribute. So friends, let's begin..

Introduction to "Style" Attribute

Style means the designing of HTML Elements i.e. providing background, text color, font size, alignment etc. to any Visible HTML Element. It is an attribute, which takes a value in css terms. We will know more about css in the upcoming tutorials. The syntax of using "style" attribute is given below :-

< tagname style ="property:value;" >

Now let's understand the syntax, that which term is what. The "tagname" means the element name whihc you want to design or apply style. Remember as discussed earlier, the attributes always comes in start tag. So here "style" attribute is always used in the start tag. After that the "style" attribute is used, which has a value in "property:value;" pair. Here the "property" means, the property you want to customize through css, and the "value" means the value to be given to the property. The value taken by the "style" attribute can take more than one "property:value;" pair i.e. we can customize many things or apply many style like color, size simultaneously in one line of code. Generally, when using one "property:value" pair, we can use it without semicolon (;) at the value, but when using more than one pair, it is required to use semicolons at the end of all the values of property.

< tagname style ="property:value" > No semicolon....

< tagname style ="property:value; property:value;" > Semicolon...

Now friends, lets know about some of the common css property, which we can use in the style attribute's value.

CSS ATTRIBUTES

1. Background Color :- 

< span style="background-color:blue"> background-color </span>

The background-color property defines the background color of an HTML Element.

2. Text Color :- 

< span style="color:blue"> color </span>

The color property defines the text color of an HTML Element.

3. Font-Family :-

< span style="font-family:courier"> font-family </span>

The font-family property is used for defining font-family for an HTML Element text content.

4. Font-Size :-

< span style="font-size:200%"> font-size </span>

The font-size property is used to change the size of text of an HTML Element.

5. Text-align :-

< span style="text-align:center"> text-align </span>

The 

text-align

CSS property is used to set the horizontal alignment of the text/inside visible content of an HTML Element.
So friends, here, our today's tutorial ends. Hope u enjoyed it. If you have any problem concerning this topic, then ask me in comment box.
Thanks -
Programming Infinity ( Samridh Sharma ).