XHTML + CSS Basics

[BlackOut]

In this tutorial you will hopefully learn:
>>What CSS is
>>Why CSS is so useful
>>How to code CSS and which part does what
>>How to code CSS into your HTML (XHTML) Document

CSS stands for Cascading Style Sheets, it can and from my point of view should be used in most HTML or XHTML documents.

First of all, some people may be thinking why they should use CSS when they could just use some font tags?
Well CSS can speed up the loadind of your web pages because the CSS file can be placed in an external location, which will be called up just once and then cached (stored) on the user's computer so it does not need to be loading everytime somebody views your page. With CSS you can also position anything you want EXCATLY where you want it on the page, pixel perfect
CSS also saves coding, for example:

<font size="12px" color="#333333"> Texty McTextus </font>
 <font size="9px" color="#cccccc"> Texty McTextus With a hint of more text </font>
<font size "12px" color="#333333"> Texty McTextus with some text </font>

This could be cleaned up by using CSS:


The CSS

.maintext {
font-color:#333333;
font-size:12px;
}

.subtext {
font-color:#cccccc;
font-size:9px;
}

The HTML

<p class=".maintext">Texy McTestus </p>
<p class=".subtext"> Texty McTextus With a hint of more text  </p>
<p class=".maintext"> Texty McTextus with some text </p>

Right lets break all this down...

Lets look at the CSS, here I will show you what each part does.

.maintext { this gives the class a name, it is a class in this case because it has a dot (.) at the beginning. (I will go through classes, ID's and Tags later.) The '{' ends the list of classes,IDs or Tags.

font-color:#333333; This is as simple as it looks, font-color is telling what to modify, and the ':' is the beginning of the information and #333333 is what the modification is, ending with a ; to end the information.

font-size:12px; You should be able to guess this by now using the example above.

} This ends the 'maintext' class.



See if you can work out the 'subtext' class on your own



The HTML is very simple,

<p class=".maintext">Texy McTestus </p> <p opens the paragraph tag, class= is stating which class (CSS Class) to use and '".maintext"' is the class to use. Don't forget the speech marks on the class!


See how simple it is?



Because I am a fan of the more simple designs with more code than images I always use divs and CSS instead of tables, I use Divs instead for many reasons:

* Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content

* Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered

* Tables encourage the use of spacer images to aid with positioning

* CSS generally requires less code than cumbersome tables

* All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads

* With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it.


Why should you use divs and not tables? Well first of all your code will be much cleaner, <div id=#idhere"> </div> is much tidier than loads of table tags and padding etc. you can also change complete sites without touching the html, just by modifying the CSS, a great example of this is CSSZenGarden. They have created some amazing layouts without touching the HTML.

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web.


The main problems with using tables is:

* mixes presentational data in with your content.

* This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.

* Bandwidth ain't free.

* This makes redesigns of existing sites and content extremely labor intensive (and expensive).

* It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.

* Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.


Here comes the trickest bit, still, this is not tricky...
There are 3 different rules you can apply, you can apply a:
>>Class (can apply to any tag)
>>Tag (which changes the look of that tag (everytime it is used ) )
>>ID's + pseudos (I just use ID)

Lets go into more detail; you need to know where to use each type of rule. This depends on your coding style, this is mine, it may be similar to yours or completely different.

I use classes for things such as text, ID's and Tags do not work with text so im forced to use a class.
I use a Tag rule when i want a rule to apply to only a certain tag, for example if i wanted every image's border to be removed i would create this CSS in the header:

img {
border:0;
}

So every image (in an img tag) would have its border removed, this is useful because you onyl need to create the rule and its done, you do not need to apply that to any tags etc.

I mainly use ID's when styling Divs, Not really sure why. Its the way I learnt it and i have never tried classes.


Now you know how to write CSS and apply it to tags go and practice it untill i have finished the full website tutorial
I will update this when its done

And note, i have been doing this for about a week (03/04/2006) and i know all this. That is how simple it is.

hope you learnt something,
xXx--Ben--xXx

Note: Please do not Rip this tutorial, if you wish to use it or any part of it please ask me and then I will give you permission.



UPDATED

[Virtual]

ah XHTML is CSS in HTML?
nice explained

[BlackOut]

Not really, XHTML is XML combined with HTML, it is pretty simliar to HTML just a tad bit harder to code but has many benifits.

[Virtual]

What's XML then?
I mean what's the difference between HTML & XML

[BlackOut]

It stands for Extensible Markup Language, its used for creating special-purpose mark up language that can describe different types of data. In other words its a way of descriving data and an XML file can contain the data too, as in a database.

I don't know XML at all.

HTML stands for HyperText Markup Language, its just a coding language to display anything in a web broswer basically.

[Virtual]

Don't u have to know XML in order to code XHTML...A bit XML knowledge then..

[BlackOut]

nope.

I dont know any XML.

all i knew was the slightest HTML.

within 2days i had created a nice looking template and navigation on my own, i would show you but my host is down. Anyone know any good free hosts?

[BlackOut]

Updated for the different type fo rules...

[toasted]

What the, project.. this is a tut i was planning to release
you got it out before me, I can just say, great job! nice explained

And about XML and that..

To make it easy, XML is kind of the rules for making a language, as XHTML, and XHTML is the actual language that you speak (code). XHTML is HTML rewritten with(for) the XML rules, kinda. And the HTML is a language built with the old 'rules' SGML

XHTML is stricter and more future compatible you dont need to know any XML

[Xiao]

Why color=#"333333" and not color="#333333" ?