HTML5 Tutorial: Easy Way to Understand HTML and CSS
In this HTML5 tutorial we’re going to answer the question of what are HTML and the CSS. I’m going to give you a very high level view of them first, and then we’re going to talk about each on independently and how they work together, including a small demo at the end so that you can see how vital both of them are.
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. That is their goal is they provide a syntax so that when the browser see it, when it sees a document that has HTML and CSS code in 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 support in this web development tutorial.
What HTML allows you to do is 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, 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. What CSS is in charge of doing is 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 mostly 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 have 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 sheet rock. 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. Because of the CSS’s role, 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.