|
Adding Stylesheets incline simply means adding a style straight into the body of your HTML for example:
| CODE | <HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD
<BODY>
<B STYLE="color: blue, font--family: arial">Welcome!</B>
</BODY>
</HTML
|
Now with this code the drawback is that if you want to use bold text that again is the color blue you have to re-code it to do it. This begins to be a huge pain in the tooshie.. That is where CSS comes into play... CSS IS a text based scripting language and it goes simlar to this..
| CODE |
<STYLE TYPE="text/css">
<!--
H4, b { color: #63639C; font-family: arial }
P1 { text-indent: 3cm; background: silver; font-family: courier }
-->
</STYLE>
|
Now an explanation on this codee. STYLE TYPE="text/css" This tells the browser that style being applied to the text of your html document and specifies the MIME type so that stylesheet code that isn't supported by some browsers can be ignored. <!-- Is a comment tag. This makes the script "browser compatible". Older browsers overlook whatever is within and reads the document as a normal html page. this always ends with -->H4, b { color: #63639C; font-family: arial } All "Heading 4 " and "bold" html tags in the body, will be given the color specified and the fontface arial. Anytime that you use the bold tag, or the H1 tag, this style will be applied. P { text-indent: 3cm; background: silver; font-family: courier } This code tells your browser to indent the text by 3cm, apply a background of silver and make the font "courier" on all text enclosed by any and all <P> or paragraph tags. Now if you want to make certain words different colors or fonts you would use what is called a Class.. Here is the coding for a very basic class.. | CODE |
<STYLE TYPE="text/css">
<!--
b.first { color: green }
b.second { color: purple }
b.third { color: blue }
-->
</STYLE> |
Now in order to use this class you would need some HTML code which would look like the following..
| CODE |
your
<b class="first">HTML</b>
<b class="second">would</b>
be like
<b class="third">this</b>
|
Now of course you would add that code into the body of your html file and it would print out your HTTML would be like this with the different colors being HTML, would and this
Now an even more effective way of using a class is to create it without giving it any html tag to look for...
| CODE |
<STYLE TYPE="text/css">
<!--
.first {color: red }
-->
</STYLE>
|
With this code anything you use class="first" in the code will be the color red. Try it out with this HTML.
| CODE |
<b class="first">HTML</b>
|
Style sheet rules are inherited from Parent to Child
This means whatever other tags are enclosed within the stylesheet, (such as an italics tag for example) will take on the properties of the parent tag.
|
Cascading Style Sheets Inline, Tutorial 1
