%20Logo_BlueOrange_Trademark.png?width=800&height=269&name=Ready%20North%20(RN)%20Logo_BlueOrange_Trademark.png)
.jpg?width=300&name=Services%20Hub%203%20(3).jpg)
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.
- CSS, or cascading style sheet, is everything else—skin color, height, hair length, plumpness, shoe size, etc. CSS gives your page its shape, width, height, color, spacing and alignment.
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:
<p style=”color: red; text-align: center;“>This is my paragraph text.</p>
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
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."
Hello World
You can align text "left," "right," "center" or "justify" on the page.
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.
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.
hello world
Automatically capitalizes the first letter of each word within a block of text.
Hello World
Automatically converts each letter within a block of text to uppercase.
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.
Sample Code
<li>Hello World</li>
<li>Hello Again World</li>
<li>Yoo Hoo, Hey World!</li>
</ul>
- Hello World
- Hello Again World
- Yoo Hoo, Hey World!
You can create bulleted lists (<ul>) or numbered lists (<ol>) using most CMS editors.
<li>Hello World</li>
<li>Hello Again World
<ol>
<li>First bullet</li>
<li>Second bullet</li>
</ol>
</li>
<li>Yoo Hoo, Hey World!</li>
</ul>
- Hello World
- Hello Again World
- First bullet
- Second bullet
- Yoo Hoo, Hey World!
Make sure any sub list's HTML tags are bookended by the <li> </li> of the bullet the sub list will live under.
<li>Hello World</li>
<li>
<p>Hello Again World</p>
<p>How are you today?</p>
</li>
<li>Yoo Hoo, Hey World!</li>
</ul>
- Hello World
-
Hello Again World
How are you today?
- Yoo Hoo, Hey World!
Make sure all paragraphs are bookended by the <li> </li> of the bullet they will live under.
Images
This is likely where you’ll do most of your styling as image presentation can be changed in a variety of ways. Depending on your CMS, you may or may not have access to these style instructions.
Sample Code
Sample Text
As noted earlier, images are one of the few HTML tags without an end tag.
Sample Text
Borders take three parameters: line thickness (4px), style (solid, dotted, dashed, etc.) and color (hexadecimal, RBG or primary color name).
Sample Text
Use pixels to define the angle of the curved corners. The more pixels, the wider the curve.
Sample Text
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.
Sample Text
Adds a buffer around the image so text and other page elements don't butt up right against it.
Sample Text
Floats an image off to a specific part of the page (left, center, right). All other page elements will then wrap around it.
Sample Text
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.
<tbody>
<tr>
<td>Hello<br>World</td>
<td>It's</td>
<td>Keith</td>
</tr>
<tr>
<td>Goodbye</td>
<td>World</td>
<td>Love<br>Keith<br>Moehring</td>
</tr>
</tbody>
</table>
| Hello World |
It's | Keith |
| Goodbye | World | Love Keith Moehring |
Within a table, there are a number of different HTML elements:
- <table> Defines a table.
- <tbody> Groups the body content.
- <tr> Defines a table row.
- <td> Defines an individual cell.
- <th> Defines a header row, which can have a different style from other rows.
CSS can be applied to any of the above.
<tbody>
<tr>
<td>Hello<br>World</td>
<td style="vertical-align: top;">It's</td>
<td style="vertical-align: top;">Keith</td>
</tr>
<tr>
<td style="vertical-align: bottom;">Goodbye</td>
<td style="vertical-align: bottom;">World</td>
<td>Love<br>Keith<br>Moehring</td>
</tr>
</tbody>
</table>
| Hello World |
It's | Keith |
| Goodbye | World | Love Keith Moehring |
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.
<tbody>
<tr>
<td style="width: 50%;">Hello<br>World</td>
<td style="width: 20%;">It's</td>
<td style="width: 20%;">Keith</td>
</tr>
<tr>
<td style="height: 150px;">Goodbye</td>
<td>World</td>
<td>Love<br>Keith<br>Moehring</td>
</tr>
</tbody>
</table>
| Hello World |
It's | Keith |
| Goodbye | World | Love Keith Moehring |
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.
<tbody>
<tr>
<td>Hello<br>World</td>
<td>It's</td>
<td>Keith</td>
</tr>
<tr>
<td style="border: 3px double #FF0000;">Goodbye</td>
<td>World</td>
<td>Love<br>Keith<br>Moehring</td>
</tr>
</tbody>
</table>
| Hello World |
It's | Keith |
| Goodbye | World | Love Keith Moehring |
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.
Like this? Subscribe to the PR 20/20 Blog!
COMMENTS