What are HTML and CSS? Well, technically they're just tools that you can use, and they're syntaxes you can use that allow you to write code that can be interpreted by browsers. By default, a browser can only interpret and then render on the screen so many different types of code.

For example, if you were to take an Excel spreadsheet or a Word doc and you try to open it up in Google Chrome or in Firefox, it is not going to work. That's because the browser is not capable of taking a file like that and interpreting it into something that it can show on the screen.

HTML and CSS are capable of that. Their goal is to provide a syntax so that when the browser sees it, it can interpret it and then it can show exactly what you're wanting on the screen.

Literally, every web page in the entire world has HTML, and pretty much all of them also have CSS. We're going to talk about the different types of roles that each one of them supports.

HTML stands for hypertext markup language. Now, when you hear the word language, you may think programming language, but that's not quite accurate because it really is just providing you a syntax for writing code so that the browser's able to read it properly.

It's really more of just a markup language, whereas a programming language such as JavaScript or Java or Ruby allows you to have some extra behavior like conditionals and loops and those kinds of concepts.

With HTML, you're simply writing a static page, meaning there's not really a lot of behavior in it. You need to use other languages in order to make that happen.

HTML allows you to wrap a structure around content. If you imagine having some type of blog page, HTML allows for you to designate where the content is, where the title is, or where a video or an ad might be. Then you're able to then organize it and later on, style it.

That's where CSS comes in.

CSS stands for cascading style sheets. The style word in there may indicate it's main primary objective. CSS is in charge of giving style to websites. You're able to take all of that HTML code that you organize and you put on the page.

CSS then goes in, and it adds all of the style elements. This can be anything from colors, to fonts, to animations. Anything that you look at on the page that has a type of style associated with it most likely is coming from CSS.

Let's walk through a real-world analogy that will hopefully help you understand the differences and the specific roles that HTML has compared with CSS.

Imagine that you're building a house. If you're building a house, the HTML is kind of like the foundation and the wood framing and the roof and the sheetrock.

The CSS, on the other hand, is more like the paint and the carpet and any kind of design accent that isn't really associated with the structure, but it is what allows a house to look good.

Now let's take a look at a website and see what happens when you have a website that has HTML and CSS compared with a website that only has HTML.

Right here you can see a fully built out website.

This has everything from a navigation bar, it has a parallax feature with background images, it has animations, it has a map and all of the different elements you'd expect in a website.

This website has HTML and CSS. Now, I duplicated this website, and if you want to take a look at it, what I did is I removed the CSS. I didn't make a single change to the HTML. All I did was I removed the calls that brought in the CSS styles, and this is what you would get.

Now, if you scroll through it, it still has all the same content, and it even kept a few elements like the embedded map and some things like that, but because CSS is in charge of adding styles, what we're left with here is just plain HTML.

It has all of the same structure, but because it doesn't have the CSS, it doesn't have any kind of alignment. It doesn't have the colors. It doesn't bring in the background images, and it doesn't align the items in the proper way.

In review, that is a high-level overview of what HTML and CSS are. HTML is a markup language that web browsers are able to look at, and they're able to interpret. They're able to take in content and then show that on the screen.

It provides the structure; whereas, CSS is also a language that you're able to use, and you're able to write in the CSS syntax and then have that applied to the HTML code that you write.