I don’t know about you, but when I started blogging, I made a ton of mistakes.
My headings were all over the place in size and color, and it looked like I was shouting random statements at my reader(s). (Sorry, Mom!) My text was long and wordy and my photos were all different sizes and often took up the entire post, which in the end…just looked awkward.
I had a “little bit of this, little bit of that” mentality when formatting my blog posts. Bottom line: it looked like a sugar cookie decorating session gone wrong. Somebody take away the sprinkles!
Now don’t get me wrong, having a blog with some stand-out personality is a beautiful thing.
But it wasn’t until I really started reading other bloggers’ posts that I finally started to understand the idea of balance. By balancing out their designs, I could instantly connect with their message which kept me coming back to their blog every week for more.
I was finally able to understand that connection is what makes this whole blogging thing all worthwhile.
Connection is everything.
Connection is important.
And to foster that connection, I had to get serious about getting my site to look, well, serious.
Cue learning the style language of the web: CSS!
Now, HTML structures the content on your page, and CSS, or Cascading Style Sheets, is used to style that HTML and give it colors, fonts, and what have you. Your browser interprets that HTML and CSS to display your web page the way you designed it to look, down to the very last detail. These styles can get packed together in a style sheet and applied to your website as a whole, OR they can be added to individual HTML elements to affect only that element, not the entire site.
Today we’re going to be covering how to style individual elements, a process also known as inline styling. You can edit inline CSS right from the text editor in your blogging platform. ::fist pump:: So, get ready to style those must-know HTML tags for a standout blog post!
Inline Styling with CSS
Inline styles are the easiest, most basic way of applying styles to a particular element, in that you apply the styles directly to the HTML tag. For example, this is an inline style:
And the resulting look:
Purple Headings Are Fun!
We’re adding the purple color to the header by using the style=”” attribute and targeting what we’d like to style. In order to get our sassy purple styling, we had to target the right CSS property (in this case, color) and assign that property a value (purple).
For this example, we chose to style the color of the header tag by adding style=”color: purple;”. Notice the colon (:) after the property and the semicolon (;) after the value. These signal to the browser that you are applying a style that you want to see translated onto your web page.
We could also take our example one step further and decide to target more than one property at a time:
And the new look:
Purple Headings Are Fun!
Here we’ve targeted the CSS properties ‘color’ and ‘font-size’, and set the value as ‘purple’ and ‘18px’ (pixels). Both styles are wrapped within the same style=”” attribute and separated with a space.
Now something to keep in mind, is that inline styles must be applied to every element you want them on. So in our purple header example, only that particular header will be purple. The purple color won’t, in fact, be applied to every header on your site.
This is exactly why inline styles might not always be the most appropriate method in which to style your site, but if you’re looking to add a little bit of personalization to one element, they can be a great trick to have up your sleeve.
Say you are a style blogger and you’re doing a post highlighting a moodboard full of Radiant Orchid inspired looks for the fall. You could style your header text on that post to be Radiant Orchid in color, and you could go one step further and apply a border of Radiant Orchid to your moodboard right from your blog post.
Inline styles can also be used to remove style elements that you don’t care for. For example, you have a fantastic guest poster that wants to do a story on your blog! You’ve promised them a beautiful bio image right at the end of the post. But, when you go to upload your image, your blogging platform is adding a tacky looking border around the entire image. Where did that come from?
Likely, this is a result of styling elsewhere within your site. Remember those other methods of adding CSS that we discussed earlier? Yup, that could be the likely culprit!
With the same CSS tricks we learned above, we can edit the border right out of the image:
Just check out a few examples of properties you can style using CSS:
- The CSS color property defines the text color to be used for the HTML element.
Ex: purple, orange, #ccc (hex code for grey)
- The CSS background-color property defines the color of the background to be used for the HTML element.
Ex: blue, green, #a6278b
- The CSS font-family property defines the font to be used for the HTML element.
Ex: Times New Roman, Arial, Georgia
- The CSS font-size property defines the text size to be used for the HTML element.
Ex: You can set a size using various references including px, em, and %
- The CSS border property defines the border weight, color, and type to be used for the HTML element.
Ex: Setting the border to border: 1px solid black; will give you a thin, solid, black border around your element.
The list of potential properties and corresponding values goes on and on. You’re only limited to what you’re willing to try. Which also means you could easily try out several styles on various elements to find the exact look you’re going for. If you don’t like it, remove the styling.
But before you start styling away and adding little bits of personality, make sure you’re keeping your site’s overall look and feel in mind. My mother’s warning about decorating sugar cookies rings true: “Less is more, Libby!”
While extra sprinkles and gobs of frosting might taste yummy, it’ll look a complete mess! The same rings true for your CSS—don’t overdo it and be mindful of the styles you’re putting into play.
Because at the end of the day you want to be connecting with your audience, not just piling on the sprinkles.