April 24, 2014

HTML & CSS for Ecommerce Store Owners

If you own an ecommerce store(or are planning to in the future) and you don’t have much experience with coding or design, you know that one of the biggest hassles we face is making design changes to our websites.

HTML and CSS, at a cursory glance, can seem really, really intimidating. Lucky for us, we don’t have to build websites from scratch, so we don’t need to do a college level course in web design to tweak our stores. We just have to know the right things.

So I present to you:

The Shortest HTML Tutorial on the Web

HTML stands for HyperText Markup Language. It’s the nuts and bolts of any website. To have a look at HTML, right click anywhere on this page and from the menu that pops out, choose “View Page Source”.

view page source

All of that mumbo jumbo is HTML. Let’s take it apart, and intentionally gloss over the boring bits.

From one look, you can tell that important stuff is between greater than/less than signs: <example>

Then there is some text, and there is another variation of the same thing, except there is a slash after the first one: </example>

In HTML, two brackets by themselves indicate the beginning of any object, and the brackets with a slash </> indicate the end of that object.

You can think of all HTML pages as these objects, or blocks, arranged and nested in one another:

<thing>

<thing1>

<thing2>

</thing2>

</thing1>

</thing>

Remember: when you nest objects like this, make sure to close them in the order you opened them in!

And so on.

As you may have guessed, you can’t just use whatever you fancy between the brackets. The objects that HTML recognizes are pretty standard, but there are a lot(here’s a more comprehensive list), but let’s cover the basics you need to know for ecommerce.

<head></head> – these tags are at the very beginning of web pages. They usually contain information such as the page’s title, description, and verification scripts. This is also where any external scripts(that’s pieces of code stored in separate files) are referenced, or called. None of the information here is actually displayed in the browser.

<body></body> – these tags come after the head tags(d’oh!), and they contain all the code that will be displayed in the browser – this is the meat of the web page. The closing body tag will come after ALL of the page’s content.

<img src = “URL”> – these tags are images. You point to where the image is located, and the browser will load the image from wherever you specified with the URL.

<a href = “URL”> – these tags are links. The text(or image) you want to use as a link will go between this tag and the closing </a> tag. You can add as many things as you like between these tags, and they will all be a link to the URL you put in.

<h1></h1> – these are “heading” tags – the title of this blog post is wrapped in a heading tag. Headings vary between h1 all the way to h6.

<p> – this tag is called the “Paragraph” tag – it will format any text you write between it and the closing </p> tag very neatly. All of the text in this post is between <p> tags – see for yourself. Use a new set of <p></p> tags for every new paragraph.

<div></div> – These tags are “divisions.” They are great for splitting up your website into smaller, more manageable sections. For example, your whole website could be divided up into 4 main sections – a header, a navigation bar, the main content body, and a footer. While coding, each one of those sections would be in their own specific <div></div> tags. You can nest <div> tags as much as you want – if you wanted to break up the content body into sections, for example.

When you nest tags in HTML, each object will take up full space and push out every other object underneath it. If you want to arrange these objects properly like most professionally designed websites, you need to use CSS.

There are a lot of other tags, but they are all english(or shorthand), so the best course of action from here is to just look at the source code of random websites and explore.

Here is a comprehensive list of tags if you want to learn ALL the HTML there ever was.

The Shortest CSS Tutorial

Now that you’ve got a grasp of HTML, let’s get into what makes websites pretty and visually appealing. HTML by itself will result in boxy, ugly sites. The neat arrangements, curves, and colors are all because of CSS.

CSS stands for Cascading Style Sheets.

CSS can either be hard-coded into the HTML itself, which is fine if you are setting properties for just one object, like changing a paragraph’s color to red.

But let’s say you want to set a default for your entire website. Would you hard code the properties into every <p> on your site? Wouldn’t it be easier to do it once and make it a default property? You can do that in a separate CSS file. Method #2 is much more effective, and that’s how ecommerce stores do it. In Shopify and BigCommerce’s template editor, for example, you can access the CSS files.

CSS syntax looks like this:

(Note: I won’t explain what the properties are – the names are self-explanatory)

p {

color: red;

}

If you wanted to change the properties of a <div>, the syntax would be the same, except you would replace p with div:

div {

}

Now that you have set defaults, what if you want a specific object to have unique properties: two paragraphs should be green. You can do this by giving those <p> a “name” and just assign any properties you want to that “name” in the CSS file. Names can be anything you want, it should make sense to you!

