Why You Should Learn To Code (A Little): An Introduction To HTML & CSS

Note: Before making any changes to the code of your store, always make sure to back up your site.

It’s never been easier to start an online store. Thanks to platforms like Shopify, you can buy a theme, upload your products, and be selling to your customers in a matter of hours! The barrier to entry is so low that almost anyone can do it.

While it’s that easy to get started, it’s just as easy to take that simplicity for granted. Eventually, you’ll want to add or change something on your store and you’ll realize your theme doesn’t support it. Developers aren’t cheap and the last thing you want to do is have to pay someone else for something you could have done yourself.

What if I told you that you could spend a little time upfront to learn the basics of how websites work and you’d save some time and money down the road?

By the end of this article, you should know the basics of HTML & CSS and know enough to start tinkering in your own store.

So take a few minutes to get ready and let’s get started!

What is HTML & CSS?

HTML stands for Hypertext Markup Language. It’s one of the oldest and most important foundational languages of the web. It’s responsible for structuring and presenting the content on this very page!

CSS stands for Cascading Style Sheets. It’s responsible for providing the HTML it’s style and formatting.

Together, these are the necessary building blocks of any website. In this article, I’m going to walk you through the basics and show you how to code and style your first webpage.

Since I’m a huge fan of Bill Murray (who isn’t), we’re going to create our own shrine on the web to Bill.

First though, let’s dive deeper into HTML and CSS to really get a well-rounded understanding of their power and ability.

The Anatomy of a Website

We can easily understand how HTML and CSS work together by comparing them to the structural parts of a house.

Behind the walls of every house lies a frame responsible for its structure. Think of HTML like a house frame. It’s responsible for the structure of a website.

Sticking with our house analogy, CSS is responsible for things like paint colors, the dimensions of the dining room, the color of the wood floors, and the shape and style of the dining room table.

Let’s look at some basic HTML markup and walk through it line by line.

Doctype

The <!DOCTYPE html> tag helps the browser know that the document type we want to work with is HTML.

Head

Inside the <head> tag is where we store all the metadata of our document. This data includes things like the title, styles (CSS), description, and more. This data isn’t displayed to the end-user, but browsers use it to determine what the document should be titled or what styles it should use when it does display it to the end-user.

Some other elements found in the <head> of an HTML page could include author information, the page description, or a link to an image used for the favicon (the little icon in a browser tab).

Body

The <body> tag contains all the markup (code) for the website. This is the only code that the end-user will see when they view our site.

The Tools You Need to Build a Website

To get started writing HTML you might think that you need some fancy, expensive software, but you don’t. In fact, you already have what you need.

If you’re using a PC, open up the program NotePad. If you are on an Apple Mac, open up TextEdit.

Now that you have your text editing program open, follow along with me while we expand on the basic HTML markup above. Copy (Ctrl + C on Windows / Cmd + C on Mac) and paste (Ctrl + p on Windows / Cmd + P on Mac) the following code into your text editor.

<!DOCTYPE html>
<html>
<head>
<title>The title of your page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is our first paragraph.</p>
</body>
</html>

Save this file on your desktop and open it in your web browser. You should now see your code translated, or rendered by the browser and it should look something like this:

The Heading element (<h1>)

The <h1> tag is used when you want to bring attention and definition to certain text. In this instance, we want the text “Hello World!” to be larger and more prominent than the subsequent text.

Out of the box, HTML has six different heading tags you can use: h1, h2, h3, h4, h5, and h6.

The font size will get smaller every “step down” you take; H1 will be the largest and H6 will be the smallest. By default, they will have some margin (or spacing around them) to separate them from other elements on the page and to give the user visual hierarchy.

Take a minute to experiment with changing the title, heading, and/or paragraph tags. Once you make a change, save it, and then refresh your browser. Congratulations, you just edited HTML for the first time!

Looks boring though, right?

Let’s add some style to our page and learn more about the true power of CSS.

In order to add our own styles to these HTML elements, we need to add a <style> tag inside the <head> of our document.

This tag wraps around all our CSS. Think of what’s inside the <style> tag as the browser’s style guide.

Under the <title> tag on a new line, add a style tag like this:

<title>The title of your page</title>

Inside the style tag is where we can enter all our declarations. A CSS declaration consists of a property followed by a value.

Let’s make the color of our <h1> different from the rest of our text because it’s the most important and we want it to stand out. Add the following between your <style> tags, save your file, and refresh your browser again.

You should now hopefully see something that looks like this! You’ll notice that our “Hello World!” text is now blue. Simple, right?

There, you’ve done it! You’ve successfully changed the style of an HTML element using CSS. Are we having fun yet?

Adding images to our page

There are many other elements you can include on your page, but one of the most prominent on any website is the almighty image. We can easily add an image by including the tag like so:

Note: For the sake of demonstration, I’m using an image placeholder service called www.fillmurray.com. You can use an image on your local computer if you prefer that.

Alternate (Pro Tip) way of grabbing an image from a website: Find an image on a website you’d like to use and right-click on it. Click Copy Image Address and the URL of that image will be in your clipboard. Depending on your browser, the wording might be slightly different. I’m using Google Chrome. I’m not recommending the overuse of hotlinking but for this demo it’s not a big deal.

