An Introduction to XHTML and CSS
XHTML
For starters, XHTML stands for eXtensible Hypertext Markup Language and it is an XML compliant version of HTML. There are two types of XHTML: transitional and strict. Though transitional is more forgiving and closer to HTML, the differences between the two are not great, so it's worth trying your hand at the strict version, even if you're a beginner at making web pages. (In fact, you might have an easier time if you've never used HTML since you don't have to break old habits!)
Some of the more important changes from HTML to XHTML are:
- all tags must be closed. so if you have a <p> then you need a </p>. some tags, like those for images, are "self-closing" and look like this: <img />
- all tags must be properly nested, i.e. if you start a strong tag and then start an emphasis tag, like this <strong> <em>, then you have to close the emphasis before the strong
- most importantly, you should mark your text up semantically, using tags that describe the content, and leave the visual styling to the css. so headings are marked headings and paragraphs are marked paragraphs and if you want a really big font in a paragraph, instead of calling it a heading, you would increase the font-size for the paragraph in the css.
CSS
CSS, or Cascading Style Sheets, partners with XHTML and serves to style the content of the webpage content. In HTML, both the document structure (the paragraphs, headers, etc...) and the styling of the content (the bold, highlights, etc...) were mixed. Now with CSS and XHTML you can separate the two which can make things much easier, for the designer and the viewer. We'll make some changes to this style sheet to see what this means!
css has a particular syntax that it always follows:
selector {property: value;}
but you can link multiples styles in one selector, like this:
selector {property: value; property2: value2; property3: value3;}
css also ignores white space like html, so if you want to make your css easier to read, you can format it like this:
selector {
property: value;
property2: value2;
property3: value3;
}
there are a couple other pieces of css that can come in very handy, the class attribute (identified in the css with a period) and the id attribute (identified in the css by a hash mark). for example, you could put a class on a paragraph in your xhtml like this:
<p class="highlight">
and then in your css, you could highlight that class of paragraph like this:
p.highlight {background-color: papayawhip;}
et voila... there's your highlighted paragraph!
the difference between an id and a class is that you can only use an id once in a page. it is used to identify something unique. most often you will find a <div> with an id tag, maybe something like <div id="navbar"> and <div id="content">
so that the unique sections of the page are easily identifiable. the class tag you can use as many times as you like.
another trick with css is to use a class or an id on an undefined selector, like this:
.highlight {background-color: papayawhip;}
you can see i've removed the p from before the highlight class. now you can use that class on any tag in your html, maybe like this:
- highlighted list item
- unhighlighted list item