You want to become a web developer and are about to start learning the languages of the trade. But you’re not sure whether to start with the HyperText Markup Language (a.k.a. HTML) or Cascading Style Sheets (a.k.a. CSS).
If this sounds familiar, then read on. As someone who wrote his first lines of HTML and CSS back in 2007 and has been coding ever since, I wrote this post to share my thoughts and tips with you.
Before we get to the answer, let’s take a minute or two to talk about how HTML and CSS are different.
What Is HTML?
In its simplest form, a web browser is a document reader. You enter the URL address of a web page, then the browser makes HTTP requests to retrieve the document at that address (it looks up the document, which is hosted somewhere on a server on the Internet).
Once your browser finds the document, it starts reading its contents. And like any other document, this web page can have a structure—say, headings, subheadings, paragraphs—to make the information on it more readable.
On the web, that structure comes from the HyperText Markup Language, abbreviated as HTML. As its name suggests, HTML is a markup language. Basically, a language for structuring information for computers.
It consists of a set of elements, called tags, that enclose the information on web pages and tell browsers what that information is about. For example, the <p> tag tells browsers that the information contained inside it is a paragraph:
<p>This is a paragraph.</p>The <h1> tag, on the other hand, tells browsers that the information it contains is a first-level heading. The <h2> and <h3> tags, respectively, are for second- and third-level headings:
<h1>This is a first-level heading.</h1>
<h2>This is a second-level heading.</h2>
<h3>And this is a third-level heading.</h3>Of course, these are just examples. There are many HTML tags, and they are for much more than paragraphs and headings (think buttons, forms, sections, etc.). In addition to that, HTML documents have a structure where specific tags, like the <head>, should come before other tags, like the <body>.
A complete list of HTML tags can be found at W3Schools. And a sample template for a properly-structured HTML document can be seen at HTML5 Boilerplate.
What Is CSS?
A structured document, such as an HTML document, is useful. But if the document isn’t styled, it won’t be very readable.
For example, you may want to give the text a specific width so that it doesn’t take up the entire width of the screen. You may also want to include a sidebar with links to relevant pages to encourage visitors to stay on your site.
In addition, you can use a specific font for the headings and a different font for the text. You may also want to make the links blue and the buttons have a blue border to make them stand out from the non-interactive elements in your document.
All of this can be achieved with Cascading Style Sheets, abbreviated as CSS. Essentially, CSS is a style sheet language—it lets you define rules for how to style the HTML elements on a web page.
These rules then tell the browser how to display the web page to the user. For example, the following rule instructs browsers to give all paragraphs a font size of 14 pixels:
p {
font-size: 14px;
}And this rule tells browsers to make first-, second-, and third-level headings bold:
h1, h2, h3 {
font-weight: bold;
}In CSS, a “rule” is a group of properties, like font size or font weight, applied to one or more HTML elements, depending on the selector used.
The selectors can be simple, like those for a given type of HTML element or for an HTML element with a specific id, or complex, with a combination of factors to select elements based on their position, attributes, and others.
Related: The Simple Guide to Complex CSS Selectors
Which One Should You Learn First?
So far, we’ve established that HTML is a markup language that gives structure to the information contained on a web page, and CSS is a style sheet language that gives that structured information style.
This leads us to the answer you came here to find out:
You can have an HTML document without CSS, but you can’t have a CSS stylesheet without an HTML document. And that’s why you should learn HTML before you learn CSS.
So if you’re brand new to web development and have never written a line of code, take a few days to a week or two to understand and get a handle on the basics of HTML. And only then move on to CSS.
However, if you want to learn HTML/CSS and have some prior experience in another language, especially if it’s a scripting language like JavaScript or Python, you can probably learn HTML and CSS in parallel. (Still, start with a few hours of reading about HTML.)
And be sure to check out our roundups of the best books on HTML5 and CSS3.
Can You Learn HTML Without Learning CSS?
Yes, you can learn HTML without learning CSS. However, if you don’t learn CSS, you won’t be able to change the look and feel of your HTML documents.
Whether you should also learn CSS depends on the reason you want to learn HTML. If you want to work in web design, you definitely need to learn HTML and CSS. If you need HTML for other reasons, then CSS may be unnecessary (but still useful).
Can You Learn CSS Without Learning HTML?
No, you can’t learn CSS without first learning HTML. With CSS, you create rules to assign properties to HTML elements. If you don’t know what HTML elements are and how they work, you’ll have a hard time using CSS productively.
There are plenty of websites with HTML tutorials, references, and templates. Pick the ones that appeal to you the most and familiarize yourself with the basics of HTML before moving on to CSS; it will really help you.
