A Simplified Explanation of XHTML & CSS

A Simplified Explanation of XHTML & CSS

What is XHTML? What is CSS? No, CSS here does not refer to Counter-Strike:Source! ๐Ÿ˜€ CSS was around way before Counter-Strike:Source came along.

In this article, I’ll explain XHTML & CSS in the most simplified way I could.

XHTML

Actual Name: eXtensible HyperText Markup Language

Purpose : Defining the structure of a document.

Explanation : XHTML allows you to define each element of your content, identifying them as headers, links, images, paragraphs and more. The identifiers are called tags, commonly marked between the < and > symbols. Just view the source of this site and see how tags work to deliver web pages.

Example :

hello

CSS

Actual Name: Cascading Style Sheets

Purpose : Defining the presentation of a document.

Explanation : CSS allows you to define how each element of your content is to be presented, in other words – STYLED. For example, what color should your subtitles be? What about the font sizes of the content for each section? What font type to should the browser display? There’s also borders, background, dimensions of content area and much more.

Example :

#header {
	width:889px;
	height:85px;
	margin:auto;	
	text-align:center;
	}

How They Work Together

In each website, is made of 3 elements. CONTENT, XHTML (structure) and CSS (style)

XHTML defines the structure and holds the CONTENT. CSS defines the presentation style, this includes telling how are the structures to behave, how are they to be placed on the site and how the CONTENT should be displayed.

In layman terms, XHTML decide how many rooms and floors are there in the house. CONTENT on the other hand are like furnitures, perhaps a sofa-set in the living room with a nice coffee table and 42″ Plasma TV. CSS decides how things should look in the room, like for example the furniture must be modern, all of it must be black in color and placed at 2-feet apart.

So when the browser loads a web page, it reads the every detail provided by the server – CONTENT, XHTML (structure) and CSS (style). It will then apply all instructions accordingly, and that’s where you get your web pages.

Not Everyone Loves XHTML & CSS

While XHTML and CSS are great, it is unfortunate that there are browsers such as Microsoft’s Internet Explorer (ironically it has to come from a multi-gazillion dollar empire) that fails to adhere to web-standards when it comes to XHTML and CSS interpretation.

Interested to know more? I’ve written an article on this a while back, have fun reading!
Web Browsers VS Web Standards

goldfries rated this product :

2 Comments

  1. can u teach me to do template like this

  2. Author

    I plan to have more tutorials released. Template like this? You’ll have to understand basic HTML and CSS then you’ll see how it can be done. ๐Ÿ™‚

Comments are closed.