CSS Inline Styles: Enhance The Aesthetic Appeal Of Your Link Bait

If content is king, presentation is queen. An aesthetic appeal can make good content great link bait. Similarly, poor presentation can detract from a well-written, thought-provoking post. It’s important that the king picks a beautiful queen, regardless of whether or not he’s the cat’s pajamas. In this post, we’ll look at three simple CSS styles that you can implement to make your blog posts shine.

CSS, or Cascading Style Sheets, is the presentational language of the Web. Typically, styles are housed in external .css stylesheets, and referenced in the head of each HTML document. However, we’ll be concerning ourselves with inline styles, or CSS that’s added directly to the HTML. Let’s take a look at a simple example of inline style.

Here, we’re applying a red color to the text contained within the second-level header tags. We initialize inline CSS by using the style attribute, followed by the = sign. This is just like adding an href="" attribute to an <a> element. Within the style="", we can assign values to the CSS properties that we wish to alter. There are many CSS properties, some of which have more value possibilities than others. We’re going to keep things simple, though, so no worries.

We assign a value to a CSS property using this syntax: property: value;. Don’t forget the semicolon, as it signals the end of one property-value pairing. This is especially important when changing the values of multiple properties: style="property1: value; property2; value;". Let’s take a look at how our inline style renders on the page:

Pretty cool, huh? If you’re using WordPress, though, you can change the color of text using the visual editor – no need to apply an inline style unless you’re looking for a bit more control over the element’s color. Let’s look at a few styles that might prove useful when you’re crafting your next blog post.

1. Padding

Adding padding to your elements is a good way to protect them from other elements nearby. Safety first! In the second-level header above, I’ve used a top and bottom border to illustrate the effect that padding has on an element. Unlike the margin property (which we’ll touch on next), padding doesn’t increase the distance between one element and the next. Instead, padding adds space to the element itself. There are various syntaxes for the value of the padding property, but for now, we’ll stick with the following format: style="padding: 10px 0;".

The padding value is followed by the normal : and two values – the first being top/bottom padding, and the second being left/right padding. We’ll stick with pixels (px) as our units for now. In the example above, you’ll notice that I haven’t specified a unit for the second value (0). This is because the number 0 does not require a unit.

Okay, now for some application. Padding proves to be useful when you want to create a box to showcase some important information – perhaps some code, like I’m doing throughout this post. Let’s look at the code from the ‘1. Padding’ header above.

I’ve set a top/bottom padding of 10px and left/right padding of 0. Notice that the top and bottom borders are noticeably offset from the text, while the header remains aligned left with the rest of the text. That’s how padding works. Now let’s get to the border property!

2. Border

Borders are handy when you want to provide readers with a definitive barrier between one section of content and the next. When used sparingly and in the appropriate places, they can help to add structure to your posts. The border property can be split into many separate properties, but for now, we’ll focus on the border-top and border-bottom properties. Using these, we’ll be able to create a top and bottom border for our elements. The syntax we’ll follow is as follows: style="border-top: 1px solid black;".

The first value, 1px, designates the width (or height, actually) of the border. The second value, solid, tells us the type of border – solid, dashed, and dotted being popular choices. And the third value, black, designates the color of the border. This can be a color name (like black, a hexadecimal value (like #000000), or an rgb value (like rgb(0,0,0)). Note that each value is separated by a space.

Let’s check out an example.

Simple enough, right? Let’s see how this manifests itself on the page!

Awesome, right? You can use borders for all types of block elements, including images. A subtle image border can earn you a place in your readers’ hearts. Okay, onto the margin property!

3. Margin

The margin property will help when you want to create white space between one element and the next (say an image and a paragraph). You can create margin on all sides of an element, but for our purposes, we’ll focus on the margin-top and margin-bottom properties. Unlike padding, margin does not add space to the element. However, the two are easy to confuse. Think about it this way: Margin creates space outside of an element’s border, while padding creates space inside of its border.

Above, the padding is the space between the header text (‘3. Margin’) and its border, while the margin is the space between the border and the subsequent paragraph. Note that this white space is made up of both the bottom margin of the header element and the top margin of the paragraph element. Margin is added just like padding. I’ve removed the border styles in the code below to keep things less cluttered.

It’s a good time to mention that most elements that you’ll be adding inline styles to will already have certain properties defined in your website’s stylesheet(s). When you add an inline property-value style pairing to an element, you effectively replace any values for that property pulled from external stylesheets. This only applies to the singular element you’re styling, though! You won’t be editing any elements site-wide with inline styles!

Time and time again, we’ve written and read that quality content is what earns links, social shares, and general engagement. Let’s give design, at both the basic level of inline styles and the more advanced level of usability, some credit, as well. (Dan’s social media sizing guide is a great example of the content-design crossroads.) The styles outlined above are quite simple, but they can go a long way in making your content more digestible for users. Learn ’em. Love ’em.