Coding Week: HTML, CSS, and JavaScript: What’s the difference?

If you’re even vaguely aware of the internet, you’ll have heard of the terms HTML, CSS, and JavaScript. They’re the building blocks of the internet, transforming code into something that’s visual and interactive.

But while they might all play their part in the online experience, each of them are unique.

Before you get started with our Microsoft Learn course ‘Build a simple website using HTML, CSS, and Javascript’ let’s take a look at what they actually, and how they can be used creatively.

 

What is HTML?

HTML is probably the most familiar of the three, having been cooked up by internet inventor Sir Tim Berners-Lee back in the 80s. This is the standard mark-up for websites, and you can see it in action just by right-clicking on any site and select Inspect to see how a webpage is put together in HTML.

To anyone who has no interest in code, it’s a baffling series of numbers, letters, and unknown punctuation marks. Like a foreign language. Which is precisely what it is (HTML stands for Hypertext Markup Language, fact-hounds).

Each line of code informs the website how it should be structured. This includes the use of HTML elements – think of these as the building blocks of website creation, in which commands are bracketed on either side by <>. This will start the tag. To end it, you’d add a stroke, so the code is </>.

Let’s say you want to tell a website to place your text in bold, you’d use <b>, type your text, then end the bold effect with </b>. If you wanted to turn text or image into a hyperlink, on the other hand, the tag would read something like <a href=http://www.bing.com>. At the end of your linked text, you’d type </a>, to tell the website to end that command.

These tags are then ‘translated’ and displayed on websites.

 

What is CSS?

CSS stands for Cascading Style Sheet, the brainchild of Hakom Lie and Bert Bos. It works especially well with HTML, but you don’t need to use them together, as it works with any XML-based mark-up language. However, when used together, it lets you tweak a website’s overall design without altering the HTML mark-up on every page, which would be a massive task.

At its most basic, CSS dictates the website’s look and feel, such as the background and font colours. You can also use it to change how a website is displayed depending on the size of the screen – pretty useful in our mobile-friendly world.

So, you’ve got you HTML-coded content, like <H1>My Awesome Website</H1>. On its own, that’s going to look pretty drab on the page. What you’d need to do is dip into the CSS to code a line that looks like: H1 {  color:blue;  font-size:48px}.

Here, the ‘H1’ tells the CSS which part of the website to alter. Both ‘color’ – to ensure your website works, it’s best to use the American spelling – and ‘font-size’ determine how the text should be presented.

But, how do you get this code to complement your HTML?

The first method is to add this directly to your HTML code. However, the downside of this is that the CSS will only apply to that particular line of code. If you re-designed your website, you’d need to go in and change it by hand.

The best way to get your CSS and HTML to play nicely together is to write your code into a text editor, then save it as a .css document. You can then link to this document in your website’s header section.

 

What is JavaScript?

JavaScript has its roots in the early days of the programming language Java. If you’ve ever played a game in your browser, or used an app on your phone, then you’ve seen JavaScript in action. It’s a little more high-level than either the design-focused CSS and the structural HTML, dynamically changing HTML and CSS elements on the page.

For instance, if you wanted to add a picture slideshow to your website, them using HTML aand CSS, you’d have every static image displayed on the page at once. But, with the right code, JavaScript then jumps in and says, ‘ok, cycle through all of these images one at a time’. This helps make your website look even more amazing (not to mention professional). It also means users don’t have to keep refreshing the page to see new pictures.

This is the final building block for your website – and arguably the most powerful – but you’ll need to nail down your HTML and CSS before deploying it. Helpfully, though, it can be written straight into your HTML code. And JavaScript isn’t just limited to graphical elements. It also has useful applications such as auto-fill text fields, making it extremely functional in today’s modern web use.

 

Now you’re ready to begin your Microsoft Learn journey – learn how to combine these three tools to build your own website in our free online course.