Dan Luria and Fred Vaughn
Thursday, July 25, 2003
Chapter One | The Big Question: Why Switch?
You've learned HTML, you've played with frames, iframes, maybe sliced up a graphical layout in ImageReady, or something of the like. You're probably using tables for your layout, riddled with <font> tags and who knows what else. Whether or not you're aware of it, these methods of coding are quickly becoming obsolete, and 'behind-the-times.'
Why wait for your coding to catch up with you, rather than just solve the problem now? That's a LOT of what XHTML and CSS do -- keep you from needing to recode hundreds of lines of HTML to change one part of your page. Unknown to most people, tables were never meant to be used for layouts. This element was made with the intention of displaying tabular data. What is tabular data? Tabular data is any sort of information aligned by cells -- a chart, spreadsheet, or anything of the like. For these, you should be using tables, after all, that's what they are there for. About now, you should be wondering what to use instead of tables. The answer is <div>. What is a <div>, anyway? <div> is a block-level element used for positioning.
Block-level means that each one is on a new line, as if there is an invisible break. The other commonly related element is <span> -- an inline element. Inline elements are positioned one next to the other, on the same line. However, <span> is only used as a replacement for <font>. We'll cover this later on, though.
Around now, you're most likely wondering what I'm rambling about, since afterall this is about XHTML and CSS. XHTML Strict (there are three forms: Strict, Transitional, and Frameset. Transitional allows mistakes, Strict makes you adhere to every standard, and Frameset is for frames. (Not iframes!)). What are the differences between XHTML and HTML? XHTML requires a closing on ALL tags. You know your favorite <br> tags? Well now, it's <br/> The "/" at the end makes up for a lack of a closing tag. The same applies for just about ever other element. However, you do not use these in doctypes, but we'll expand upon those later as well.
Another thing XHTML requires is to NOT use capitals. All elements MUST become lowercase. This keeps your code more readable and easy to understand. It also outrules <font>, replacing it with the <span> tag. Remember, <span> for fonts, not positioning! Finally, for this chapter, we'll touch upon the importance of CSS. CSS is short for Cascading StyleSheets. These are (sometimes) external files which contain all of your attributes, like bgcolor, width, height, and much more. The advantage of this is that in your index file, you only need to place one attribute in any element that has properties -- that shortens your code a whole lot. Another benefit is that all your attributes are in a seperate file. Your browser reads the CSS file, but does not load it. That quickens the loading time of your files enough so that your page loads MUCH faster. CSS doesn't sound like much now, but will be invaluable in the future.
Chapter Two | Switching to XHTML and adding a DOCTYPE.
The first step in switching to XHTML has already been mentioned -- closing your tags. Go through your code and make sure that any tags similar to <br> are written as <br/>, et cetera. Next, minimize all of your attributes, so that <BODY BGCOLOR="YELLOW"> becomes <body bgcolor="yellow">. One thing that I did not encompass earlier was tabbing. Tabbing helps make your code easy to read and uncluttered. To tab correctly, for each element within another, it should be on a newline and tabbed. What does that mean? If you have:
...It should become:
<tr>
<td>
Hello!
<br/>
<a href="http://www.tutorialforums.com/">Tutorial Forums</a>
</td>
</tr>
</table>
Most people don't make an <a> tag on three lines due to the fact that it isn't a positioning element. Also, tabs count as one space. No matter the number, if there is a tab, or multiple tabs at the beginning of a line, there will be an extra space. The only place this matters is in graphical layouts. To prevent the spaces from showing, your code should look like:
<img src="img.png"/></td>
NOT:
<img src="img.png"/>
</td>
Now that all the basics are covered, we will move on to doctypes. A doctype tells the page what code you're using. The most common ones are HTML4.01 Transitional/Strict/Frameset, and XHTML1.0 Transitional/Strict/Frameset. An XHTML1.0 Strict doctype looks like:
I will be basing everything from now on on it, since it makes sure you use correct code. Don't worry about framesets -- we'll talk about PHP a little before we go so that you won't need it. Another thing you should do when using this doctype is to make your <html> look like:
This defines an XML Namespace and helps with XHTML and XML compliancy. Lastly, you should add the <meta> tag:
so that your document uses the right character set. (For example, if you had a page in Hebrew, it would have a different charset so that the browser knows to interpret it in Hebrew.)
After making all these changes, go on over to W3.org. W3.org is the homepage for the W3C (World Wide Web Consortium). This organization helps to develop standards for coding, so that anyone anywhere can see your webpage. Go to the HTML Validator and upload or link to your page and click 'Validate.' This will point out any errors or problems that you forgot to fix. This site in invaluable and you should ALWAYS check your webpages with it. Now that this is done with, we can finally progress on to CSS!
Chapter Three | Using CSS in your layouts.
Before we start with CSS, we need to learn how to link to the document. There are three main ways. The most common, and preferred method is the <link> tag. To link to the document, use the following code:
You can have more than one of these tags. The second method is to use @import. @import is CSS's method of including stylesheets. The following is an example:
@import url('styles.css');
</style>
Finally, you can hard-code the CSS into your document. Use:
/* CSS HERE. */
</style>
to use it in your document. This is helpful for when you just want one or two attributes in a small file, or can't transfer more than one file for various reasons. (Though I've yet to find one.) Now that we have it, and you have a styles.css file, we can begin learning how to create it ourselves. Inside the styles.css file, you need no formatting, just the attributes. An example is:
{
/* attributes */
}
To apply this to an element, set it's ID attrbiute to "mystyle". If you're using mystyle more than once, use a class. The syntax looks like this:
{
/* attributes */
}
and then set the element's class attribute to "mystyle". It is important that you use each one respectively, though most browsers ignore mistakes. To note, make sure you don't have id="#mystyle" -- it's id="mystyle"! An attribute looks like:
as opposed to:
The important thing is to remember that there are attributes for almost everything except colspan, rowspan, cols, rows, and a few others. For a reference of the attributes you can use, take a look at the W3schools.com's CSS reference -- it helped me an innumerable number of times - I even saved it to my computer! On an off note, using the syntax /* comment here */ will allow you to add comments. Don't mix it up with HTML -- <!-- comment here --> will NOT work! Now that you've gotten the basics down, we can move on to switching from tables to divs.
Chapter Four | Changing from tables to divs.
Using <div> is the hardest and easiest part of this guide. For now, we'll make believe we have a header and two columns, each with two paragraphs. For the header, just use:
My Site!
</div>
We now have the header box -- and only three lines of code! Use the same code for the next two columns. If you preview your site now, you'll see three rows, not a row and two columns. To make two columns, in the class for them, use:
{
float: left;
width: 49%;
}
This will make them each next to eachother. I'm using 49% is because if its exactly 100% total, it will be on two lines, oddly enough. (Usually due to padding pushing it over.) Now we want to have paragraphs. Instead of making divs inside divs, use <p>. For example:
Paragrpah...
</p>
<p class="paragraph">
Other paragraph...
</p>
To note, you cannot use <div> inside <p>. If you want to change the font, use a <span>. Don't forget that you can set the font properties inside the <div> and <p>! If you seem to have very large <p>'s, use the following CSS code to fix the problem.
{
margin: 0px;
}
The problem was that <p> has a margin -- this removes it. In CSS, if you have just the name of an element for the class name, it will automatically affect all elements like it. If you want it to apply to more than one, use a comma between selectors, like so:
{
background: #fad;
}
Notice the three-digit hex code? In CSS you can use three digits. #fad is the same as #ffaadd -- some neat shorthand that's nice to know. Now that you have the gist down, go practice some!
Chapter Five | Implementing PHP as an alternative to frames/iframes and static pages.
For most people, making a webpage involves hundreds of static pages, or an overused iframe. With PHP, you don't need these. Rather than starting an in-depth discussion about it (much better suited for another tutorial) I'll give you a quick rundown. First, any page with PHP in it needs to be .php, NOT .html or .htm. Wherever your content is, put:
$ext = '.php'; /* This is your file extension. If your files are .txt, change it appropiately. */
$idx = $_GET["id"]; /* For security measures. */
$idx = isset($idx) ? $idx.$ext : 'default'.$ext; /* 'default' is the main page filename. */
if(file_exists($idx))
{
include $idx;
}
else
{
echo 'Could not include '.$idx.'!';
}
?>
Make sure to read the comments and change them appropriately! Now, your links should look like:
Clicking that link will include news.php, simple as that. But anyways, why would you want to use PHP? With PHP, instead of having each page a copy of the last, you make one template, and then make your content on blank files with ONLY the content in them. No <body> or anything, just an occasional <strong> (or <b> for most people) for formatting. This makes changing the layout a breeze, so you don't have to edit 100 files to change a typo!
Chapter Six | CSS Tips and Tricks
These tips are graciously taken from The CSS Tips Thread at Tutorial Forums -- thank you everyone!
1. Use margin: 0px; inside your body selector to have everything flush with the sides of the browser.
2. Use margin: 0px; in your p selector so that they don't take up an ungodly amount of space.
3. Use cursor: default; in your body selector so that your cursor is a pointer even over text.
4. Use the "wildcard" selector (*) to apply something to all elements.
5. Add ! important to anything to make all elements have it regardless of what is specified.
6. Use commas between selectors to apply a certian style to multiple elements, IDs, or classes.
7.
{
visibility: visible;
position: absolute;
z-index: 1;
width: 700px;
height: 360px;
left: 50%;
top: 50%;
margin: -180px 0px 0px -350px;
background-color: #fff;
}
8. Use W3C's CSS Validation Service (http://jigsaw.w3.org/css-validator/validator-uri.html).
9. Use the voice-family property to create a workaround for IE5's faulty implementation of the CSS box model.
10. Use CSS References: CSS1 (http://www.w3.org/TR/REC-CSS1) CSS2 (http://www.w3.org/TR/REC-CSS2)
11. Use "C-style"/CSS comments to organize your stylesheet into three sections (basic elements, IDs, classes). For example:
/* basic elements */
p
{
font-family: Georgia, "Times New Roman", Serif;
font-size: 10pt;
color: #000000;
background-color: #ffffff;
} h1,h2
{
font-family: Georgia, "Times New Roman", Serif;
font-size: 15pt;
color: #000000;
background-color: #ffffff;
font-weight: 900;
}
/* IDs */
#warning
{
font-family: Georgia, "Times New Roman", Serif;
font-size: 20pt;
color: #ff0000;
background-color: #ffff00;
text-align: center;
padding: 5px;
}
#invisible
{
visibility: hidden;
}
/* classes */
.blue-text
{
color: #0000ff;
background-color: #ffffff;
}
.code
{
font-family: Courier, "Courier New", Serif;
font-size: 10pt;
color: #009900;
background-color: #dddddd;
padding: 5px;
}
</style>
Also formatting your code like that (all of the rules UNDER the selector) makes it easier to read, in my opinion. And by using the CSS comments, it's easier to go in and find what you want to edit.
12. Avoid borders and padding when possible.Instead, nest layers:
#border
{
visibility: visible;
position: absolute;
z-index: 1;
width: 100px;
height: 50px;
left: 0px;
top: 0px;
background-color: #000;
}
#main
{
visibility: visible;
position: absolute;
z-index: 1;
width: 96px;
height: 46px;
left: 2px;
top: 2px;
background-color: #fff;
}
</style>
<div id="border">
<div id="main"></div>
</div>
Use your margins often, and span for class:
.indent
{
visibility: visible;
position: absolute;
z-index: 1;
left: 15px;
}
</style>
<div id="texthousing">
<span class="indent">Indent without padding</span>
</div>
These simple rules help avoid the box model issues.
13. There are several methods to combining classes and elements. Like Fred pointed out earlier: Use commas between selectors to apply a certian style to multiple elements, IDs, or classes. Here is my method for anchors:
.link A:LINK, .link A:VISITED
{
text-decoration: none;
font: normal 11px tahoma, Arial, Helvetica, sans-serif;
color: #0165A2;
border: 0px none;
background-color: transparent;
}
.link A:HOVER, .link A:ACTIVE
{
text-decoration: none;
font: normal 10px tahoma, Arial, Helvetica, sans-serif;
color: #F3480F;
margin-left: 4px;
border: 0px none;
background-color: transparent;
}
</style>
14. Always use external stylesheets. You can use two or more <link>'s and @imports!
15. Alternate stylesheets are fun. You can choose them when in Mozilla.
16. Use id="" ( #element{} ) for elements that are only used once, and class="" ( .element{} ) for elements used multiple times. Without any suffix ( element{} ) it will apply to all tags. ( ie: a{} effects <a> )
17. To use styles inside HTML, use the style attribute.
18. The W3C don't much like the inline (although I believe it to be valid) to be mixed with external.
19. Use <span class = "class" instead of <font>.
20. Don't mix <div> and <span>. Use float to position them left and right of each other. If one is 80% and one is 20%, for instance, and one as even 1px of padding, it will go to a new line. Therefore, use 79% and 19% if you can.
21. Use <div> for positioning, <p> for blocks of text (instead of nested divs if possible) and <span> for fonts inside them. Remember, you can specify font attributes withing <div> and <p> classes/ids!
22. Avoid using proprietary code (i.e., Filters) to keep the CSS styles 100% cross-browser compatiable.
23. When defining fonts, always have the last font be a general "family".
For example:
body
{
font-family: Georgia, Verdana, Serif;
}
</style>
24. When using fonts that contain spaces in their name, have them in quotes.
body
{
font-family: Verdana, "Comic Sans MS", Serif;
}
</style>
26. Use:
@media print
{
*
{
color: #000 ! important;
background: #fff ! important;
border-color: #000 ! important;
}
}
</style>
27. Use:
@media print
{
*
{
color: #000 ! important;
background: #fff ! important;
border-color: #000 ! important;
visibility: hidden;
}
#myelement
{
visibility: visible;
}
}
</style>
so that when you print, everything is made invisible (not !important so that we can make some things visible) while the important areas are visible. Useful for hiding un-important areas. You can even make hidden divs visable, making a 'printer' layout without a new template.
28. Use:
*
{
text-decoration: none ! important;
}
</style>
or
a
{
text-decoration: none ! important;
}
</style>
29.
@media screen {} /* for your computer [moniter] */
@media print {} /* for printer and print preview */
@media aural {} /* for speech synthesizers */
@media braille {} /* for braille tactile feedback devices */
@media embossed {} /* for paged braille printers */
@media handheld {} /* for handheld devices (typically small screen,
@media monochrome, limited bandwidth) */
@media projection {} /* for projected presentations, for example
projectors or print to transparencies */
@media tty {} /* for media using a fixed-pitch character grid,
such as teletypes, terminals, or portable devices
with limited display capabilities */
@media tv {} /* for television-type devices (low resolution,
color, limited-scrollability screens, sound available) */
comments taken from the CSS2 Specification . (http://www.w3.org/TR/1998/REC-CSS2-19980512/media.html)
30.
a[href="http://www.tutorialforums.com/"]
{
font-weight: bold;
}
</style>
The selector applied to any <a> element with the attribute href set to "http://www.tutorialforums.com/". Great for emphesizing certain links in a document, or "blacklisting" if you work it right.
And that's are there is now for tricks and tips! More may be added in the future.
Chapter Seven | Credits and Shouts
Although Dan Luria and Fred Vaughn wrote this guide, many other people aided in it's creation. We'd like to thank Tutorial Forums.com and #central on irc.bends.net (The official Tutorial Forums IRC channel) for exposing many of our errors before we published them. We would also like to thank #web on irc.freenode.net for their invaluable knowledge. We would also like to thank everyone that helped us learn what we know now, and note that you aren't forgotten.
We hope this tutorial has helped you to understand XHTML and CSS better. Good luck with creating your site!