So how do you “name” HTML objects? Using “classes” and “id”s, of course!

A CSS “class” is an identifier you can give to multiple objects – like the green paragraph example above:

<p class = “greenPara”>Blah</p>

<p>Foo</p>

<p class = “greenPara”>Blah & Foo</p>

This is what you would add to the CSS:

.greenPara {

color: green;

}

(When you set properties for a “class”, you use a “.” before the name. This tells the browser that this is a “class”).

The two paragraphs that have the class “greenPara” will have any properties that we assign to it in the CSS file(green), and the other one will have the default settings(red).

A CSS “id” is an identifier you can give to ONE object. This is useful for unique sections of your page, like the header, content body, and footer:

<div id = “header”>

</div> – this is the header tag closing

<div id = “content”>

</div> – this is the content tag closing

<div id = “footer”>

</div> – this is the footer tag closing

To set properties for an “id”, use the following syntax:

#header {

width: 1000 px;

height: 200 px;

}

As you can see, sizes in CSS and HTML are measured in pixels. One pixel is one of those teeny tiny dots you see on your screen. If you’ve got a Retina Mac, you probably won’t see a dot even with a magnifying glass!

Remember, you need to enter all of the properties for any object at once – so every single property you want to assign to the #header should have been entered in between the curly brackets above.

Nesting CSS Tags

Like HTML, you can also nest CSS tags. Let’s say you wanted to make all of the <h1> tags in the header blue and have a font size of 20 pixels:

#header h1 {

color: blue;

font-size: 20 px;

}

The parent tag’s name comes first, then the child tag. Every <h1> in the #header will now be 20 pixels and blue.

CSS Positioning and Sizing

CSS can be used to position and size objects. Most of the time, you will use this with <divs>

You can edit these properties using the following properties: margin, padding, and display. There are others, like float and position, but they are a little more advanced.

margin border padding

Margin is the space outside the object itself.

The border is the surrounding border of the object.

Padding is the space between the object and the border.

The little blue box in the middle is the actual div itself(or any other object).

The display property can have four settings:

  1. none : this hides the object
  2. block : this makes it a “block” – it won’t let anything else be in the same line as it is, and will maintain it’s size and shape.
  3. inline-block : this will maintain the object’s size and shape, but it will let other objects sit in the same line as it is in if there is space.
  4. inline : this will let the object be bullied by any other objects that choose to do so.

Remember, the positions of the objects will depend on the size of the parent element. If you try to cram two objects 30px wide in a div with a width of only 50px, they will not fit.

Getting the Hang of CSS

This was a very basic primer on CSS – there are many other properties, but all of which you can learn and figure out by yourself using a very fun method. I’ll call it MESSING SITES UP. That’s right. You can go to ANY website and mess around with their CSS and watch everything go HAYWIRE. It will only be in your browser, of course, but still. It’s fun.

Dive in: right click anywhere on any website, and click “Inspect Element”(Chrome & FireFox only – sorry IE and Safari!). A panel will pop up on the bottom of your browser, and the code on the right of the screen will be the CSS. Double click on any property to change it and see what happens!

This is a reference of all there is to know about CSS tags.

HTML and CSS in Action

I’ve recorded a video of me messing around with the source code of a website: for your information and entertainment needs!

Commenting

Make sure you leave comments throughout your code! Comments are bits of text that the browser will NOT read. Whenever it sees comment tags, it will conveniently ignore that chunk of text. They are for our reference, and can span multiple lines. In HTML, comments look like this:

<!–This is a single line comment–>

<!–This is a

multiple line comment–>

In CSS, comments look like this:

/*This is a single line comment*/

/*This is a

multiple line comment*/

Use them well.

Applying This to Your Store/Website

Before you dive in to the template editor and make irreversible changes, play around with “inspect element” and make sure your CSS works properly before you change the template.

When you do change the template, comment out the existing code(don’t delete it) and add your new code below. This way, it’s easy to revert back to the original.

This feels like giving a little kid a magazine and some safety scissors:D!

Please remember to share this post if you found it helpful!

Table of contents

Leave a Reply

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

Launch your dream side-hustle with help from A.I.

Generate Brilliant Business Ideas
Please provide the info in the required fields
Login or sign up in seconds,
Login or sign up to get started with side hustle now!
When creating a new account, you agree to the
terms & Conditions and Privacy Policy

Sign in to see your favourites

❤️