HTML and CSS – huh?

Post two of my new series called Simples, takes a look at HTML and CSS.

These are the primary technologies that make up websites, it’s content and ultimately how it is displayed. I have put the two together as they go hand in hand with each other and although they are seperate entities they should never really be apart. Think of them a bit like Ant & Dec!

Imagine a traditional printed newspaper page. The content is layed out on the paper, and specific styles are given to parts of the content. For example, the headlines normally have the same sized large font, the content is usually smaller and has an equal spacing between lines, images are aligned either to the left or right etc. All of these properties are a style associated with the newspaper.

Web design is no different, this website site has specific styles associated with parts of the content. However rather than creating an image this is acheived by HTML and CSS. When you view a web page you are actually viewing a plain text document that contains html markup. It doesn’t actually contain any images, but instead the required code to link to the images. This markup is then interpreted by a browser and rendered into the image you see.

In short, HTML marks up content in order to describe the web page to your browser, while CSS styles the content of the page.

HTML

I’ll start by explaining HTML. This stands for Hyper Text Markup Language, and is a markup language for creating web pages. It differs from a programming language as it only marks up, or defines content rather then generating or dynamically creating it.

This markup is achieved by a system of tags, which all have specific meanings. To create a webpage multiple tags are used to define content. For example, markup is used to define the main title of this page (and CSS is used to define how it looks, we’ll get onto this later).

A few notes about html markup, or tags:

• The tags are keywords that are wrapped in angled brackets -
• The tags are readable both by humans and computers.
• The tags have an opening and closing tag. Everything in between the tags, takes on the property of the tag. – Hello World
• The tags are saved in a plain text document with an extension of .html. This is also referred to as a web page.
• The tags describe the web page layout to the browser. The browser doesn’t display the tags, but instead interprets the information in between them.

The following example would render a very basic web-page.

Code Example

The page would look like the image below in a browser.

HTML Example

I won’t go into detail about the various HTML tags, as this is goes beyond the scope of this series. If you want to learn more about HTML, take a look at this tutorial.

CSS

Ok, so now that you understand that a webpage isn’t actually an image but instead a text file that contains content marked up with HTML. The next step is to understand how this text is made to look visually appealing. This is the job of CSS or Cascading Style Sheets.

The job of CSS is to define how to display the content between the HTML tags.

In the above example all of the content was black text. With a little bit of CSS we can define how to style the content between the opening tag and the closing tag.

The following code will turn the text red by setting the colour value for the h1 tag to red.

h1{

colour: #FF0000;

}

Again, i’m not going to go into too much detail about the CSS properties. If you want to know more about them, take a look at this.

That’s it – well kind of. The world of web design is a bit more complex than that. You see in an ideal world, all browsers would render pages in the same way – but they don’t and that makes web designers upset, angry and mad.

If you are reading this page using Internet Explorer 6, then please download a better browser such as Safari, FireFox or Chrome