Basic CSS Tutorial
File, Head or Inline?
There are THREE ways to add style to your pages. A separate FILE, a STYLE tag in the head of the page or INLINE styling.None of them are "best" and they each have a purpose. I prefer to have a separate CSS file that covers most of the formatting on all my pages so I can change everything all at once. (Remember I'm lazy, if you put all your CSS on each HTML page, you have to change EVERY page.) For folks who just want to do a few simple things, or if you want one item on a page to be different, inline could be the best way to go.
I have a few websites that have more than one CSS file requested in the head. They're read by the browser in the order listed BUT the browser actually applies formatting as it reads it. So, if my first file calls for a blue background and the second calls for white, you'll end up seeing a white background and, on a very slow connection, you might see it flicker from blue to white. If you look at my Sherman County in Texas or my Woodruff County in Arkansas, you might see some of the flickering as the browser loads the Google fonts, which are actually called from CSS files.
So use a separate CSS file for items that affect ALL your pages.
Use a style tag in the head of page for styling items just on that page.
Use inline styling for a single item on a page.
Whether you want to format a whole page or something on a page (like a special table) differently than everywhere else, you can put the information in the head of your page using the tags
<style> </style>. These tags will go immediately above the closing </head> tag. This particular measurement will add a LOT of blank space inside a table cell.
If you find that you have a cell that needs less blank space than the rest, you can change it "inline". This will change ONLY the cell where you add it.
<td style="padding: 3px;">
| Hello World | My name is Gina and I'm creating a tutorial for folks to learn about CSS. I hope you find it useful. | Click here to learn more. |
Inline styling is also useful if you run across something that needs a little "extra" - perhaps a book title.
<span style="text-decoration: underline;">The Good Wife</span> produces The Good Wife
You can add as many properties as you want when working inline.
<span style="text-decoration: underline; font-weight: bold;">The Good Wife</span> - The Good Wife
You can even mix and match.
<span class="bold" style="text-decoration: underline;">The Good Wife</span> - The Good Wife
If you have a lot of things like book titles, create a class and add the class to each of them.
I think that covers all the basic stuff you need to know. There really isn't much here, it only looks that way because of the horizontal rules, images and my tendency to give long-winded examples.
We haven't changed anything on our sample page.
Previous Next