Using Inline Styles for Paragraphs and Headers

Inline styles are methods that anyone can use–even freebie accounts–to manipulate text sizes, fonts, and font colors. They’re fun and easy, but there’s a few tricks to dealing with them–without having to muck about with CSS.

Using Inline Styles

Using Inline Styles to color text is easy as 1-2-3.

1. We have to use the HTML tab (not the “Visual” tab).
2. We have to insert the code: <p style=”color: brown”>
3. We have to indicate the end of the paragraph with its closing tag </p>

And voila!

In the brown sentence above, the code looked like this:

There are 140 named colors available–and even more if you use hexadecimal colors. This page from WW3 school provides you with a great HTML color cheat sheet.

Changing Header Font

You can also use inline styling methods to change fonts for headers and paragraphs. The syntax for this is similar to that for changing the color for paragraphs:

(1) Use the HTML tab.
(2) Insert the tag (h1, h2, etc., or p) with the word “style” and an equal sign.
(3) Add the style declaration. (style=”font-family: your font name here;”  –and close it with an angle bracket >
) Enter the text you want for the paragraph or header
(5) End the statement with the appropriate closing tag.

Example <h2 style=”font-family: Georgia;”>Your title here </h2>

Some common mistakes in coding

The most common mistakes in creating inline styles are:

  • Missing the ending semi-colon in the statement.
  • Forgetting the quotes around the specifics of the style

If you forget just the end quote–the entire text after the first quote will disappear, until the browser encounters ANOTHER (possibly unrelated) quote mark. So you’ll be looking at the browser and find a large swath of text gone, and the format unchanged.

Changing the Font Size with Inline Styles

Crawlers look for us to have structure that makes sense. But I don’t always like having the H2 header at the top because it is SO DARNED BIG.
If you start to set the sizes of the fonts to absolute values, things get weird. Absolute sizes (measured in pixels or px) do not flow well with responsive design— the kind of design that your theme works hard to deliver to phones, tablets, and computers. I can use relative font sizes to make the fonts the size I’m looking for.

In this post, I’ve set ALL of the headers to a font-size of 150%.

<h2 style=”font-size: 150%”> Your title here </h2>  and then
<h3 style=”font-size: 150%”> Your title here </h3>


We can do lots with Inline Styles if we know HTML

HTML is fun and easy. There’s lots more we can do with it. If you want to learn, there are lots of resources out there. Here’s three great ones (from my previous post).

More soon ~ Lola.

Categories: Blog Design, Learning CSS and HTMLTags: ,

1 comment

Leave a Reply

%d bloggers like this: