Namecheap

Domain registration with free Whois privacy

Lesson 4: Attributes

Telling Tags What To Do

We can change the way tags display things on web pages by putting what’s called an "attribute" into an opening tag. Many of the things that were done with attibutes in the early days of HTML are now done with CSS, so this lesson will show you how to put CSS code into tags by the use of the style attribute:

<h1style="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 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>

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.

The style attribute can be put in any opening tag to change some aspect of the web page, 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 (you don’t really want a red web page do you?). Colors can be specified by either the name of the color or its color code, #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.

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

The higher the number the bigger the text, px stands for "pixels".

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.

As we move along in the tutorial you will be introduced to other attributes such as the src attribute which helps a tag put a picture on the web page. So let's head on over to lesson 5.

 

DID YOU KNOW...?
You can register a website address (called a domain in tech talk) even before you have a website. In fact the longer you wait the more difficult it will be to get one that isn't already taken. More Info

DID YOU KNOW...?
There is more to building a website than just making it. It also needs web hosting so that it can be seen on the internet. More Info

Easy Website Builder
Skip the tutorial and build your website or online store without learning any code Tell Me More
html tutorial
This tutorial is available in printable PDF format

Get Your Copy


Disclosure

This webpage contains affiliate links which earn this site a commission should a sale result from a link that has been clicked.