In this issue
  1. Design Thinking: How to Take a Critical Look at Your Blog 12 min read
  2. How To Build Your Own Website From Scratch 6 min read
  3. How to Choose the Best WordPress Theme for Your Blog 8 min read
  4. Why Color Theory Matters for Bloggers (And how to use it) 10 min read
  5. How to Design Your Website if You’re Not a Designer 11 min read
  6. How to Choose the Best Fonts For Your Blog 12 min read
  7. How to Create Graphics for Your Blog 9 min read
  8. How to Understand the Code on Your Blog 6 min read
  9. 101 Resources to Make Your Blog Beautiful Every Time 3 min read

Experience this issue your way.

Download this issue of Tradecraft as a PDF to read and reference at your own pace.

Download PDF

Issue #5

How to Understand the Code on Your Blog

Digital Marketing

It’s hard to believe there was once a day when only designers and developers could create websites. Now we have pre-made templates, blog themes, and platforms that make it easy for anyone to build their own site. No need for a background in design or years of coding, all you need to do is find a content management system you’re comfortable with, a theme you like, and then navigate a drag and drop editor to get the job done.

But while these blog templates and WYSIWYG editors enable you to put your website up over a weekend, there still may be times when you need to add a little extra customization to hit your branding standards. When those times come, you’ll need to be familiar with HTML and CSS.

Now, don’t let those acronyms scare you. Today we’re going to decode the coding. We’re going to talk about what they are, what they do, and how you can use them for some very basic customizations for your website.

HTML and CSS defined

HTML and CSS are two coding languages that are independent of each other, but both work together to make your website look good. HTML, or HyperText Markup Language, is a set of tags that give content structure and meaning by defining it. CSS, or Cascading Style Sheets, style the appearance of your content. It tells the browser what the content in those tags should look like.

Basically, HTML is the cake recipe and CSS is the decoration on the cake.

Now we’ll dive into the details of what these two languages look like and how they are used.

How to recognize HTML on your blog

HTML tags are the opening and closing tags that surround the content of your website that create structure. They are the basic building blocks for web design. For example, these tags separate headers from the body content and create paragraphs inside the body content. You’ll recognize them as the content enclosed in carrots (<>).

You won’t need to actually know all the HTML tags unless you’re planning to create your website from scratch, and I’m guessing you’re not planning on doing that. But it’s still good to recognize the most common HTML tags for when you might want to edit bits and pieces of your website.

Here are the most common HTML tags:


  • <html>: Wraps around the whole page.
  • <head>: Contains important information that isn’t visible, but tells the browser how to display your page correctly. For example, linking to web fonts and stylesheets, as well as meta information important for SEO.
  • <body>: This denotes everything you see in the browser.
  • <div>: These are your building blocks. Think of them as a container unit that encloses other page elements and divides the HTML document into sections.
  • <span>: Span tags are for adding a style to something without putting it in it’s own div tag.
  • <h1>, <h2>, <h3>: These are your heading tags. H1 is the largest heading and the sizes gets smaller as the heading number gets higher.
  • <p>: Paragraph tags tells the browser the text should be on a new line and adds space between paragraphs
  • <a>: Anchor tags create links (<a href=””>) that tell the browser where to go.
  • <img> Image tags look like this: <img src=”/image.png”>  They’re how images are displayed in HTML.
  • <ol>: These are your ordered list tags that are numbered.
  • <ul>: These are your unordered list (bullet points by default)
  • <li>: This tag stands for list item, so each point on the list. They can be styled to get rid of the bullet point.

Always remember when using HTML tags that you need to close them off when your item ends. That means you’ll add a backslash to the beginning of the tag. For example, at the very end of your page, you’ll add </html> to close everything out.

How to recognize CSS on your blog

CSS is the style sheet language used for describing the presentation of your website. In other words, it’s what makes your site look the way you want it to. It defines everything from color and margins to lines and background.

A line of CSS has a very particular set up. First you call a class or tag then you put the styling instructions within curly brackets. The property is the part of the page you want to change and goes on the left. The value is the bit you change to style how you want and is on the right. Both are separated by a colon. Every line ends with a semicolon (if your styles don’t seem to be working, it’s often because you forgot a semicolon or to close a curly bracket!)

Once it’s all done you will have a line of CSS that looks like this:

How to Recognize CSS on Your Blog

There are endless possibilities for styling in CSS, but here are a few basics you’ll likely need to deal with when editing your own site:

  • Hexadecimal values for colors – These are the numbers that tell a browser what color to display on your page. You can find the right HEX color with a color picker.

hex-colors example

  • Styling text- The main ways you can change your font are
    • Font-size
    • Text-align
    • Font-family

text-styling exmaple


  • Hover states- Use :hover in CSS on the tag or class name to change how it appears on hover


  • Padding and margins- Padding makes space inside the element while margin adds space outside of it.

margin padding example

For everything else, here is a great resource to look to for a CSS property list:

And if you want to dive a bit deeper into learning enough code, here are a couple great places to start:

Make your own website edits today

With these basic lines of code, you can feel ready and able to make small customizations to your website. Want a bigger font for your header? You can do it with by changing the font-size for h1 in the stylesheet. Want to create a bulleted list on your homepage? Now you know how with your <ul> tag.

The possibilities are endless, but don’t go too crazy. Remember, a well designed site is a simple site.

Dani Stewart

As a daughter of an entrepreneur, the wife of an entrepreneur, and an entrepreneur herself, Dani has lived and learned all sides of creating and growing businesses. She is excited to bring all that life experience as well as a decade of crafting content to the ConvertKit community. She is a part-time baker, dinner-party planner, and lover of good bourbon living the simple life in Nashville with her husband, Sean.

Ready to earn a living online?

Download the Essential Blogger Toolkit and get started today.

The future belongs to creators

ConvertKit helps creators like you take their projects from idea to reality. It's never been easier to build an audience and grow a business. And you can do it all for free.

Launch your next project