What’s the Deal with HTML, CSS And WordPress?

In an effort to save time and have better informed clients, I will start writing a different type of posts than the ones you’re used to reading on my blog: I will discuss some of the basic aspects of building and updating a website. I will share some of the best practices that I learned along the way, the ones that I implement on every client project.

Of course there will be room for debate and I will do my best to make the comments section as interactive as possible. I hope you’ll join me there!

I got the idea for today’s post after I received this question from a potential client:

Can you tell me what is the difference between CSS and WordPress? I thought WordPress was for blog applications? What are the benifits of each? CSS I understand is very easy to update, etc.

So instead of writing a really long email, I thought I would write this post and do my best to keep it as non-geek and easy to understand as possible.

What I’m trying to do here is explain what HTML, CSS and WordPress are all about in way that even my mom would understand. So excuse me if the terminology is not always correct!

HTML (Hypertext Markup Language)

This is the language of web pages and it’s what browsers interpret in order to display information on your screen! At its core, an HTML file is nothing more than a text file with a certain structure (I won’t go into the specifics of HTML code editing) and the .html file extension.

Static Websites

In the old days, most websites were static websites built entirely using HTML. Throw in a couple of files, link them together and you have a site. The problem was that if you had 30 products, each with its photo, price and specifications, building and especially updating such a website became very time consuming.

The static website approach is still used for simple websites with just a couple of pages, but it’s usually a service requested only by those who have at least basic knowledge of HTML. People who want to update their website content on a regular basis need a dynamic website.

Dynamic Websites

These websites make use of a content management system (CMS) that allows website editors to edit content without knowing anything about HTML coding. Your knowledge of Microsoft Word should be enough for most situations.

A CMS can be a free solution such as Drupal, Joomla or WordPress (my tool of choice), a commercial solution (usually for large scale or corporate websites) or even a custom built solution.

The CMS is built using a scripting language like PHP and usually makes use of a database. You don’t need to know the details, what you need to understand is that the CMS basically takes the info you input and generates the HTML for you, dynamically.

Dynamic vs. Static Example

So if we take the example of a blog running on WordPress, writing a new post is just a matter of adding the title, text and maybe a few other things and the post page is generated for you. You could publish 100 posts a day if you wanted to and still be home for dinner!

The static approach would have been to actually create 100 HTML files, add everything from title, content, create comment forms (although you would need a database for that as well), add dates and hours (because they are not automatically generated anymore), etc. Like I said: very, very time consuming and pointless process.

To give you an even better idea, imagine how an automated production line compares to manually building something. And if you’re thinking “You know… hand crafted items can be cool”, trust me, in this case manual is not cool!

CSS (Cascading Style Sheets)

I will try a metaphore here: think of HTML as one of those flexible mannequins that you see in clothes stores and think of CSS as the actual clothes. The mannequin seems soulless without clothes on, not to mention creepy! HTML without CSS is also plain text and you might even think of it as being creepy!

It’s the CSS that really makes the content shine! Just take a look at css Zen Garden, a website showcasing user submitted CSS stylesheets, all applied to exactly the same content.

When designed by a professional, a website’s CSS file(s) should provide an easy way to update the website’s look and feel without having to edit too much code (whether it’s HTML, PHP, ASP or some other language).

Here is the official info on HTML and CSS and a good starting point for those who want to learn more.

WordPress as CMS?

While WordPress was initially used for blogging, more and more people started using WordPress as a CMS behind a regular website. You can check out even more examples here and here. Many designers (myself included) wouldn’t even think of using another CMS to power a dynamic website.

Even Automattic (the guys who created WordPress) picked up in this trend and every new version seems to have more and more functionality to support it. Not to mention there are more and more WordPress themes and plugins that simply make a WordPress designer’s life so much easier!

As for the benefits of using WordPress as CMS, four important ones come to mind:

• Cost – It is a free solution, with lots of free themes and plugins. You should really get a custom WordPress theme design if you’re serious about your image, but the cool thing is that you can spend close to nothing for something just to get you started.
• Usability – I tested a lot of CMS solutions in the last few years, but WordPress is definitely the one with the steepest learning curve! It’s no wonder, since they only worked with top-notch designers on the user interface design.
• SEO – It’s a known fact that WordPress websites get indexed much better by Google. Depending on how the theme is built, how the website is set up and what plugins you use, you can have even better results. Another reason to work with a pro!
• Support – WordPress has one of the biggest support communities I know of. Besides the official forum, there are many designers and developers who create themes, write plugins, tutorials, etc. Quality blog posts related to WordPress tips and hacks are published on a daily basis.

In conclusion

WordPress is actualy a CMS running on PHP and MySQL, while CSS deals with the presentation of web pages. I couldn’t say what the difference is between the two, because they can’t be compared.

I could have provided this answer, but that would have been too geek for a lot of people. I realized this now and that’s why I will address other aspects of web design such as Flash or databases in future posts. If you think you might find this info useful, please subscribe to RSS, subscribe by email or follow me on Twitter to see what I’m up to.