Copy and paste this image element and place it under your paragraph tag so your full code block looks like mine:

<!DOCTYPE html>
<html>
<head>
<title>The title of your page</title>
<style>
h1 { color: blue;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is our first paragraph.</p>
<img src=“https://www.fillmurray.com/400/500” alt=”image of Bill Murray”>
</body>
</html>

Save your file and reload your browser and you should now see something like this:

If you were paying attention, you noticed another attribute on the <img> tag, the alt=”image of Bill Murray”. Since the browser deciphers code and cannot see the rendered output like you and I, it needs some way to know the context of what it’s displaying.

By adding an ALT tag (alternative text) to our image, we can tell the browser what our image’s subject matter is about.

This is also very important for SEO (search engine optimization) and more importantly, this text is read aloud for blind users using a screen reader.

But What About Links?

No intro to HTML/CSS would be complete without covering links! When you’re building a website, you’re going to want the ability to link, whether that’s to external sources or to other internal pages within your own website.

Let’s talk about the anchor element. The real magic of an anchor element is actually its href attribute. Let’s demonstrate the structure of an anchor tag by adding a link to Bill’s Wikipedia page.

<a href=“www.google.com”>Read his Wikipedia entry</a>

This code is telling the browser that when a user clicks on the text: “Read his Wikipedia entry”, take them to www.google.com.

Let’s add this code right under our heading element so our code block now looks like this:

<!DOCTYPE html>
<html>
<head>
<title>The title of your page</title>
<style>
h1 { color: blue;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<a href=“https://en.wikipedia.org/wiki/Bill_Murray”>Read his Wikipedia entry</a>
<p>This is our first paragraph.</p>
<img src=“https://www.fillmurray.com/400/500” alt=“image of Bill Murray”>
</body>
</html>

Hit save and refresh the browser and hopefully, yours looks like mine.

Taking it Across the Finish Line

I went ahead and styled my little homage to Bill Murray and here is my final result. I will walk through some of the added styles below.

Drumroll please…

Now, you can see that this isn’t anything to write home about, but that’s by design. This is just the tip of the iceberg when it comes to how this page could look or be styled. I wanted to keep things simple so you understand what each of the styling methods below does.

Let’s jump into the little CSS I had to add to get us this far.

Styling the Body:

First, to the body of the page, I added:

body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
margin: 25px;
}

background-color
I set the background color of the page to a very light grey using the hexadecimal color value #eee. You can learn more about those and see some examples here over at MOZ.

font-family
I wanted to change the font from the default Times New Roman browsers use. For this, I chose Helvetica as my first choice (if the user has that font installed on their computer), Arial as my second choice (if the user doesn’t have Helvetica, it will default to Arial), and as a final backup, a basic sans serif font.

text-align
I chose to have all the text on my page center-align. There are a couple of other options for values like left and right, but I thought for this it looked best centered.

margin
I added a little margin to the body of the document to give it some breathing room.

Styling our image:

Lastly, I styled Bill’s beautiful face, er, I mean the image element 🙂

img {
border: 10px solid #41bcd6;
box-shadow: 2px 5px 5px #999;
padding: 10px;
border-radius: 5px;
}

I didn’t do much but wanted to give Bill’s photo some presence on the page.

border
I added a 10px border around the image. The #41bcd6 is another hexadecimal color value which renders a light blue color (part of my secret subliminal Steve Zissou color theme).

box-shadow
I wanted to give the image a three-dimensional feel so I added a light shadow to it. The box-shadow property accepts pixel and color values that dictate the length, blur, and color of the shadow. To learn more about the box-shadow declaration, Moz breaks it down well for you here.

padding
To make the image look more like a picture frame, I added 10px of padding between it and the border.

border-radius
Just to illustrate one of the cooler abilities of CSS, I made the corners of the image rounded by using border-radius. When I started building websites, nothing like it existed, and producing rounded corners on the web was actually pretty challenging. We’ve come a long way since then, and now it’s rather simple. It accepts a value like px or ems, and here I chose just to round it enough to notice by setting the value to 5px.

Conclusion

Throughout this article we worked together to learn the basic anatomy of a website. We also learned some simple HTML and CSS which, ultimately, turned into a pretty amazing little one-page tribute to one of the all-time greatest actors of a generation 🙂

In all seriousness though, I hope you were able to follow along with me and build out your first basic website. Now if Bill Murray isn’t your favorite actor, I challenge you to edit this code to showcase your favorite actor, band, or whatever you’d like.

If you need to reference this code at any time, come back and read this article, or as a convenience, I’ve put it up on CodePen here.

There are so many fun things you can do with just HTML + CSS. Here are a few great resources for you to expand your learning:

Code Academy: 100% FREE intro to HTML/CSS Course
CSS Zen Garden: The first example on the web that really “clicked” for me, to help me realize that you can have 100 different-looking websites that all use the same HTML markup
CSS Animations
The Mona Lisa using only CSS
Animated husky dog using only CSS
CodePen: CodePen is an online tool for LIVE testing and showcasing your HTML, CSS, and JavaScript code

We’ve seriously only scratched the surface in this article so I encourage you to read more, take some online courses, and keep pushing your knowledge!

What is HTML & CSS?