HTML Style attribute

HTML Style Attribute

[embedplusvideo height=”360″ width=”640″ editlink=”http://bit.ly/XiUBHz” standard=”http://www.youtube.com/v/UR3-QUTsADg?fs=1″ vars=”ytid=UR3-QUTsADg&width=640&height=360&start=&stop=&rs=w&hd=0&autoplay=1&react=1&chapters=&notes=” id=”ep1968″ /]

HTML Style Attribute

Style is an attribute in HTML

Attributes are nothing but key value pairs that go in the opening tag of an html element.

[code language=”HTML”]<tagname key=“value”>content</tagname>[/code]

In nutshell, style helps you paint HTML elements on the page. It helps you to place it in a specific location, and aids in drawing it on the page as per your aesthetic need.

Using style ,you can change font, background, border, and styles of an element.

Here is an example of how to change background color of a paragraph:

[code language=”HTML”]<p style=“background-color:red;” > blah </p>[/code]

The value of the style in above example is “background-color:red;”. You can split this into two parts; style-name and style-value separated by “:”.

The above line can be abstracted it like this:

[code language=”HTML”]<tagname style=“style-name:style-value; ”> content </tagname>[/code]

You can apply multiple styles to a single element. So let’s say if you want to add background color and font size to a paragraph, you can do following:

[code language=”HTML”]<p style=“background-color:red;font-size:30px;”> blah </p>[/code]

The above line can be abstracted it like this:

[code language=”HTML”]<tagname style=“style1-name:style1-value; style2-name:style2-value;”> content </tagname>[/code]

Inline-styling

When you use style attribute to write style directly into the opening tag it’s called inline-styling.

Issues with inline-styling:

Hard to read

Let’s look at following example where I am adding 5 styles to an element. As you can see it looks cluttered and hard to read.

[code language=”HTML”]<p style=“background-color:red;font-size:30px;font-weight:bold;border-style:solid;”> blah </p>
[/code]

Redundancy

If you have three paragraphs in a document and they all should have the same style. Using inline-styling you have to replicate the style for each paragraph.

[code language=”HTML”]
<p style=“background-color:red;font-size:30px;font-weight:bold;border-style:solid;”> blah 1</p>
<p style=“background-color:red;font-size:30px;font-weight:bold;border-style:solid;”> blah 2</p>
<p style=“background-color:red;font-size:30px;font-weight:bold;border-style:solid;”> blah 3</p>

[/code]

Now imagine the maintenance nightmare when someone asks you to change font size. You would have to change each individual paragraph. The following shows a simple example; let’s say you are writing a huge HTML document where you have 100 paragraphs. Now, imagine creating a style for each one of them.

The solution to this problem is Cascading Style Sheet (CSS)

CSS ( Cascading Style Sheet )

In the above example you have three paragraphs, we are going to remove the style attribute and replace it with class attribute “firstcss”.

[code language=”HTML”]
<p class=“firstcss”> blah 1</p>
<p class=“firstcss”> blah 2</p>
<p class=“firstcss”> blah 3</p>
[/code]

You will have to create another file with the .css extension, there you will use class “firstcss” and give it a style like this:

[code language=”CSS”]

.firstcss {
background-color:red;
font-size:30px;
font-weight:bold;
border-style:solid;
}

[/code]

In the above statement “.” is a class selector hence “.firstcss” means “class firstcss”. Looking at the overall picture, in any HTML file you write your elements with class attributes and in your .css files you give that class style. As a last step you will have add reference to the .css file in the header of your HTML file.

[code language=”HTML”]

<html>
<header>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<header>
<body>
</body>
</html>
[/code]

intro to css3
html and css link reference

You can write CSS directly into the HTML file however, as good practice always create a separate .css file.

In the next tutorial we will learn about various selectors in .css files.

[subscribe2]

Leave a Reply

Your email address will not be published. Required fields are marked *

mycap *