Chris Castiglione Teacher at One Month. Faculty at Columbia University where I teach Digital Literacy. I write about coding, the internet, and social impact.

HTML vs CSS: What’s the Difference?

3 min read

HTML and CSS are the two fundamental languages for building any website. What’s the difference?

First off, HTML and CSS aren’t the same. They function as a team! Together, they form the bones and skin for any website. Let’s break each down individually, then see how they work together…

HTML stands for Hypertext Markup Language. Think of HTML as the skeleton of the document. The HTML is what gives structure to the site. This is done through tags, elements, and attributes. Whether you want headings, lists, images, or links, HTML can do all of that.

Let’s start with a basic HTML document.

<!DOCTYPE html>
 <html>
 <head>
     <title>Welcome to One Month</title>
 </head>
 <body>
     <h1>Big Willie Style</h1>
     <img src=https://i.imgur.com/Vr37Ac3.jpg>
 </body>
 </html>
HTML code example
HTML code example

The !DOCTYPE in the first line above tells the browser what type of document it is looking at. In this case, it’s an HTML doc. The third line is the head section, and below it, you can see the title tag. This is where you would put the title of your website. In this case, the title of the document is “Welcome to One Month.” Inside the body (lines 6-9), you could add an H1 tag, like we have, that puts the text inside of it in the H1 style, the largest heading tag there is.

Tag, you’re it!

Here are some other popular tags!

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

These tags are for headings, much like those in this blog post!. H1 is the largest heading tag, so it has the largest text. H6 is the smallest heading tag so, you guessed it, the smallest header text option.

<p>

Paragraph text

<br>

Line break

<img>

The img tag is for inserting images into your site.

<video>

The video tag is for adding videos, of course.

<a href>

We use this for adding links, and it stands for anchor.

<strong>

Bold

<em>

Italic

<ul>

Unordered lists

<ol>

Ordered lists

Children Tags

If you are writing an unordered <ul> (bulleted) or ordered <ol> (numbered) list, they will surely need items in the list! To do this, we use the list <li> tag. The <li> is a child of either the <ul> or <ol> tags. So a bulleted list of our favorite 90’s sitcoms would look something like this…

<ul>
  <li>Seinfeld</li>
  <li>Friends</li>
  <li>Frasier</li>
  <li>Growing Pains</li>
</ul>
HTML code example
HTML code example

CSS

CSS stands for Cascading Style Sheet.

If HTML is the skeleton of your page, CSS is the skin.

Without CSS, your websites would look rather boring, dull, and, dare we say, naked. In CSS, there is a property and a value. Property is the quality you want to change; value is amount of change.

Let’s look go back to our HTML example.

HTML code example
HTML code example

Take a look at the <body> tag. We can augment the HTML body with CSS by adding details. For example, let’s say we want to change the color of the body. It would look something like this…

body {
 background: red;
 }
HTML code example
HTML code example

Or let’s say we want to change the color and size of any text we put in the body.

It would look like this…

body {
 font-size: 25px; background: blue; color: orange;
}

HTML code example
HTML code example

Or suppose you wanted to change the attributes of the H1 tag. You could do something like this…

H1 {
 color: blue; font-size: 100px
}
HTML code example
HTML code example

Using color names is fine, but if you want a more diverse palette to choose from, try using hexadecimal (#RRGGBB).

But for us to take advantage of the awesome possibilities available through CSS, we need to link our HTML to it. We do this using the code below:

<link rel=”stylesheet” type=”text/css” href=”main.css”/>

As you can see, this designates that there is a relationship (rel) between the HTML and the CSS.

Another way that we can implement CSS is by using the font-family property. This is the same thing as using a text editor to change the font.

We do this by including the following in the code:

h1 {
 font-family: Arial
 }
HTML code example
HTML code example

Case Study: CSS Zen Garden

A wonderful showcase of the relationship between the two languages is CSS Zen Garden.

CSS Zen Garden

CSS Zen Garden demonstrates the power of CSS. Clicking the links to the right will load the same page with one discernible difference, the CSS. This highlights what CSS can do to change the look and feel of the page.

Here are some examples from the garden…

The difference between HTML and CSS

The difference between HTML and CSS

The difference between HTML and CSS
The difference between HTML and CSS

Tutorial highlights

What have we learned?

  • HTML can exist on its own, CSS cannot, but together is where the magic happens.
  • The more we learn about each language, the more creative we can be with our designs. With the structure in place, the choices are endless.
  • HTML is the noun; CSS is the verb. Let’s make sentences!

Learn HTML and CSS now!

If you would like to continue your journey with HTML and CSS here are a few resources:

  • Learn How to Code HTML and CSS — this online coding course will take you from a beginner to intermediate developer in just 30 days. The course includes human support, videos, real-world projects, grading, and an HTML & CSS Certification following graduation.
  • Front-end vs. Back-end Developers — What’s the salary for a front-end developer? Back-end? Which is easier? These are great questions to ask when you’re getting started. Read this article to find out.
  • How to Learn Javascript — Now that you understand HTML and CSS, what is JavaScript and how do you learn it?

 

Chris Castiglione Teacher at One Month. Faculty at Columbia University where I teach Digital Literacy. I write about coding, the internet, and social impact.

One Reply to “HTML vs CSS: What’s the Difference?”

Leave a Reply

Your email address will not be published. Required fields are marked *