What is the difference between HTML and CSS?

From time to time, we will be featuring questions from our readers and answering their questions about web development. This weeks questions comes from Tammy who is a bit confused about the differences between HTML and CSS and when each of these should be used in a web page.

Let us know if you have a questions about web development and we will get your questions answered.

Today we are going to address Tammy’s question by addressing the basic differences between HTML and CSS. We’ll provide some guidelines about when to use HTML and CSS as well as provide some development guidelines for using each in your web pages.

We will try not to get too basic here and we’ll assume you understand a little bit of HTML and CSS already.

Let’s start with the most basic answer to this question:

• HTML (Hyper-Text Markup Language) is for content and web page structure
• CSS (Cascading Style Sheet) is for presentation and design

Now let’s consider each of these answers in detail. Let’s start with HTML.

HTML defines the basic structure of the page.

• Position and size (width and height) of the web site logo
• Position of the menus
• Position, location and width of a sidebar
• Position, location and width of the content

If you take a look at the structure of this web page, you see we have:

• A header area that defines the Web Site Logo and basic Navigation menu
• A content area with a Heading and the content text
• A sidebar area with a couple of forms, some advertising and a list of tags
• A footer area that contains the copyright information for the site

All of this structure would normally be laid out in our HTML file.

As far as the presentation or design elements, you can see:

• A red background with white text for the header with the content centered on the page
• A white background in the middle area with the content centered on the page that contains,
• The content area in a fixed width area set to the left
• A Sidebar area with a fixed width set off to the right
• A Footer with a red background and white text

There are more style and presentation elements. But these are the basics and they are defined in our CSS file.

Our HTML file might be named index.html and contains the web page content wrapped in HTML tags to define how these items are to be structured. An HTML file is made up of HTML tags that the browser understands so it knows how to treat the information it finds within the tags.

The human eye sees the basics such as text and images which is:

With out any structure or design, it is hard to distinguish the message or the basic message. So we wrap each of the items in some HTML to help a web browser understand what each of these pieces of information relates to like so:

We can then refer to these elements in our CSS file, which might be called style.css.

If want want to style an HTML element, you simply use it’s name without the brackets at the start of a new line and define the attributes of that element between “{” and “}”. So to style the h2 tag to be red text, our CSS file would have the following:

Notice how each attribute here has two parts? The attribute name “color” and the value we wish to assign to that attribute “#ff0000″ (or red) separated by a colon and ending with a semi-colon. This is how the basic structure of a CSS file works.

You might not want every h2 tag to be red, so here you could use a class or an ID to distinguish one h2 tag from all of the others. Notice how we have done this with our DIV tag. A DIV tag is defining a basic box or division in the content. We want to style the Division or Block of text at the top as a page header, so we add an id value to the DIV tag to identify it separately from all other DIVs. We can then style our DIV by referring to it in our CSS file like so:

Notice the “#” market in front of the name we gave to our DIV? This means it is an ID element in the HTML or id=”header”. Anytime you use the ID attribute in an HTML tag, it should only be used once one a HTML page. If you want to use it multiple times, you would NOT call it an ID, but you would call it a CLASS.

We have done this with our Menu listing. Notice how we have assigned a class of “menu” to the UL HTML tag? A class is defined in your CSS file using a “.” like so:

So CSS is presentation or STYLE, and HTML is structure and CONTENT.

Guidelines for Using HTML and CSS

Rule of Thumb: You can use CSS in an HTML file, but you cannot use HTML in a Stylesheet.

HTML always goes in the HTML file. But CSS is a bit more flexible and be located in either the HTML file or in a separate CSS file.

Best SEO practice shows us that separating the CSS command out into their own file is much better. In large projects, it also allows for a web designer, who is more design savvy, to work with presentation, while a HTML coder can concentrate on content and structure.

But there are those times when you wish to see the effects of design changes without having to commit them to a style sheet. So you can incorporate styles in two other ways:

• Using CSS style command between STYLE tages in the HEAD section of an HTML document
• Adding style elements inline with a style=”" element

Here are some examples.

Open up an HTML document and before the closing HEAD tag, add a STYLE section like so:

You can add as many lines as you need between the style tags and style as many elements as you want. This will style elements in exactly the same manner as defining them in a separate style sheet.

To use the inline method, you would do the following:

Using this method of styling will overwrite anything that has been defined in a CSS file. But as mentioned before, this is not a good practice to get into.

Keep your HTML and CSS elements in separate files.

We hope this has been helpful.

If you have a question, feel free to submit a comment and ask your question here. Don’t be afraid, no question is too simple. This is a place to learn and develop. All questions will be treated relevant and worthy of a reply.

Thanks for visiting.