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…
What does HTML stand for?
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 alt="Big Willie Style">
</body>
</html>
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.
How do you add an image in HTML?
<img src=https://i.imgur.com/Vr37Ac3.jpg alt="Big Willie Style">
Popular HTML Tags
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.
Paragraph text: <p>
Line break: <br>
Add an image in HTML: <img src=”/link-to-your-image”>
Add a link in HTML: <a href src=”http://www.yourlink.com”>
Bold text: <strong>
Italic text: <em>
Italic: <ul>
Unordered lists: <ol>
Ordered lists: 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>
What does CSS stand for?
CSS stands for Cascading Style Sheet.
What’s the difference between HTML and CSS?
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 the amount of change.
Let’s look go back to our HTML 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;
}
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;
}
Or suppose you wanted to change the attributes of the H1 tag. You could do something like this…
H1 {
color: blue; font-size: 100px
}
Using color names is fine, but if you want a more diverse palette to choose from, try using hexadecimal (#RRGGBB).
How do you link CSS to HTML?
For us to take advantage of the awesome possibilities available through CSS, we need to link it to our HTML. Here is the code you need to link CSS and HTML together:
<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
}
How do you center an text in HTML ?
You don’t! Never. HTML should not be used for visual styling, only for building the structure of your page. If you want to center text or an image you want to use CSS. For example:
HTML
<h1>Some text you want to center</h1>
CSS
h1 {
text-align: center;
}
How do you comment in HTML?
<!-- This is a comment in HTML -->
How do you comment in CSS?
/* This is a CSS comment */
Case Study: CSS Zen Garden
A wonderful showcase of the relationship between the two languages is 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…
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 an 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?
