So you have HTML down and you can build all these fancy sites that look and work well. You’re ready to move on to XHTML and CSS. Well I hate to say it, but let the learning start all over. Not from the very beginning but somewhat close.
XHTML is a combination of HTML and XML – does that mean you need to learn XML as well? No it doesn’t. Later it might not be bad to learn XML, but it’s not necessary at this point.
XHTML and HTML are similar but they are unique as well. Think about them as twins… while they look similar they are not exactly the same and there are differences that will help you to tell them apart.
If they are similar why use XHTML? It’s a web standard. It prevents “bad code”. Makes the code easier to read (XHTML has to be properly nested). It provides you with some structure. It gets you ready for the future.
Keep in mind with XHTML you should try to do the following:
a. Close all tags
Meaning <p> has to have a </p> to close it. If you have a line break tag you’re going to need to put a /> at the end instead of >…. <br /> (note that there IS a space between the ‘r’ and the ‘/’.
b. Properly nest your tags
<p><span>Test</p></span> is bad form, it should be <p><span>Test</span></p>
c. Make sure the tags and attributes are lowercase
<span class=”test”> and not <SPAN CLASS=”test”> or <span CLASS=”test”>
d. Quote all your attributes!
<span class=”test”> and not <span class=test>
<table width=”500″> and not <table width=500>
Well you can read more about this at the W3 School link a little later in this document.
So where should you start? How do you get moving along on this?
The first thing is to look at the differences between HTML and XHTML. You’ll see that the tags are pretty similar so there’s not a whole lot new that you’ll need to learn there. What you’re going to need to be aware of is that you need to declare a DOCTYPE before the <html> tag in the page. Also “name” attributes are replaced with “id” for the following tags: a, img, map, applet, frame and iframe.
This means <img src=”xxx” name=”test”> in HTML should look like <img src=”xxx” id=”test” /> in XHTML. (Remember that the image tag doesn’t have a “closing tag” so you have to put that ” />” to close the tag in XHTML).
There’s more to learn but since the w3 School does such a great job on this you should really go to their site and look at that.
CSS – Cascading Style Sheets
Well you’re familiar with the XHTML portion but you’re not clear as to what XHTML/CSS has really done for you except to make you learn a slightly varied version of the HTML tags and a few new required XHTML tags.
CSS is a powerful tool for web programmers and can be a great way to reduce the amount of time you’ll need to make changes to your layout.
Think about this:
You have a site with 5 pages and it uses tables to handle the layout, the font tag to handle the color and size of all your fonts and all the pages are relatively short. Well in a matter of a few minutes (or the help of a program to make all the changes) you could update the look of your site, even the layout in about 30 minutes. Of course that means going in to each page and making all the changes. Not too bad.
Now imagine you have a site with 50 or even 500 pages. That time might be 5 or more hours to make the changes.
With CSS… you can change the 5 page site, the 500 page site or even the site with 50000 pages all in one file. The change for the whole site layout, font colors, etc. will only take as long as it takes you to make the change to one CSS file. Just ONE file for ALL the pages on your site.
This assumes that you’re using the same CSS file on all the pages for the site. If you have multiple CSS pages, then you’d need to make changes to all the CSS files that handle what you’re changing. However there should be no need for this as one CSS file can handle all the CSS code for layout and HTML properties.
With CSS there are multiple ways to include it in your XHTML (and HTML) code. You can set your browser up with your own CSS so that sites that don’t use them will show the page how you want it to show. Then there’s external style sheets which are files with the extension .css which will handle all the CSS. You can place a style tag between the head tags to control the CSS. And lastly there’s inline style, which is CSS added right to the actual XHTML/HTML tag (<span style=”font-weight: bold;”>Test</span>).
Keep in mind that there is a cascading order for the above. It goes as follows:
1. Browser default
2. External CSS file
3. Internal style sheet (the one in between the head tags)
4. Inline styles
What this means is that inline styles carry the most weight. They will overwrite internal style sheets, external styles and your browser defaults. Inline styles will overwrite external styles and browser defaults, but not inline styles.
So if your external CSS file has span{ font-size: 1em; } and you put <span style=”font-size: 2em;”>Test</span> the “Test” will be 2 em in size. Keep in mind the size for other span tags will be 1 em unless you change it with another inline style.
Again the W3 School does a great job of explaining this so be sure to check out and read all about CSS from their CSS pages https://www.w3schools.com/css/default.asp) and refer to the link a little further down the line here.
What you should know from all of this
Make sure that you know and are comfortable with the XHTML format and tag and the changes that you need to know. There’s not too much so it shouldn’t be a problem if you knew your HTML before moving on to XHTML.
This area of learning is really all about the CSS. This can be tricky but the W3 School does a good job of getting you started. From there it’s just a matter of learning a little more and playing around with it. You’ll start to pick up on the CSS and how it works through the trial and error process and by reading more about it.
Keep in mind that source code is your friend. Find good sites that use CSS and look at the source code. You’ll probably notice the CSS in the code or search the code for “.css” and see if they are linking a file. If they are get it (view it and/or download it), save the whole web page to your computer and them play around with them. You may need to make a few changes to the link that calls the actual CSS file, but it’s worth it.
You can learn a lot from other people’s code and it can help you learn what’s going on with the CSS and the way the browser handle it.
The one point I want to make is that people seldom comment their CSS – at least that’s what I found to be the place. It’s pretty easy to read and understand so they don’t put comments in. However if you get a hold of some more complex CSS files, you may see things that aren’t “normal” looking. Most likely these are CSS hacks to fix bugs. We’ll talk more about that in the next section.
Okay here are the links… most are for CSS since XHTML is pretty easy to learn. You can learn all the XHTML you want at the W3 School site (listed first). Here come the links:
https://www.w3schools.com/html/html_xhtml.asp – W3 School’s XHTML tutorial.
https://www.w3schools.com/tAGS/default.asp – W3 School’s XHTML tag list.
https://www.w3.org/TR/CSS1/ – W3C CSS Specs – has some of the attributes you can use.
https://www.htmlhelp.com/reference/css/properties.html – Web Design Group CSS Properties (good).
http://www.blooberry.com/indexdot/css/propindex/all.htm – “All CSS properties” listed alphabetically (good).
https://csszengarden.com/ – CSS Zen Garden – great place to see how CSS can handle the layout/design of a page and a GREAT place to get CSS files to look at (you’ll need to save the page and make sure to download or view and save the CSS files by looking at the source code and finding the actual CSS file – some work to do for that, but REALLY worth it to learn from).
https://meyerweb.com/eric/css/ – Eric Meyer’s CSS portion of his website – this guy is a god at CSS and it’s worth an evening a reading and a few months of learning all he has on there.
https://alistapart.com/blog/topic/css/ – A List Apart – the CSS articles (archive) worth marking to go back to for reference and learning. (Also check out their other articles!)