HTML and CSS are sets of commands to control how your webpage looks.
An example of a command is 'make a box that's 500 pixels wide' and 'Put the word HELLO in that box'.
There's a lot of overlap in the commands of CSS and HTML, like how both have commands to tell your computer to show the word HELLO at the top of the box, in the middle, or along the bottom.
If you've ever taken a good look at a page's code, you might have some difficulty even spotting which parts are HTML and which are CSS because they flip between the two languages so often.
I'll give you some samples in a moment but first let's focus on the difference between what the two languages usually do.
If a website is a car, HTML is the raw materials like metal and plastic, and CSS is the custom forming of its curves and paint.
Many people think of the HTML as being the skeleton of a page and the CSS as the flesh and makeup, but there are some pretty awesome developments in HTML5 that stretch the definition of what a webpage is. An example would be how you can run 3d games or get it to show your audience where they're located in the world like this: (Your browser will ask for permission and we don't store this data)
Click the button to get your coordinates:
Even though that's really amazing, the cosmetics of the site are essentially left to CSS.
So visually, HTML would make a box like the one below:
Now let's say I absolutely hate that because it looks like it's straight out of the nineties.
With CSS I can make a couple of changes and round out the corners and get a nicer looking border, like this one below:
What's even cooler is that CSS3 can do animations using your audience's computer instead of forcing them to download a big video animation.
An example of playing with the box we made is below:
Why am I wasting your time with these bells and whistles?
If you're reading this you want to know more about HTML and CSS, but as a client it's in my best interest for you to know what elements can be added to your website to speed up your load time. If you already have an animation on your site, then you might want to think about replacing it.
On the other hand, you might want to create one, like if you need to explain how to read the gauges on your machines.
How HTML and CSS actually work is a lot like the game 'Simon Says'.
You might want to tell the computer, 'Simon says turn your font blue', 'Simon says make your font small', and it will keep showing small text in blue until you say 'Simon says stop.'
When coders are sloppy, they'll forget to tell the computer to stop, and that causes problems so make sure you always finish your tags.
Now let's get to some sample code.
HTML tags always start with <something> and end with </something>
You might see something that looks like this:
<div style="font-size:large; background-color:#585858; color:#FFFFFF" width="150">I'm just so happy!</div>
That code would do this:
Now let's split it up.
HTML commands always look like
CSS commands always look like
It's important to realize that in HTML, whatever you type between the sets of double quotes is part of the HTML instruction, and in CSS whatever is between the colon and the semicolon is part of the CSS instruction.
In the example then, you might be able to see that font-size:large; background-color:#585858; color:#FFFFFF are all CSS commands but style="blahblah" width="150" is straight HTML.
The style="" part was the HTML command for 'I'm going to start speaking CSS right now browser, so get with the program'.
Now, for something as basic as the width of a <div> both CSS and HTML have commands.
So why do you see people switch between the two?
They do one or the other out of habit, mostly, but if you're looking to do some coding yourself you should know that sometimes a page just won't listen to commands.
If this is the case it's because one language tells the computer to run while another tells it to stay. In a fight between HTML and CSS for whose instructions will be shown, CSS usually wins.
Now, I don't want to overcomplicate this article, but I also think it's necessary to explain why sometimes you just won't be able to find why your page looks the way it does.
If you find this is the case, it's likely because all the CSS of the page is hiding in another file! Those files are called stylesheets and they use the same something: whatever; pattern, but sometimes people lay that code out on a page in a way that looks different.