Styling for beginners

February 03, 2020

Yesterday's post walked through how to make a basic recipe page with HTML. It isn't the prettiest thing but it has all the content in the right places. Today we will style it but first we need to add a head.

Heads and bodies

Well structured HTML pages have a head and a body. Think of it as a skeleton. Right now, our page doesn't have a head or a fully defined body, let's add those pieces now.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Peanut butter and jelly</title>
<head>
<body>
<!-- Put existing sandwich page code here -->
</body>
</html>

The tags

The first thing you may notice when you load sandwich.html in a browser is that the title bar now shows "Peanut butter and jelly".

Browser window with tab titled "Peanut butter and jelly sandwich"

This comes from the title tag <title>Peanut butter and jelly sandwich</title>.

The other tags didn't seem to do anything for the page. That is true, they didn't change anything rendered in the browser but they are important.

!DOCTYPE

The first tag looks odd, <!DOCTYPE html>. It is declaring the document type to be HTML but doesn't the browser already know that? And why doesn't it have a closing tag?

It is declaring that the document type is HTML 5. This version of HTML has extra features. Every page should have this at the top. This is a label and thus doesn't get a closing tag.

HTML

The second tag is the base for our page. Everything we do should be wrapped in the <html></html> tags. The lanuage attribute lang="en" declares this page to be in English.

head

Now we get to the head tag <head></head>. This is where metadata, linked scripts, and styling for the page should go. Everything in the head will be loaded before anything in the body.

body

The final new tag is <body></body>. All of our content that needs to be shown in the browser should go here.

Styling

Now that the framework is there. Add <style></style> after the <title></title> tag. We are going to put all our new styles in here. Styles are what lets us customize the look and feel of our page, all styles are written in CSS.

CSS

CSS stands for Cascading Style Sheets. This lets us write our styles in one place and applies those styles to all elements on the page that meet that rule.

In the early days of the internet, all styling was done directly on that element or tag through the style attribute. This got unwieldy fast. HTML was not meant for styling, it was only for content and meta data. So CSS was created as a way for us to be able to quickly style everything and more importantly reuse styles across multiple pages.

The cascade

CSS uses multiple inheirtance. This means multipule rules can apply to any element or tag. This is by design.

A new rule doesn't immediately overrule everything in the old rule, only the attributes defined in the new rule will be overwritten. This can seem counter intuitive but is very helpful as you can write base helper classes to apply to all sorts of elements.

There are three basic types of rules:

  • elements
  • classes
  • ids

Each one of these "weighs more" than the other.

Elements are the tags. This is equal to a weight of one.

Classes are an attribute on the tag. They look like class="red". This is equal to a weight of ten.

Ids are special. They refer to one element. They are an attribute on the tag. They look like id="title". This is equal to a weight of 100.

You can add these three elements together to build complex rules to apply to only some of the elements. There are also psuedo classes and selectors to build more complex statements, but we will stick with these three rules for now.

Styling the page

I am going to start with three rules.

<style>
* {
        font-family: sans-serif;
}
body {
        padding: 3rem;
}
h1, h2 {
        font-family: serif;
}
</style>

Font-family

I don't like how the entire page is in a serif font. So I am going to use the universal selector * to make everything use the font-family of sans-serif. The universal selector has a weight of zero. Any rule overwrites it.

By using font-family, I am telling everyone's computer to use what font it has installed by default that is a sans-serif font. This means someone that is using a Mac may see a different font than someone using Linux or Windows. I could specify which font to use but then I should also include a link to download the font if they don't have it.

The third rule has both h1 and h2. This is because I like having the headers have serif fonts so I am reapplying it.

Padding and margins

I want more spacing around the page. The next rule I am going to write will add a padding of 3rem.

Think of every element in HTML as a box. Padding is how many packing peanuts you add inside the box. Margins is how much wrapping paper you put around the box.

Rem and em

Rem and em are special measurement units. CSS can use all sorts of different measurement units like pixels or percentage of viewport. Em is the font-size for that element. Rem is the base font size for the entire document.

I like to use rem because it doesn't change while the rules are being applied. CSS is compiled from the top of the document down so if something changes the font-size later on an element, you can have everything be one em but be different pixel sizes. It gets confusing fast. If I use rem, that doesn't happen.

Browser window with peanut butter and jelly recipe in it. There is more spacing around the items and the body text is sans-serif

Everything is looking pretty nice but if you have a big monitor there is all this extra white space on the right side. I want to center everything in the main window.

I am going to add a main element <main></main> to wrap everything inside the body. This will let me set the size of the document so I can make it centered. It also lets assistive technologies know where the main content is.

I am also going to add a new CSS rule.

main {
        width: 500px;
        margin-left: auto;
        margin-right: auto;
}

Width

I am declaring the width of the main element as always 500 pixels. This forces the text on the page to wrap and will make scrollbars appear on small windows. But by doing this I am now able to center the main content on the page by setting the left and right margins to auto.

Browser window with centered peanut butter and jelly recipe.

References

There are tons of other attributes available to style. From colors to borders to directions and more.

A good resource to look at is the W3Schools' CSS Reference.

All the code from today is available on my html-starter repo