HTML Attributes - TriCker'S HoUse

Attributes

HTML Attributes

Telling Tags What To Do

We can change the way or the styles of the texts which are displaying on the screen by putting some texts in the opening tag. These texts which give styles to our tags are called the attributes. Many of the things that were done with attributes are now done with CSS, so this lesson will show you only that how to put CSS code into tags by the use of the style attribute:

<h1 style="text-align:center;">My Webpage</h1>

The style attribute’s job is to hold CSS code, that’s the stuff in the quotation marks. In the above example it's telling to the h1 tag to center the text on the web page. Notice that there is a “colon(:)” between text-align and center and at the end of center there is a semi colon. This is how CSS commands are structured.

The text in our example can further be changed by adding another CSS command to the style attribute:

<h1 style="text-align:center; color:red;">My Webpage</h1>

Attribute Style

The result would be red text centered on the web page. An unlimited amount of CSS commands can be added to the style attribute as long as they are enclosed between the quotation marks and each command ends with a semi colon this is the syntax of the attributes.

The style attribute can be put in any opening tag to change some aspect of the tag, for instance when used with the body tag, all the text on a web page can be displayed in a different font:

<body style="font-family:arial;">

The font-family command changes the text font, in this example it’s in Arial style. Adding a CSS background command in the body tag changes the page's background color:

<body style="background:red;">

That would give your web page a red background. Colors can be specified by either using the name of the color or its color hex code, for example #ff0000 is the color code for red:

<body style="background:#ff0000;">

The number sign, # must be included in front of the code when specifying colors by their color code, this code is also called as the hex code.

Changing Font Size

Changing the size of text is easy with the CSS font-size command:

<em style="font-size:40px;">I’m bigger</em> than you

The result would look like this:

I'm bigger than you

Size of text is determined by the number, the larger the number the bigger the text, px stands for "pixels. Mostly the font size is given in pixels but sometimes percentage are also used".

CSS commands are usually put in a CSS file called an "external style sheet" but the style attribute is a simple way to use CSS directly in the HTML code until you get to know more about CSS.