What is HTML and CSS?

HTML stands for HyperText Markup Language. It’s a type of computer code that is read by web browsers and parsed into the websites we see. With nearly any web browser, you can click around in the toolbars until you find a “View Source” option. Clicking that will bring up a complicated page full of code enclosed in <> brackets. It’s a mix of letters and numbers, each composing a tag. Each tag has a function — “a href” is the link code, for example, and “strong” formats text into bold.

In the old days of the Internet, each bit of formatting you saw on a website was reflected somewhere in the code. Font colors, background colors, images, links, paragraph separation and everything else was done entirely with HTML tags. Eventually, other languages were invented to increase the variety of effects that were possible on the Internet. One of the largest and most common of these languages is Javascript, which allows just about anything to be coded in.

The problem with websites programmed entirely in HTML is the tedious process of changing the page. Before the days of graphical editors, before the days of automatic content updates, everything had to be done by hand. New content needed to be formatted in paragraph tags, the font and color embedded in the code along the way. If the website undergoes a major upgrade that changes the font, font size and color of all the text, every page needs to be edited by hand. You can imagine just how much work that is.

The solution to this problem was the invention and introduction of CSS.

What is CSS?

CSS stands for Cascading Style Sheets. These are small documents set aside from the main documents of a webpage. They contain code of their own, in a different language from HTML. This code defines classes, or types of content. For example, it might define what a Header is, what a Link is, and what basic Content is. For each of these classes, it lists attributes. These attributes will be things like font color, font size, font family and other such general attributes.

CSS and HTML work together to form a complete webpage. The HTML document now no longer contains any formatting information. Viewed without CSS, the HTML document will be anything from a functional skeleton of a website without formatting, to a jumbled mess of text, depending on how much formatting is left to the CSS. All of the formatting tags, like “strong”, font colors and background colors are removed. In their place, the HTML document has a single line pointing at a specific CSS document on the web server.

HTML and CSS Working Together

The formatting information that has been stripped from the HTML document is now contained in the CSS document. However, unlike in the HTML document, the CSS file only needs to define each class and attribute once. With pure HTML, every header needs to have the code for font family, size and color all contained within it. To change the font color of every header in the website, the coder would need to manually find and replace every instance. If they didn’t like the change, they would need to do it all again to fix it.

With CSS, all the coder needs to do is change the color listed by the class Header, and every instance of the header in the document changes. This makes it far easier to update styles for an entire website through manipulating just one document.

Without HTML and CSS it’s nearly impossible to build a modern website. Even so, many web developers have little personal knowledge of the inner workings of these two types of code. Modern web creation tools like Dreamweaver allow you to format a page as you want it to look and reads the code to display it properly in a hidden back-end. Even hidden, HTML and CSS are the building blocks on which the Internet is formed.