Infographic: What’s the Difference between HTML vs CSS?

If you’re thinking of building a website its likely you’ve heard the terms “HTML” and “CSS,” but may be wondering how they’re different. They go hand-in-hand in building a webpage, but each serve a very unique purpose.

Quite simply, HTML (Hypertext Markup Language) is used to create the actual content of the page, such as written text, and CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects and background color.

HTML vs CSS Differences

 

html“HTML is a markup language for describing web documents (web pages).” – w3schools

In 1989, Tim Berners-Lee invented the Web with HTML as its publishing language. HTML (Hyper Text Markup Language) was created to help programmers describe the content on a website like <this is a heading>, <this is a paragraph>. HTML uses tags to help you add paragraphs, headers, pictures, bullets and other pieces of structure. Just like you would write something on a word document, HTML helps you write something on a website. (Wiki, w3schools)

 CSS“CSS describes how HTML elements are to be displayed on screen, paper, or in other media.” – w3schools

CSS was first proposed by Hakom Lie and co-created by Bert Bos around 1996. Created to compliment HTML, CSS (Cascading Style Sheets) is what makes a website look and feel amazing. Presentation and ease of use have been some of the qualities CSS has brought to web development. It is more involved with changing a websites style rather than its content. Kind of like changing the font size, font color and positioning on a word document. CSS is in charge of the way the content looks on a page and what else goes on it to compliment that content.  (Wiki, w3schools)

Check out the below infographic for a deeper breakdown on each!

CSS vs HTML infographic

dojo guide

Looking for a Career in Web Development?

Read our quick-start guide to becoming a Developer

  • Includes exclusive insight from a seasoned Web Developer
  • Uncovers the top career misconceptions holding you back
  • Highlights the must-have qualities all employers require
  • 89,615 downloads to date

19 thoughts on “Infographic: What’s the Difference between HTML vs CSS?

  1. Well all over is fantastic articale to understand the basic difference, but i have only question about background image, if we can make a image as background in html then can i also make image as background in css or make some additional changes like effects.. Etc,

  2. The HTML stands for hypertext markup language and the CSS stands for cascading style sheets, which have the different way to use it for the implementing the coding for the developing purpose both the windows activation error part is required it most.

  3. I love the infographic. I am going to show this to my students today. Even 2.5 years after you have written this, it is still one of the best I have seen. You have presented this really well.

  4. Really good read. I think people often see CSS as a simple declarative language that doesn’t require this level of thought

  5. Fantastic article, thanks! It’s nice to have all the theory and some really good examples all in one place, and I like the real-world, down-to-earth writing style — makes it a really enjoyable read.

  6. This is a great article, the methods suggested in here reminded me of what i see when i look at the stylesheets from jquery ui. Definitely something I intend to practice in my web development from now on. Thanks for the lesson.

  7. Good day! I know this is kind of off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be great if you could point me in the direction of a good platform.

  8. Just a little usage admonishment (on this page, ):

    There are two sentences in your narrative that display the word “compliment”:

    1. “Created to compliment HTML, CSS (Cascading Style Sheets) is what makes a website look and feel amazing”; and

    2. “CSS is in charge of the way the content looks on a page and what else goes on it to compliment that content.”

    The word “compliment” is used in both of these sentences… incorrectly. The correct word (and indeed an entirely different word) is “complement.”

Leave a Reply

Your email address will not be published. Required fields are marked *