This guest post is by Andrew Couch of Learningwebbasics.com.
As a website owner it can be really handy to know a bit of web coding. The HTML editor in most blogging platforms gives you enough power to do a lot of cool things without any risk of screwing up your site.
Adding inline styles to elements is one of the easiest.
What are inline CSS styles?
CSS is the style language of the web. It describes to the browser how web pages should look to the last detail. These styles can be packed together in a style sheet and attached to a site as a whole. Or they can be added to individual elements to affect only that element, not the entire site.
This second way of applying CSS styles is called inline styling. These pieces of CSS are inline styles.
Why can they be the blogger’s best friend?
1. They’re easy to use
You can add an inline style in the HTML editor of your platform. Just a few pieces of code can go a long way. And all without hacking into your theme.
The most common element to style is the paragraph. An inline paragraph style would affect all of the text in the styled paragraph. In WordPress HTML editor you need to add the tags <p …> </p>.
Type this into your HTML editor:
<p style="border:1px solid red;padding:5px;">
This is the text that I want to affect.
</p>
This is how it’ll look in the visual editor, and the post itself:
This is the text that I want to affect.
P is the name of the element. It stands for paragraph.
Style is the name of the element that lets you define an inline style.
So border:1px solid red;padding:5px; is the style in the example. It adds a red border around the paragraph and a bit of spacing to keep the border from running into the text. Pretty easy!
2. They’re safe
Since you are working only in one post instead of the theme itself, there is no chance you could screw up your entire site. This is often a worry of novice coders—that one mistake could take down their site. Inline styles can give you a safe place to play with your creations.
Using inline styles could at most affect the one post you are working on. However if you use your blog’s Preview feature to look at the post before it gets published, you can reduce even that risk.
Styles only affect how specific elements look, not how the site functions. At most, mistakes mean the effect you are going for won’t be seen; they don’t result in a loss of functionality.
3. They are powerful
Many effects can be created on a specific element using inline styles. They do not need to remain as bland as changing the color, or be as functional as spacing out paragraphs.
How about a box set aside as a tip?
This tip callout floats next to your text and lets you push something out of the flow of the text to highlight it. It looks impressive, but is just a slightly more complex inline style.
<p style="padding: 10px; border: 1px solid #cccccc; background-color: #f9f595; width: 210px; float: right; margin: 0 0 5px 5px;">
How about a box set aside as a tip.
</p>
Why aren’t inline styles used more?
Themes for blogs and custom-built websites include a set of CSS rules that are attached to the site as a whole. This style sheet dictates how the site looks. This means you don’t need to use inline styles to achieve effects that fit within the overall theme style.
At a technical level, these overall styles are more efficient than using inline styles on every element. This just means that you would never use them to build an entire site. But inline styles are still very powerful and often overlooked as a way to impact certain elements in a single post.
Give inline styles a try
Basic knowledge of CSS can help you make small changes to the appearance of an individual post. It’s a simple way to make important parts of a post stand out, it can make your post look more professional, and it can break up the monotony.
Best of all, learning a few basics of CSS isn’t too complicated.
If you are intrigued about what CSS can do for you, check out the extensive list of examples at w3schools and their entire CSS section. These move beyond inline styles and into stylesheets, but can give you an idea of what’s possible for your blog.
Andrew Couch is a career web developer and author of a tech e-book for non-techs called Web Foundations for the Non-Geek. He also runs a travel blog at Ctrl-Alt-Travel with his wife.
In line styles often seem like a good idea, but can cause many issues that are not addressed by the article.
1) They increase the size of your pages to download. Especially if you use a lot.
2) They take precedence over other rules. So you are editing the styles on your site, and can’t figure out why this section isn’t changing.
3) You need to repeat this styling, but you don’t remember exactly what the style was used – so you have a lot of similar, but different styles throughout your site.
In my personal experience, I’ve used them. However, at some point, I almost always end of regretting it because of one of the above reasons.
This is why most professional designers would never advocate the use of in-line styles.
I would like to add
4) The inline styles you add to your posts are recorded in the database of your blog.
Not only does your database get bloated with this coding, if you ever decide to change the theme you will have to go through every single post (can you image Darren doing this?) looking for every single instance you used inline styling.
Whereas, if you had created a style in the associated stylesheet, changed themes and didn’t recreate the style nothing happens. The style reference is ignored and no formatting is applied.
I have cleaned up and problem solved a number of sites and blogs where the owner used inline styles and then wondered how come, after learning to use an external CSS file, why the content isn’t doing what they wanted.
The order CSS is applied is important.
1. Your external stylesheet.
2. Internal stylesheet in the head section of your page(s).
3. Inline styling
The styles are applied in the order the browser reads them:
#2 overrides #1.
#3 overrides #1 and #2.
The aim of the post was to show bloggers without access or money to have a professional designer how they can affect a single post with a bit of “wow”. I definitely do not advocate their use on every post or as a way to change the site as a whole, especially as you say with #3 if you are reusing the same styles over and over.
1) If you use the inlines sparingly it is no different change in the download size than having an extra sentence of text.
2) That is definitely a good point. I picked examples that I felt would likely stay styled that way even if the entire site changed. The effect is the point in them. If you start playing with fonts and sizes, it can be more of a problem.
3) Again, the point was to show occasional highlighting of elements, not to make consistent site-wide changes. Perhaps that should have been more clear.
I still think they can be a very powerful tool for a blogger to make a post pop a bit more and are easy enough to be doing it without a professional designer.
I wish wordpress had automatic buttons to click to create these in their wysiwyg menu.
Plugin anyone?
I’m currently working on learning inline CSS because from what I hear it’s pretty easy for web designers to code custom (email) templates using basic HTML and inline CSS languages. Learning inline CSS will definitely help me tie into the MailChimp design inspector, so that I can tweak certain (email) design elements with out destroying my entire layout or design. This is a great topic!!!
I tried this code and it didn’t seem to work on my theme. But I did find a great plugin called “Insert Callout” that I was able to tweak and now it works great it my blog. Thanks for the post.
Building off Mr. Wimberly’s comment, inline styles also should be used very sparingly, because they can make upgrading the look of a website messy for web designers to unravel, thus costly.
For example, “responsive” web design is becoming a dominant method for creating one website design that works for big desktop screens, smartphones and most devices in between. The CSS stylesheet to do that takes a lot of thought at the front end to make the posts of varying content — text, galleries, embedded videos, shopping carts, etc. — work on all devices.
A designer of responsive sites told me that the more inline style used, the more time-consuming the conversion of a site to a new design. A site with few inline styles makes for a rapid and less-costly conversion. Consider: If you change your WordPress theme to something with a different color scheme, you will have to manually change all of the inline styles to avoid nasty or unreadable combinations of colors.
If you would like to have special styling like a colored sidebar, tip box or bordered paragraph, ask the designer to add a few styles like that to the stylesheet. For example, the yellow tip box mentioned in the post above could have the class name “post-tip” so all that would be needed is to change the P paragraph tag from <p> to:
<p class=”post-tip”>
Write the style once, use many times without fear of syntax errors. WordPress has added the ability for basic users to add CSS styles without huge knowledge of stylesheets. The key to keep from screwing up the design of the site is to use CSS class names that are very unique.
Often, designers will add a lot of styles that are used over and again, such as “italic” and “bold” and “font120″ for 12-point type. CSS styles can be grouped together, so each style doesn’t have to do everything, so the class part in the tag could be:
<p class=”italic bold font120”>
to specify all three styles for the same paragraph.
Thanks for the info about CSS. I have just recently started learning it and am very happy with the changes I was able to make to my limited WordPress.com blog.
I completely disagree with blogging with inline styles. I use embedded CSS at the end of my posts. It makes it MUCH easier to copy my code from one post to the next. Inline is a bad habit to get into, since it increases markup. SEO terms like “alt” and “title” bloat HTML enough as it is. I wrap all my posts in a descriptive one- or two-word div (with a dash to separate two words). On webpages, I use the external style sheet, targeting the page’s div. Inline is a last-minute emergency, just like !important.
Good post Andrew,
Another benefit of CSS is it’s a big time saver. You don’t have to cut and paste formatting or manage how 1000 individual posts look on your blog. One change sets them all based on how you organize your custom CSS.
However, if you are the type that tends to over do it please stay out of CSS and hire a professional. Too many tweaks can cause undesired results. Try to keep it simple.
Well I for one have used inline styles on a limited basis and learned some new techniques from the article. As far as the comment above about remembering what style is used Evernote is a great way of tracking these inline styles for use later. Thanks for a great post I have been looking for more information on this as to add more ‘flare’ to my site without breaking the theme of CSS as is known to happen with newbies.
Yes, inline CSS is useful but should be used sparingly. As previous posters have said, it can do weird or undesired things to your site, adds bulk to the page, and can end up being no better than the old (and thankfully almost dead) FONT tags.
If you find you are using a particular style a lot, consider putting it as a class in a global CSS file and then simply referencing that by doing something like <p class=”classname”> This means you can style particular paragraphs, DIVs, SPANs, images etc. in a similar way each time you want, say, a red border or a float. Can you imagine how painful it would be if you suddenly wanted to change 300 instances of a red bordered floating box to a green bordered one?
So, use inline CSS very sparingly, is probably the best advice.
This seems cool. These tricks wouldn’t be used often, only to make an occasional post more special. I definitely think I want to try these. It’s better than always using bold, italics, or font size to emphasize a small portion of text.
And you don’t even have to know the html code. Just know what you want to do and Google it and you will get lots of examples that are easily applied.