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:
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:
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:
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:
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:
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:
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.
