Blog-BeginnersGuide

Beginner’s Guide to HTML and CSS

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS. When you write HTML (Hyper Text Markup Language) you are telling a browser what should appear on a page. CSS (Cascading Stylesheets), on the other hand, is the language used to tell the browser how to display things on your page. In conjunction, these two languages provide you with an incredibly powerful and flexible toolset that you can use to stake your claim on the web.

This helpful guide is written for those who have some basic knowledge of CSS and HTML, but could use some tips on using them together. Special attention will be paid to best practices, organization, and fundamentals that are often missed by those learning on their own.

HTML Structure and Mockups

Sample balsamiq mockup.

A sample Balsamiq mockup.

Writing HTML is as much about planning as it is about writing code. Because of this, “blocking out” or creating a mockup of your design on paper is encouraged as it allows you the freedom to think about where everything should go on your page without having to scratch your head trying to remember things like the correct code to create a list or figuring out where you missed a closing tag. If you prefer to do this step on your computer rather than on paper, there are some great programs out there such as balsamiq which will help you create digital, shareable versions of your mockups. In my experience, digital versions are ideal if you’re working as a part of a team or as a remote freelancer.

Wrappers

Mockup with planned wrappers

Example mockup with planned wrappers.

Once you have a visual guide for where things should go, begin to think about wrappers. Wrappers, such as div or span elements, group together HTML elements so the CSS can manipulate them more easily. You can see an example of some planned wrappers for the example mockup in the accompanying image.

Grouping elements into logical sections will help when you attempt to add spacing and alignment in CSS. While it does help with planning and efficiency, don’t worry if you don’t have all the wrappers you need right off the bat; as you write your stylesheet code you will almost certainly be updating the HTML to suit your needs.

Remember that too many wrappers will clutter your code and may cause some undesirable side effects when you’re styling your page. Try to only create div and span elements as needed to prevent this from happening.

IDs and Classes

CSS relies on IDs and classes in order to accurately target and style your html tags. Newcomers to HTML and CSS are often confused by the differences between the two and as a result, tend to misuse them. In order to avoid confusion, simply remember these two rules:

  1. IDs are unique and should only show up on each page once
  2. Classes can and should be reused

IDs are for items that only appear on the page once. For example, in my mockup above I have a single map on the page. As a result, I will probably wrap it in a container that uniquely identifies it:

<div id="businessMap">**Map Code Here**</div>

The top menu items, however, are not unique and I will probably want to define a single style in CSS that applies to all of them. Therefore, I might have an HTML structure that looks like the following:

<div id="topMenu">
  <ul>
    <li class="menuItem">Home</li>
    <li class="menuItem">Our Sauces</li>
    <li class="menuItem">Order Online</li>
    <li class="menuItem">Contact Us</li>
  </ul>
</div>

Notice how the menu wrapper has an ID since there is only one of them on the page at a time while each menu item shares a class that I can use to ensure they are all the same style.

CSS Structure

Once the HTML is defined and all of your elements are on the page it’s time to start styling with CSS. Many beginners may struggle with the structure of CSS files and would benefit from a few simple guidelines to follow when creating new stylesheets.

  1. Place layout CSS in a single file – In a typical website, you will find that each page shares similar elements called a template. Place styles that pertain to the template in a single file so that you can include it in its own tag on each page. This will help to prevent duplicate code.
  2. Use imports when necessary – If you want to keep your CSS extra clean and help others who may work on it later, group styles into files that pertain to logical groups of HTML elements and import them into other stylesheets as needed. You might, for example, have a stylesheet for your menu or one for a gallery that could get included on different pages.
  3. Be specific with your selectors – CSS styles can target multiple elements (see classes above) which can be a double-edged sword. If you aren’t specific enough with your CSS selectors you’ll find yourself accidentally applying styles to HTML tags unintentionally.

General Tips

Working with HTML and CSS together is a skill learned over time so don’t worry if you run into frustrations; that just a part of the process! Once you have a general feel for HTML and CSS try to dive in a little deeper by learning about the box model for more control in your CSS and HTML5, and really utilize the cutting edge features of HTML’s latest version.

Online forums like Experts Exchange are also an important learning tool when you get stuck. If you need some one on one help, just post a question but don’t forget to use a sharing tool like codepen to show other people your code for collaboration.

Good luck and happy coding!