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.
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.
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
.
Type this into your HTML editor:
This is the text that I want to affect.
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!
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.
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.
How about a box set aside as a tip.
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.
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.
No comments:
Post a Comment