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 holds 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. There is a colon between text-align and center and at the end of center there is a semi colon. This is how CSS is 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 each command ends with a semi colon and the CSS code is enclosed in quotes within the style attribute.
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 kind of font displayed, in this example it’s in Courier style. However if the viewer does not have the font installed on their computer, they will see the default font their computer uses.
Adding Background Color
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, for example #ff0000 is the color code for red:
The number sign, # must be included in front of the 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.
