CSS for the Newbie - Doing It In Style
(Page 5 of 5 )
One of my great joys in life is getting a song stuck in someone's puny mind, and now, thanks to the great wonders of modern technology, I can do so on a mass scale: we're talking the literally tens of people that will read this article. So behold: every time I think of style sheets I get that eighties song "Puttin' on the Ritz" stuck in my head. Dressed up like a million dolla trooper...trying hard to look like Gary Coopa...supa-dupa.
There are three ways to insert a style sheet. They are as follows:
Externally Yours
If you want to apply a style sheet across multiple pages, you can do so with an external style sheet. Every page must have a link to the style sheet. When you change a part of your style sheet, it changes every page linked to it. For instance, if you initially set all your headers to have red text, and then changed the sheet so that they have black text, all the pages will then be updated so that their headers have black text instead. That's much easier than you having to go and change all of the text one by one.
We use the <link> tag to to point to the style sheet. Note that the link tag is inserted in the head section:
<head>
<link rel=”stylesheet” type=”text/css”
href=”somestyle.css” />
</head>
When the browser sees the link, it goes out to your style sheet, reads it, and applies it to your page.
Internal Affairs
If you want to apply a style to a single page, you are better off using the Internal Style sheet. In this method, you define the styles in the header section of the document, and not in a text editor file (unless you are writing your HTML in the text editor of course). Here is an example:
<head>
<style type=”text/css”>
p {color:blue;font-family:Ariel}
h1 {text-align:center}
</style>
</head>
This will apply the style to every <p> and <h1> in your page.
Inline Style Sheets
You use Inline Style Sheets when you only wish to change a single occurrence of an element, like so:
<h1 style=”color:red;text-align:right”>LOOK I AM A HEADER!</h1>
Well that's it for this tutorial. Be sure to come back next time when we really dig our hands in and begin to do real work with CSS.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
