1
What Are HTML and CSS?
The web has come a long way since it launched, in 1991. We’ve seen some big evolutions: from plain, static pages to slightly nicer-looking websites, to fully interactive web-based applications that we can access from anywhere in the world—including the device in our pocket.
And while the web has evolved considerably over that time, at its very core are still two important technologies: HTML and CSS. But what are they, and why should you know them?
What Is HTML?
HTML stands for HyperText Markup Language and it does two important things: it describes how webpages should look, and it defines the semantics of those pages.
But what is a markup language? Well, websites are made up of a bunch of different components. A variety of kinds of data—text, images, audio, video, and downloadable media—are part of a website. Those files—every component of the website—are stored on a server for you and other people to access.
Think of it this way: imagine that accessing a website from a server is like ordering takeout. You order from your favorite restaurant (sending a request across the internet), the kitchen staff (the server) selects the items you need, and then the delivery person (the internet again) brings the food (the files for the website) to your door (your computer).
All of this data is presented to you in your browser (Chrome, Firefox, Safari, Microsoft Edge, etc.) in a human-readable way.
Because humans and computers don’t read data the same way, there needs to be something that tells computers how to display all of this data in a structured way—to render it—so humans can read it.
The raw data files that the server sends you come with one or more files written in HTML. To continue our takeout analogy, you can think of an HTML file like a bento box (or, if you’re not into Japanese cuisine, like a cafeteria tray). It acts as a container that keeps the different types of data organized and presents them in a useful arrangement.
That’s where markup comes in. An HTML file is simply a text file marked up with special codes that tell the web browser how to display the data it’s receiving from the server on the computer’s screen. HTML markup draws from a large collection of text tags that are embedded in the text and tell the computer—specifically the browser—how a website should look.
Semantics in this context is important because it gives meaning to those tags (also known as elements). For example, there’s an <h1> HTML element (for Heading 1) (FIGURE 1.1), which tells the browser and search engines that the enclosed text is a heading—and not just any heading, but the most important heading. The browser then knows to display it in big bold letters … that is, unless you use CSS, or Cascading Style Sheets (which you’ll learn about later), to tell the browser to display it differently.
Figure 1.1 A heading tag in HTML
While you could just put a bunch of plain text into a file and open it in a browser, that text will have no structure or meaning. It will all run together, and there will be no visual hierarchy. It will just be a blob of text.
Let’s start by looking at the simple Word document in FIGURE 1.2. You can see there are multiple headings at different sizes, paragraphs with spacing, and text that’s formatted as bold or italic type.
Figure 1.2 A Microsoft Word document
This visual hierarchy gives the reader an idea of how they should approach the text: when a new section starts, where emphasis in the text lies, and more. In Word you do this using the Styles pane. On a webpage, you do that by adding HTML tags to the HTML file.
To create a simple hierarchy with HTML:
Open Notepad on Windows, or TextEdit on Mac.
Type <
h1>Bigger headings are more important</h1>.Type
<h2>This is smaller</h2>.Type
<h3>This is smaller still</h3>.<p>This is body copy, and is most common.</p>.Save the file as hierarchy.html.
Double-click the file to open it in your browser.
Your browser should display four paragraphs of text, decreasing in size from top to bottom (FIGURE 1.3).
Figure 1.3 A simple hierarchy in HTML
Current version: HTML5
At the time of this writing, the current version of HTML is HTML5. This version introduced lots of new elements and simplified a lot of the markup.
Because it’s likely that you’re just entering the wonderful world of HTML, using HTML5 mostly means you have a ton of great features at your disposal, and that those features are well supported. But it is good to know that HTML5 is backwards compatible, and much of it works with old and new browsers.
Luckily, browsers are pretty forgiving of HTML versions and even of errors in your markup, so you won’t have to worry about completely breaking anything with your code!
What Is CSS?
If HTML provides the structure for a webpage, then CSS supplies the style—and it’s right in the name! CSS stands for Cascading Style Sheets, and it describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want.
While HTML uses tags, CSS uses rulesets. They look like this:
h1 {
color: black;
font-size: 30px;
}
A great example of how CSS works is the website CSS Zen Garden. You can visit the site at csszengarden.com and, by changing the CSS, completely change the look and feel of the pages without changing the underlying HTML markup. Much like when you apply different themes or layouts to documents in Microsoft Word, changing the CSS styles on a webpage makes the page look different, but the hierarchy of the content stays the same (FIGURE 1.4).
Figure 1.4 CSS Zen Garden
While browsers come with their own default styles, you can easily override them with your own styles, in the form of CSS files called style sheets.
Current version: CSS3
CSS is currently on version 3 (CSS3) and is constantly evolving as browsers and computers get more powerful.
With CSS3 you get animations, more visual effects, and much, much better support for layout features like columns and grids, among other features.
For feature support, CSS3 is more dependent on the user’s browser than is HTML. With HTML, browsers treat unknown tags as plain text, so they still render properly. But older browsers likely will not support newer features in CSS3—and that will affect how your pages look and function. You’ll learn more about that later in the book.
How HTML and CSS Work Together
Even though HTML and CSS perform different functions for a website, they are almost always coupled in learning materials such as this book.
That’s because they are the two core languages necessary for making modern websites. Although technically only HTML is required to make a webpage, without CSS you’ll get a bland website that doesn’t look like much more than a Word document (FIGURE 1.5).
Figure 1.5 HTML, no CSS
These days, with the power of HTML5 and CSS3, we can create with our websites unique experiences that would have required a true programming language like JavaScript just a few years ago (FIGURE 1.6).
Figure 1.6 The HTML page from Figure 1.5, this time with CSS
Exciting times
Because of the synergy between HTML5 and CSS3, we live in a pretty exciting time for website creation. Things we once had to hack together are now natively supported (like columns of text), and HTML is getting more semantic and accessible.
That means more people with different abilities can use websites, search engines are getting more useful information, and websites should load faster, because you don’t need to add workarounds or extra processing to make certain aspects of your website work.
Much of that has to do with advancements in web browser development.
Wrapping Up
Another reason HTML and CSS are so often discussed together is that they’re both processed by the user’s browser. Other web technologies, programs, and apps work differently. Some might be processed by a server, or some on a developer’s computer and exported. HTML and CSS are uniquely positioned because the source code is accessible to the user in the browser.
When something new gets added to HTML or CSS, it’s up to each individual browser to implement the changes. That means that Google Chrome, Firefox, Safari, and Microsoft Edge may implement the new features at different times.
As a result, the websites you create might look different in each browser.
We’ll talk more about testing your websites in a later chapter, but knowing this will help you understand the true power of HTML and CSS: any device that has a browser can view your website.
It also means that you don’t need any additional tools, equipment, or expenses to start making websites. You can do it right from your computer.
Let’s do that now.