Skip to content

An Overview of HTML CSS and JavaScript

Source: Web Design 101: How HTML, CSS, and JavaScript Work (hubspot.com)

See Also: Frontend Development, JavaScript, CSS, HTML**

Contents

Overview

An overview:

  • HTMLĀ provides theĀ basic structureĀ of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
  • CSSĀ is used to controlĀ presentation, formatting, and layout.
  • JavaScriptĀ is used to control theĀ behaviorĀ of different elements.

HTML

HTML stands for HyperText Markup Language. “Markup language” means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage.

HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It’s an essential skill for any web professional. It’s the starting point for anyone learning how to create content for the web. And, luckily for us, it’s surprisingly easy to learn.

Markup languages use code to apply HTML tags and corresponding IDs, also known as “elements.”

These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.

Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is “wrapped” in, i.e. surrounded by, HTML tags.

CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page.

HTML provides the raw tools needed to structure content on a website. CSS, on the other hand, helps to style this content so it appears to the user the way it was intended to be seen. These languages are kept separate to ensure websites are built correctly before they’re reformatted.

If HTML is the drywall, CSS is the paint.

Whereas HTML was the basicĀ structure of your website, CSS is what gives your entire website its style. Those slick colors, interesting fonts, and background images? All thanks to CSS. This language affects the entire mood and tone of a web page, making it an incredibly powerful tool – and an important skill for web developers to learn. It’s also what allows websites to adapt to different screen sizes and device types.

Put simply, CSS is a list of rules that can assign different properties to HTML tags, either specified to single tags, multiple tags, an entire document, or multiple documents. It exists because, as design elements like fonts and colors were developed, web designers had a lot of trouble adapting HTML to these new features.

You see, HTML, developed back in 1990, was not really intended to show any physical formatting information. It was originally meant only to define a document’s structural content, like headers versus paragraphs. HTML outgrew these new design features, and CSS was invented and released in 1996: All formatting could be removed from HTML documents and stored in separate CSS (.css) files.

So, what exactly does CSS stand for? It stands for Cascading Style Sheets – and “style sheet” refers to the document itself. Ever web browser has a default style sheet, so every web page out there is affected by at least one style sheet – the default style sheet of whatever browser the web page visitor is using – regardless whether or not the web designer applies any styles. For example, my browser’s default font style is Times New Roman, size 12, so if I visited a web page where the designer didn’t apply a style sheet of their own, I would see the web page in Times New Roman, size 12.

Obviously, the vast majority of web pages I visit don’t use Times New Roman, size 12 – that’s because the web designers behind those pages started out with a default style sheet that had a default font style, and then they overrode my browser’s defaults with custom CSS. That’s where the word “cascading” comes into play. Think about a waterfall – as water cascades down the fall, it hits all the rocks on the way down, but only the rocks at the bottom affect where it will end up flowing. In the same way, the last defined style sheet informs my browser which instructions have precedence.

JavaScript

JavaScript is a more complicated language than HTML or CSS, and it wasn’t released in beta form until 1995. Nowadays, JavaScript is supported by all modern web browsers and is used on almost every site on the web for more powerful and complex functionality.

JavaScript is a logic-based programming language that can be used to modify website content and make it behave in different ways in response to a user’s actions. Common uses for JavaScript include confirmation boxes, calls-to-action, and adding new identities to existing information.

In short, JavaScript is a programming language that lets web developers design interactive sites. Most of the dynamic behavior you’ll see on a web page is thanks to JavaScript, which augments a browser’s default controls and behaviors.

Backlinks:

list from [[An Overview of HTML CSS and JavaScript]] AND -"Changelog"