Visit these other Tutorials by Flo
CopyrightŠ 2004 Tone By Tone Dot Net
Tandem Tooters 
Arbor Hosting
This incomplete tutorial contains some basic inline style tags that will enable beginners to get started. Unfortunately I can not show you Irv's example pages, because he has either moved or deleted them. These paragraphs below are based on private correspondence with Irv (Trail Walker).
| Common Properties and Values | Left Margins | Precise Positioning | Centering & Line Spacing | Text Color & Highlighting | Marquees | Automatic Text Sizing | Text on Wild Backgrounds |
In future usage, the markup supplied by <font> is supposed to be supplied by using style rules. This is an easily learned, logical way of doing so. The font tag is actually deprecated, that is, obsolescent, in HTML 4.0.
The reason the font tag has been deprecated is that the use of style rules allows much more flexibility. The problems you (Flo) had with the unclosed font tags are related to inheritance, which is a feature of style rules.
[I (Flo) had used <font size="???"> and <font color="#??????"> and then used only one <font&t; closing tag to take care of both. Even though this worked with WebTV and Netscape Navigator 4.6, I should have used two closing tags, just to be safe and proper. A validator pointed out all the missing </font> tags.]
Given the opportunity, I (Irv) will use style rules just to be able to use that feature. The advantages of style rules are just too great to ignore their use. And if one ignores the mumbo jumbo surrounding them, they are very easy to learn and use.
The one disadvantage is that in our world, old classic users have browsers that do not support style rules, the object tag, etc. and I must take these users into account when I design a page. The reason the <center>, <font> and other tags have been deprecated is they simply are no longer needed if style rules are used. There is no danger of deprecated tags ever being not supported by any major browser, though. The billions of existing documents would become lost if they were to do so. You have to search very carefully to find a common tag that is no longer supported. There is a difference between obsolescent and obsolete.
I (Irv) picked up most of what I know about style rules in bits and pieces. I have the Dummies book and the O'Reilly XHtml/Html books, but it can be done in a nutshell.
The easiest way to start is with inline rules. This means just use the style attribute in any tag that is used between the <body> </body> tags.
<P style="color:red"> will make text in that paragraph red. Color is called a PROPERTY. Red is the VALUE. The property and value are separated by a full colon ( : ) You can use as many properties as you want. Separate them from each other with a semi-colon ( ; ) </p>
<P style="color:red;background-color:white"> will make the text red on a white highlighted background.</p>
Common properties followed by their values are:
font-size: xx-small, x-small, small, medium, large, x-large, xx-largeThis is a short list. There are many more. I suggest a good book to learn more of them. That way you also get information about which works with the major browsers. MSNTV is poverty stricken compared to IE or NN, but we still can use many of the properties.
There is nothing strikingly new about style rules. While there are a few new features, it is html make more flexible and useful.
I use linked style sheets on multipage projects. This allows me to set the appearance of many pages with one linked syle sheet that can be changed easily.
The use of style rules in a linked document requires a different layout than inline. If you wish, I can go into that later. Style rules and their uses are truly simple and easy. The complication is that you can use them in many ways and with almost every known tag.
There are many online css tutorials. I suggest avoiding the webtv ones since they are mostly concerned with email signatures and have little to do with real world uses of style rules.
By now everybody has seen script with a background color.
Like This
and written like this:Like This
TEXT
Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah
Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah
TEXT
Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah
TEXT
Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah blah Blah blah blah
Use any per cent you want from the left. You can fine tune by adjusting one percentage point at a time. You can also use pixels. <"margin-left : 100px">
<p style=" margin-right ?%"> does not work for webtv. It will work for PC browsers.
When you center something with style rules, you use text-align:center" - whether it's an image or text: <img style="text-align:center"src="etc">
Odd, but that is the prefered way to use in style rules.
You can nest division tags forever. Just close them all out.
<div align="center">
<div bgcolor="black"width="300">text, images, etc
>/div></div>
This will place your content in a centered black box 300 pixels wide. It's not style rules, just html 4.01.
If you use the <br> tags for spacing, you'll get strange results, caused by the container tags themselves. <p style=""></p> will start a paragraph and switch text to it all by itself. No <br&g; tags needed before or after this.
Other tags have their own little tricks and most will start paragraphs, too. Just part of the fun when considering layout. That sort of thing is why I (Irv) spend a lot of time at the test beds, just to see what sort side effects different tags cause.
One of html's oddities: <table> is not an inline tag and text will not flow around it. HOWEVER: <table align="?"> IS an inline tag and text will flow around it. Adding the align attribute changes the characteristics of the tag. Html itself has quirks of this sort. Style rules just add a few more. If you get a handle on style rules used inline, it is simple to start using them as document level and/or linked rule sheets. When two or three levels of style rules are used, then they have a cascading effect and truly are Cascading Style Sheets from the way they interact. While everything involved is truly simple, the infinite variety of uses at the different levels are quite complex.
I (Irv) suggest inline style rules only because they are the easiest way to learn about properties and values.[And some day I (Flo) will learn how to make Cascading Style Sheets.]
<p style="color: '#ffcc11'; text-align: center">Sample Text</p>
Sample Text
<p style="color: '#ffffff'; background-color: '#0000cc'; text-align: center">Sample Text</p>
Sample Text
<p style="color: '#ffcc11'; background-color: '#ffff00'; text-align: center">Sample Text</p>
Sample Text
An interesting side effect: The portion of this page between the wide blue lines was inside of the <b style="margin-left : 20%"> etc.</b> tags. All the blue lines have a width of 100%, but the one within the margined area extends only from the left margin.
<marquee style="color:'#0000FF';font-size:x-large;font-style:italic" width="400" bgcolor="#FFFFFF">How About That ! ! !</marquee>
Both the div style and the p style extend the background color from left to right margins. The other styles confine the background color to the text.
<div style="color:navy;background-color:gold">Some text here </div&g;
<p style="color:navy;background-color:gold;text-align:center">Some text here</p>
Some text here
<b style="color:navy;background-color:gold;text-align:center">Some text here</b&g;
Some text here<H1 style="color:navy;background-color:gold;text-align:center">Some text here</H1>
<H2 style="color:navy;background-color:gold;text-align:center">Some text here</H2>
<H3 style="color:navy;background-color:gold;text-align:center">Some text here </H3>
<H4 style="color:navy;background-color:gold;text-align:center">Some text here</H4>
<H5 style="color:navy;background-color:gold;text-align:center">Some text here </H5>
<H6 style="color:navy;background-color:gold;text-align:center">Some text here</H6>
<div align="center">
Some text here
Some more here
And a little here
</div></div>
With style format, you can write:
<div style="background-color:black;text-align:center;color:gold"width="300"> and get the same effect.
If desired, any text would have its own style rules and be centered in the box with its own centering rule.
iDoc's Tutorials
A great tute that compares regular HTML tags with their equivalents in style sheets and tells of the advantages of using the style tags.
A note: (via Dudette)
A common HTML error is forgetting the > in a message sent to the browser. Another is using a < character within a piece of text (such as "if your age is < 18"). If you need to include these characters as text (as I did throughout this page), you create them with special codes so that the browser doesn't become confused: & lt; displays <, and & gt; displays >. When you use these special codes, make sure you eliminate the space between the & (ampersand) and the lower case letters, and always add ; (semicolon) at the end.
I am deeply grateful to Irv (Trail Walker) for all his assistance. Without his help, this page would not exist! It was his insistence that inline style rules are very simple and his encouragement that helped me decide I really can learn this stuff. And if I can, so can you!
Visit these other Tutorials by Flo
CopyrightŠ 2004 Tone By Tone Dot Net Tandem Tooters
Arbor Hosting