So, your finally making the jump? After spending your life (or at least a small part of it) with the basic HTML, you've finally decided to step in line with the future of the internet? I must warn you, it will be awhile until you truely master XHTML/CSS, so this tutorial serves as a basic introduction to it. Once you learn the basics, your ready to move on to the fun stuff.
Section One - Document Compatibility
Ok, you have a page. Let's say it looks like the following:
Code:
<html>
<HEAD>
<title>My Site, ph0015</title>
<META name=me content=you>
</head>
<BODY bgcolor=ffffff color=000000>
<font color=ff0000 size=5 face=verdana>w00t!</font>
<p>I can type
<p>I can type again!
</body>
</html>
The above is HTML4.0 compatible code. It may look fine, but after being brainwashe..er, taught XHTML, you will see the dirty underbelly of it. Anyways, first, let's get the header working. For a document to be considered actual XHTML, it must have a file header, called a
doctype by some. Anyways, it goes like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
I know, your saying to yourself right about now, "How am I going to remember that jumble of URL's and code?", now aren't ya? Calm down, until it becomes lodged in your mind, write it down in a template file, so it's ready to go when you start a document. Just create a .txt file, save it, and then load it up when you need to write some code. Even I have to double-check it sometimes, so don't feel bad if you forget. Keep in mind, it isn't optional, unlike HTML4.0, so you must always have that at the top of your document. There is also another declaration you have to stick there, but it seems to interfere with some versions of PHP, and since you can declare it later in another way (see below), I'm not going to include it in this article.
Anyways, we have the header. Time to work on the code. First, we need to add a little to the
html tag, for document purposes:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
As I said above, just save this in your template file, and soon enough you'll get used to it. Anyways, now the real changes begin. First, we need to do the "house cleaning" of the code. This involves adding quotes around all elements, changing all tags to lowercase letters, adding closing tags to tags that don't have them included, and adding slashes to empty elements. Got that? Neither did I. Anyways, let's start with the element quoting. This one is pretty simple. Take the following line:
Code:
<META name=me content=you>
Basically, you just add quotes where quotes go, specifically around all elements of the tag. I think the example will speak for itself:
Code:
<META name="me" content="you">
Got that? Good. While we have this tag up, let's do the other house cleaning "chores" on it. The next one is probably the most self-explanatory: changing all capital letters to lowercase:
Code:
<meta name="me" content="you">
Check another one off on the chores. Anyways, the second to last chore is adding a closing tag to the tag. What I mean by this is, take for example, a
b tag. This makes your text bold, correct? Well, when you write it, you always do the following (I hope):
If you didn't close the tag, the bold would continue on throughout the document, correct? Well, that's basically what they're saying about other elements like that, such as
img and
p. With the
p tag, it has been common place to write it shorthand, without the closing tag:
It's so common place, we even did that in our example document! But, in XHTML, it is incorrect syntax, and will register an error. The correct way to write it is as such:
Simple, eh? Well, no, not really. Certain tags don't have a closing tag. These are refered to as "empty tags", as they lack any content outside of the tag itself. According to XHTML, the following
would work:
Code:
<meta name="me" content="you"></meta>
But this can get repetative, especially since there isn't any content inside to support the tags around it. So, being the creative ones they are, w3, the people who brought us XHTML, CSS, and the Slinky, created the "empty tag closing thingy", but is probably better known as a "shorthand" tag. See for yourself:
Code:
<meta name="me" content="you" />
Can you feel the magic happening? We added a " /" to the end of the tag, which tells the compiler that this tag is self-closing. Also, make sure to include the space before the "/", or else it won't work correctly on some browsers. Finally, a simple note: DO NOT USE SHORTHAND ON NON-EMPTY TAGS! For example...
...may look correct, but in fact it is wrong. Since the
p tag has content (ie: the text inside), when it closes early, the text inside, or rather that would have been inside, is left on it's own, since the
p tag closed early, and it obviously registers an error.
Ok, take a breath. You've got it compatible. Well, sorta. You see, in XHTML, a lot of tags were removed in favor of CSS stylesheets. What, you say? You don't know about CSS? Well, good god, man, let's get to work!
Section Two - Enter Teh CSS
Yes, I know I spelled it "teh". You obviously aren't 1337 enough to know, so I'll leave you in wonder. Seriously, though, let's get back on track. XHTML is fine and dandy, but with CSS, it actually can DO something. Really, Uncle Rie? Yup.
First, let's see what the offending code is:
Code:
<font color="000000" size="5" face="verdana">TEXT</font>
Well, ok, now we know (I did the work for ya...just follow along). The above mentioned was utterly destroyed in XHTML in favor of CSS. Why, you ask? Because CSS was, well, better. It allowed for more formatting, with less space, and was basically an overall greater alternative. So, how do you do the above mentioned in CSS? First off, let's introduce you to the new alternatives:
div and
span Code:
<div><span></span></div>
So, what did I just do? Well...um, nothing, actually.
div and
span were designed as empty tags in themselves. Not to be confused with the other empty tags I mentioned, these empty tags have one thing great about them: they do nothing. Well, almost nothing.
div adds a linebreak at the close of each
div tag, but we'll talk about that later. Anyways, your probably thinking, "What's so great about tags that do nothing?", aren't you? A lot, my friend, a lot. You see, they make perfect containers for CSS code, as the tags do nothing to interfere with the CSS code. I'll cut straight to the chase, and show you some CSS/XHTML code:
Code:
<div style="padding: 10px;">
<span style="color: #000000;
background-color: transparent; font-size: xx-small;
font-weight: bold; font-family: verdana, sans-serif;">
This is the text!
</span></div>
Ok, now that you have recovered from fainting, let's examine it peice by peice:
Before we get into what the stuff inside the
style attribute does, let's learn about the attribute itself. The
style attribute basically switches everything over to CSS code for the current tag your working on. Very handy for ammending tags later on. There is an easier way to do this, but I'll discuss it later.
Code:
<div style="padding: 10px;">
Here we go. Your first chunk of CSS code. Unlike HTML, CSS doesn't use tags to define information. Why, you ask? It doesn't have to! CSS basically tells what to make the document look like, not what goes in it. Don't worry if this still confuses you, you'll get it later. Anyways, basically since the section breaks off the HTML into CSS, you don't need to declare a
style attribute for every CSS format, which is a godsend considering how many their are all together. Let's see how the structure inside CSS works at first, shall we?
Code:
style="format: info;
Basically, for every declaration, you have a format, which is what is being defined, and the info, which is the information on how it needs to
be defined. For example, take the first one in our
div tag:
This tells the page literally "add 10 pixels of space around the current element". Very useful when dealing with layers, which we will learn about later. Anyways, before I should continue, let me explain how CSS works. It uses what is called a "box model", in which everything inside the tag is surrounded by an invisible "box" of sorts. To prove this, just use the following code:
Code:
<div style="border: 1px; border-style: solid solid; border-color: #000000;">INFO</div>
As you will see, the text has a new, rectangle border around it. This basically shows how far the element reaches. However, when dealing with a real-world document, leaving a border on every element is considered bas taste, so just try to imagine the box in your head.
Ok, back to the code. As you saw in the example above, for every element, you seperate it with a semicolon (
, to tell where each format ends and the next begins. Also, leave the semicolon (
in when you put the last format in, even though it doesn't continue with another format. No reason, it just makes things easier when you go back and edit it. That's all.
Code:
<span style="color: #000000; font-size: xx-small;
font-weight: bold; font-family: verdana, sans-serif;">
Ok, now your asking yourself, "why do I need two different empty elements, anyhow?". Well, the thing is,
div tags were designed for layers, which we will cover later, and
span tags were designed for text. Span tags do not have linebreaks when you close them, making them ideal for the above mentioned.
Next, time to see what the above CSS code did:
Code:
color: #000000; background-color: transparent;
Ok, the color element is basically what it says: it determines the color of the text. With CSS, a standard has emerged that you include the background color along with the color, so we just set it to "transparent", so we don't have to deal with this.
Code:
font-size: 8pt; font-weight: bold;
font-family: verdana, sans-serif;
Ok, the next chunk o' fun is pretty much the same, too. When switching from HTML to CSS, old formatting skills come back to haunt you, such as it being "font-family" instead of "face". This is just something you must overcome on your own, as I can't really help you there (well, I could, but I don't feel like coming to your house for electric shock treatments). Anyways, as it says, "font-size" is the size of the text, "font-weight" is the boldness, or "weight", of the text, and "font-family" is the face, or the font itself, of the text. A quick note about the "font-family". Certain elements will have more than one property to them, as in this case. In each, seperate the seperate elements with ", ". This tells the web page to "try the first one, and if it doesn't work, try the next one, and so on until a match is found". If you don't use the ", ", it will think you are trying to write the information in a shorthand mode, and will compile it all. Since you can't have more than one font on some text at once, obviously this generate an error. Anyways, as for the fonts themselves, you'll see I added "sans-serif" to the end of the "font-family". Why did I do this, you ask? In case the Verdana font isn't found, it will look for the next font on the list. In this case, CSS has a "if all else fails" generic font for the situation. Sans-serif will find a font that fits its type, and use it instead. The reason this is useful is because if Verdana isn't found, and you don't have a generic font to take it's place, it will use the system font, which is usually the ugly Times New Roman or something like that. Also, if you want to throw in some more fonts before you use the fail-all, feel free:
Code:
font-family: verdana, arial, courier new, sans-serif;
There are also several other generic fonts, but I won't list them here, due to article restrictions. Anyways, at this point, you have the basic idea of how CSS works, so let's wrap this section up. After all the changes and such, we have turned this:
Code:
<html>
<HEAD>
<title>My Site, ph0015</title>
<META name=me content=you>
</head>
<BODY bgcolor=ffffff color=000000>
<font color=ff0000 size=5 face=verdana>w00t!</font>
<p>I can type
<p>I can type again!
</body>
</html>
into this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>My Site, ph0015</title>
<meta name="me" content="you" />
</head>
<body style="color: #000000; background-color: #ffffff;">
<span style="color: #ff0000; font-size: 10pt;
font-weight: normal; font-family: verdana, arial, sans-serif;">
w00t!
</span>
<p>I can type</p>
<p>I can type again!</p>
</body>
</html>
Impressed yet? You shouldn't be. We still have a little more to go. I suggest grabbing some coffee, a snack, a small gnome, or anything else before going on. Take a nap. Just let the knowledge sink in. Cause we're going to make the code o' so much more effective in the next section.
Section Three - Taking Care Of Business
Ok, now that you've grabbed some coffee and/or a small garden hobbit, let's get back to work. You've got a bit of a small section of a tiny idea of how CSS works, so that means your ready for the big leagues! Um, well, maybe not, but I can't sit here and wait until you do, so lets get it moving.
CSS with the
style element is useful, but gets dirty once you start adding more and more code to a page. Going back and changing the page every time you want such-and-such to look like such-and-such can be a hassle. That's why I now present to you, with great honor, the "id" and "class" elements:
Code:
<div id="thislayer" class="thislayer_two"><span id="sometext" class="more">TEXT</span></div>
Wow, a lot shorter than what we were doing earlier, eh? Well, wrong again. This in itself doesn't do anything but calls a stylesheet format. Say that again, you ask? Well, I just got over my stuttering, so I don't want to wake it up, at least not now (note to those gullible types: that was a joke). Anyways, as you see, there are two "call elements" in each tag. Just like with the
div/
span dilemma, "id"/"class" each have a different purpose. "class" is the do-all call function. It can be used again and again for simple formatting such as "color: #002244;", which I will explain how you get later on. On the other side, "id" is the one-time, one-place identifier, as the name suggests. In case you want ONE box doing something, and just that box, use "id". When you combine them, though, they become multi-functional, which is even greater. Use "id" to layout the basic features of an element, and use "class" to add any extra formatting to it (or vice-versa, if you really need to vary from me). As for naming the "id" and "class" elements, they do have something that defines them. And no, it isn't pre-defined, so you don't have to memorize 700 different "id"/"class" attributes (lucky you). When you want to define whatever the hell you just typed, you'll need to make a stylesheet.
To sum it up, a stylesheet is one large section where ALL your CSS code goes. If you ever worked with javascript, it works in the same way. Instead of defining each and every tag by hand, you do it in the stylesheet.
Code:
<html>
<head>
<style type="text/css">
/* comment */
body { color: #000000; background-color: #ffffff; margin: 0px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#thislayer { border: 0px; padding: 10px; }
.thislayer_two { color: #000000; background-color: transparent; }
#sometext { border: 0px; padding: 10px; }
.more { color: #000000; background-color: transparent; }
</style>
</head>
<body>
<div id="thislayer" class="thislayer_two">
<span id="sometext" class="more">
w00t!
</span>
</div>
</body>
</html> Stumped? You shouldn't be! Basically, you make a
style tag which declares that everything until the end of the style section is CSS code. In a CSS stylsheet, since the document has several different tags and elements being defined at once, you can't just throw it all together in one line. You need to seperate it up into sections, which follow the following format:
Code:
Section { Formatting Information } You already know how the formatting information works, so I won't bother going over that again (thank god). As for the section, it comes in several different types of formatting, so let me do an overview of them:
Tag { } - These are the most basic. They just define what a tag does.
Tag:Subtag { } - These are a little different. They define a non-standard part of a tag, such as hovering links (see above document code for example)
#id { } - Ah, here we are! These define what a "id" attribute does to the tag. Adding the "#" beforehand shows that this is an "id" attribute
.class { } - And here is the "class" attribute. As with the "#id" format, place a "." beforehand shows that this is a "class" attribute
If you don't get it right away, compare it to the stylesheet I posted above, and you'll slowly understand. Also, before I continue, about the following:
As it states, this is a CSS comment. Unlike the HTML comment, CSS comments use a slash and a star in front of them. The only real use of them is for header info, as most people can get through a stylsheet without commenting (though large stylesheets may be the exception).
Ok, you've got a general idea of how to make a stylesheet. Your also sick of my face. Don't worry, we're almost done. Now, I want to show you a time-saver (say "w00t" to make me feel proud). Instead of placing the stylesheet inside every HTML document, you can place it in a seperate document, with a .css extension. When you call a CSS document from an HTML document, place the following in the document
head:
Code:
<head>
<link rel="stylesheet" type="text/css" href="URL" />
</head>
Tada! Just change the
URL to the location of the stylesheet online, or offline if your just testing (ie: "/style/style.css"). Anyways, in the document itself, you just place the formatting itself. No HTML tags. Just pure CSS.
Code:
/* comment */
body { color: #000000; background-color: #ffffff; margin: 0px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#thislayer { border: 0px; padding: 10px; }
.thislayer_two { color: #000000; background-color: transparent; }
#sometext { border: 0px; padding: 10px; }
.more { color: #000000; background-color: transparent; } See? Simple! Well, anyways, that concludes this tutorial. There's still a lot to learn, like what each and every CSS does, what is gone in XHTML from HTML, and what is in store for the future of XHTML/CSS. I suggest checking out w3 (
http://www.w3.org) for information and such on the entire XHTML/CSS structure. Be warned, the documents can get pretty technical, and with the current draft of XHTML2.0 shooting most of this I just said out the window, just stick with XHTML1.1, ok? Well, I guess this is good-bye. We had gotten so used to each other, too (*cries*). Oh well, no hard feelings. Just go out and code!
edit: better line breaks added for code
Linear Mode
