Do you want to go back to my home page? okay... use this back button - omg! that's so blue!!!
I am a terrific little h3 tag! Just watch what I can do, I am the head honcho because I am controlled by an inline style (lets just say the inline style is my dominant DNA), yet I have some style from my embedded stylesheet and other style from my linked stylesheet! You might be apt to think I am a multi-tasker because I am so stylish! I am so cool!!! I am superior because I have a mind of my own yet I let my embedded and linked friends think they are important too...(because they are) they are on a more global aspect!!!
Hey, look at me, I am pretty super dooper too...(I am also a h3 tag and I am friends with the h3 tag above). I am controlled by an embedded stylesheet! Pretty NEAT-O wouldn't you say?
Finally, I get to show off what I can do!!! I am a h3 tag controlled not only by the initial embedded stylesheet...but I have my own special linked stylesheet that affects me! The guy above me is affected the same way, just don't tell him, he forgot his font-family and text-transform: uppercase that changed his look after I showed up on the scene!
I am still at the stage I am a little worried about this class...I am trying to be a sponge and absorb all of this material!!! I think I will be fine and at this time I am taking baby steps!
here is what i have done;
- My inline stylesheet: <h3 style="font-family: Trebuchet MS, Arial; font-size: 14pt; color: #695645; border: dotted; background: #D3C9C1;" >
What this means is, I have a h3 tag that will be in Trebuchet MS, unless the computer doesn't have that font, in which case it will default to Arial, the font size will be 14 points, the color will be a lovely shade of brown and the inside of the box will be a lighter shade of that brown. (top paragraph)
- My embedded stylesheet: h3 {font-variant:small-caps; font-size: 18px; color: #3399CC; } --> </style>
What this means is, I have a h3 tag that will be in small caps, with a font size of 18 pixels high, with a color of brilliant blue! So you see now that the embedded style comanded the inline style to declare small caps, it did not change the font or the color of the font because they were declared within the inline style...however...the linked style controls the font for the embedded style, notice I didn't declare a font for the embedded style!
- My linked stylesheet: h3 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-style: italic; line-height: normal; font-weight: bold;
text-transform: uppercase; color: #006600; }
Last of all, lets talk about the last h3 tag in the linked stylesheet. As you can see, the font-family is Arial, Helvetica, san-serif, the font size is 16 points, the font-style states it will become italicized through the document's h3 tags, the line-height is normal and the font-weight is bold, the font-varient is inherit and text transform is uppercase and although we have declared a color, it does not change the inline or embedded font colors.
p { font-family: "Trebuchet MS", Arial; font-size: 11pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: lowercase; color: #339900; }
li { font-size: 10pt; font-style: normal; font-style: normal; line-height: 120%; font-weight: lighter; font-variant: normal; text-transform: none; color: #6699FF; font-family: "Trebuchet MS", Arial; }
- One more thing...I added an embedded style within my li tag that looks like this: <span class="style3"> What this means is </span></li> and within the <li> </li>tag, I did use a <strong></strong> tag to bold certain text (just for fun!) This is where I think you could make it part of the linked .css file, that way you could use this globally across all pages. It seems like it would make more sense!
- Conflicts: the inline style's conflict's are the font-family, font-size and font color; the embedded style's conflict's are: the font-size and font color. What I found interesting is the inline delcared a text-transform: uppercase that looks like it overrode the font-variant:small-caps! hmmm.... The last conflict's are the inline has a font family of Arial, Helvetica, sans-serif, which is recognized by the embedded stylesheet but ignored in the inline stylesheet, a font-size that is ignored by the inline and embedded stylesheets, a font-style, a line-height, a font-weight of italic that affects the inline and embedded stylesheets and a conflicting color that simply is ignored!
That is all for now folks! Hope this helps anyone or everyone if they are confused at all. Hey, maybe I am the only one who gets confused!!! Hey, notice I made the <p></p> tag shows up as lowercase, yes, this was intentional!