Introducing the AI conference just for marketers

Simple HTML & CSS Tips for Landing Pages & Blog Posts

A polished landing page or blog post can mean the difference between conversion and lost opportunity. Fortunately, content management systems (CMS) exist to make creating, updating and testing websites easy for anyone who can use a word processor.

The What You See Is What You Get (WYSIWIG) editor found on most CMS platforms allows for freedom in terms of how copy, images, tables and other elements are presented on a page. In most cases, you don’t need much more.

At the same time, even the most advanced CMS platforms will have limitations, and at times, misplaced styling or bugs can disrupt your page.

Fortunately, even a cursory understanding of HTML and CSS can help to overcome these issues, and give you greater flexibility in how a landing page or blog is presented.

In this post, I’ll walk you through how to navigate the HTML window available in your CMS, and how to apply some styling not necessarily available through your CMS editor.

Please Note: By no means is this intended to be a complete overview. If you are interested in a more in-depth understanding of HTML and CSS (recommended), I suggest signing up for either Codecademy or Treehouse.com.

One other quick note: Some of what is presented below may not be applicable to WordPress sites, as the styling is applied a little differently.

Back to Basics: What are HTML and CSS?

Think of HTML and CSS as the two components that make up the human body:

HTML is the skeleton, or the structure of your web page. Its tags designate the essential components of the page, including headlines <h1>, paragraphs <p>, images <img>, tables <table>, links <a href...>, etc.

If your website lives on a CMS, a developer has likely already built and installed CSS templates for landing pages and blog posts.

The reason we are able to edit the style of particular page is because CSS is “cascading,” which means anything applied directly to an HTML element overwrites anything previous declared. This type of style editing is known as inline CSS.

How to Apply Inline CSS

Every HTML element created by your CMS editor will begin with an open carrot (<) and end with a close carrot (>). In most cases, HTML elements have two sets of these, as the HTML element has a starting declaration (<p>) and closing (</p>). For example, if I wanted to designate a paragraph of text as such, I’d use the following HTML tag:

<p>This is my paragraph text.</p>

The closing HTML tag always includes a forward slash. An exception to this rule is an image, as everything needed to display the visual is contained within one set of carrots:

<img src=”...” />

In most cases, adding inline CSS requires you to embed a style marker (style=” “) to an HTML element. For example:

<p style=”color: red;”>This is my paragraph text.</p>

You can add more than one CSS instruction to an HTML element by including a semicolon (;) after the first CSS instruction. For example:

Example HTML and CSS Code

Following are some example CSS styling instructions applied to common landing page and blog HTML elements. Simply select an option from the dropdown on the left, and an example of the code will be shown on the right.

A quick note: I’ve only included some of the things I use regularly. This is by no means intended to be a comprehensive list, or the only way to apply a specific format.

Page Text

The following code can be applied to all types of HTML text elements, including paragraphs (<p>) and headlines (<h1>, <h2>, <h3>, etc.). With text, you can also apply styling within an element using the HTML element <span> ... </span>. For example, <p>I only want the word <span>Red</span> to appear in red.</p>

Sample Code

<p>Hello World</p>

<p style="color: #FF0000;">Hello, World</p>

Hello World

You can use either hexidecimal color codes, RBG or simply write the name of a primary colors, such as "red", "blue" or "black."

<p style="text-align: center;">Hello World</p>

Hello World

You can align text "left," "right," "center" or "justify" on the page.

<p style="text-indent: 30px;">Hello World</p>

Hello World

Indentation is measured in pixels from the edge of the object the HTML element is contained in. In your landing page or blog's case, it is likely the edge of your editor window.

<p style="font-size: 3em;">Hello World</p>

Hello World

Use "em" as the unit of measure. 1em is the equivalent of the text size a person's browser is set to. Some individuals may increase the browser text size for easier viewing. 2em is double the size of 1em, while 0.5em is half. You can also use point (pt) or pixels (px) to size text, but these are predefined measurements and may not display correctly relative to how a person's browser is set up.

<p style="text-transform: capitalize;">hello world</p>

hello world

Automatically capitalizes the first letter of each word within a block of text.

<p style="text-transform: uppercase;">Hello World</p>

Hello World

Automatically converts each letter within a block of text to uppercase.

<p style="text-decoration: line-through;">Hello World</p>

Hello World

Adds a line through any associated text.

Bullets

While bullets are easy enough to create using the WYSIWYG editor, there are a couple things you can do to make them fit better to your content.

Be careful not to warp the original image size. If you're not sure what the height dimension should be compared to a desired width dimension (or visa versa), simply add a width dimension; the height should automatically adjust proportionality. Also, it's a good idea to upload an image to your CMS at approximately the size it will be displayed on your site. The more a CMS has to adjust the size, the longer the image takes to load.

Creating a shadow requires 4 parameters: horizontal offset (4px), vertical offset (5px), blur (6px) and color. Use negative numbers to move the shadow to the left and top of the image. Adding "inset" before the horizontal parameter moves the shadow on top of the image, instead of behind it.

Tables

Tables enable you to structure content and data on the page. In HTML, tables are always read left to right, top to bottom.

Unless otherwise defined, the tallest cell in a row will dictate the height of the row. Make sure cell text lines up by aligning the text vertically, either at the "top," "center" or "bottom" of a cell.

Change the size of a table or cell by defining its width and/or height in pixels or as a percentage. In the case of a table, the percent is related to the area the table lives in, which on your blog or landing page is likely the text area. A percent change to a cell is in relation to the table as whole. Any width size changes you make to one cell in a specific column, will then carry through to all other associated cells. The same goes for changes to a cell's height, and all other cells in the associated row.

Borders take three parameters: line thickness (4px), style (solid, dotted, double, dashed, etc.) and color (hexadecimal, RBG or primary color name). Adding borders to a table can get very complicated very fast, so I recommend checking out this post from Quackit.com for more details.