February 13th, 2019 
Nilesh Chaurasia HTML Inline Style
It is a technique to change the default look and feel of the HTML element. Actually every browser having some default style of every HTML element, and if you are not providing the CSS to any HTML element browser will use their own style to that element. It means we are providing the css (design specification) in the tag itself. Because we are writing CSS, directly in the tag itself it is referred as HTML Inline Style.
HTML Inline CSS Provided with Style Attribute
HTML Style Attribute is used to specify the HTML Inline CSS in any HTML tag. HTML Style is an attribute, available in almost all the HTML tags. The value of this style attribute is actually CSS design specification.
Example 1 – <p> tag used to display text in HTML web page. The below syntax is used to change the color of text as red with HTML Style Attribute.
<p style="color:red;">This is my paragraph.</p>
By default all most all browser shows paragraph text in the black color. And if you want to display text in other color (like red) than you have to use CSS property (color), any specify different color.
In this example (color:red;) is the value of style attribute, which is actually a CSS property with its specification.
CSS Properties to provide design specification
All the CSS properties can be specified as the value in the style attribute. In the above example we have used (color) CSS property, there are many CSS properties available to change the look and feel of HTML elements. The table below shows the basic CSS properties commonly used to modify the HTML elements.
Basic CSS Properties
| CSS Property | Application | Example |
|---|---|---|
| color | Change the color of text. | color:red; |
| background-color | Change the background color. | background-color:gray; |
| font-size | Change the font size of text. | font-size:14px; |
| text-transform | Change the text case to uppercase. | text-transform: uppercase; |
| letter-spacing | Change the text letter spacing. | letter-spacing: 3px; |
Inline Style Example
HTML Style Attribute can be used to set multiple CSS property in the same HTML element. The below Style Example shows this.
Example 2 – <p> tag having default color as black and background color as white. we can modify both at the same time.
<p style="color:red; background-color:gray;">This is my paragraph.</p>
By default all most all browser shows paragraph text in the black color and white background. With the help of above code you can change the text color to red and background to gray.
Caution: The Inline CSS is easy to specify but it is not recommended, because the maintenance and update of the HTML web page is really difficult.
Styling of Heading Elements with Inline Style
The h1 heading shows in big size and h6 heading shows in the small size text, this is a default behavior in any web browser. we can change this default setting as below.
Example 3 – Modify the h1 and h2 text size default settings by inline style.
<h1 style="font-size:14px;">This is my heading 1.</h1> <h6 style="font-size:28px;">This is my heading 6.</h6>
By default all most all browser shows h1 text in the big. But not in above example, because we have changed the default behavior.
The screenshot above clearly shows the output of code listing of example 3. If you not specify the Inline CSS style the h1 heading text shows in big size and h6 in small size. And finally you can understand how we can change the default look and feel of any HTML element with proper use of CSS style properties.
Note: In place of Inline style, the designer can specify the design specification in the head part of the HTML document with the help of style HTML tag.
Advanced HTML Elements Style Technique
When a browser apply style to a HTML element, it will format the HTML element according to the sequence. First it will read External style sheet, second style specified with the style tag, and finally Inline styles specified in the HTML tag itself.
CSS or design specifications can be added to any HTML elements in 3 different ways.
1. In a External Style Sheet that can be included with the link HTML tag. It is known as External Style Sheet.
2. In the head section of the HTML document with the help of style tag. It is known as Internal Style Sheet.
3. In any HTML tag, design specification can be provided with the help of style attribute. It is known as Inline Style.
Posted in 
Tags: 
