HTML Tips for Bloggers: Intro to Styling

In the previous post, we’ve talked about HTML basics. Today, I’d like to expand on this topic by introducing the basic of using CSS for styling. CSS stands for Cascading Style Sheets and is used to apply certain style to specific HTML elements. For example, you could make only the second paragraph turned green by adding some codes to the second paragraph only. But first, we’ll continue our discussion from the first post by talking about formatting text.

If you need refresher on the previous topic, click here to go to the first post.

Formatting Text: Italicize Text

WordPress editor use the em tag (<em>…</em>) when you italicize text.
For example:

And the output:

However, there’s actually another way to achieve similar visual presentation, using the tag <i>….</i>. Check this out:

And the output:

The i tag slightly differs from em tag in the sense that i tag is used to format text that has different semantic meaning (such as different language, term) while em tag is used to emphasis something.

For more detailed explanation on the difference between <i> and <em>, read this article from MDN.

[ Back to top ]

Formatting Text: Bold Text

Like italicize, there are two tags that could accomplish this task: the <b> and the <strong> tags.
Wordpress editor in default uses the <strong> tag if we press the b button. There’s a slight difference between the two:

• the <b> is used to give a different presentation to a specific part of text, for example when creating a list of products, you might want to bold the name to differentiate it from the description. It does not mean that the product name is more important, rather it aims to help the visitors to quickly recognize that these bold texts are the names and the rest are the description.
• <strong> is used to highlight an important part of the text. For example, when you write a book review, you might put SPOILER WARNING in all caps and in bold to make sure the visitors don’t miss it.

Here’s how they look:

The output:

Not much difference, right? In most browsers, it looks exactly the same! You might ask, why do I care?
The simple answer is because search engine these days could read CSS and they value text in order of their importance. Using b and strong might achieve the same visual presentation, but googlebot will value strong more than b.

[ Back to top ]

Formatting Text: Underline Text

Underline used to be very popular when many webpages are written with almost no CSS and all hyperlinks are blue and easy to differentiate from other texts. These days though, it might be best to use underline very sparingly. Not only people might mistaken it for hyperlinks, underline doesn’t have a specific semantic meaning. You see, when you use strong, you mean to show its importance, when you use em it’s for emphasis, b is to differentiate some part of the text, and i has its place to mark special terms. But u? What does underline mean it’s not really clear. Some people avoid using it altogether, but I still use it now and then. Just be careful not to make it look similar to your hyperlinks.

The code:

And the output:

[ Back to top ]

Next, we’re going to start using CSS. This can be accomplished by applying style attribute on HTML element.

Add Styling Codes

In general, you can style HTML element in either one of these ways:

1. External CSS file
2. Internal CSS embedded in HTML document
3. Inline CSS applied directly on the specific HTML element

Free user of wordpress.com (like me) could only use the third method, so I’m only going to talk about the third method. Bear in mind, however, that the recommended method is actually number 1 (external CSS file). Inline styling (as in method 3) is usually frowned upon by web developer guru. However, the free version of wordpress does not give us access to modify the stylesheet, hence, mixing them we must. If you use paid version or in any way have access to your CSS file, I highly encourage you to put your stylesheet in your CSS file (the one that ended with .css). Not only it’s reusable and easier to maintain, it also has many benefits related to readability and loading time that I will not mention in details here.

How to add inline CSS

We can add style to an HTML element using style attribute. Here’s an example on how to add style attribute to <p> or paragraph element:

All the style rules will go inside the style attribute, between the two quotation marks, separated by semicolon.

Here’s how you make a paragraph text turned red and 20% larger:

The result:

Notice the semicolon between each rule and the colon between the property and the value. Note: example of properties are color, font-size, background, etc, while value is the value of the property, for example red, 120%, etc.

[ Back to top ]

Next, I’m going to discuss some of the common CSS properties that might be useful to bloggers. All the properties and their values must go inside the style attribute.

CSS Property: Color

Color property is used to modify the color of the text.

Therefore,

will turn the paragraph text blue. You can use hexcode or any acceptable color keywords as value for the color property.

Example:

Output:

[ Back to top ]

CSS Property: Font-Size

Font-size, as you can probably guess, is used to modify the size of the text. You can use either absolute number, in pt or px to declare the value, or use percentage. Personally, I prefer to use percentage so that it’ll always be proportional to the base textsize. Otherwise, if you change theme that use different font size, your text might look weird and out of proportion. Like this:

Output:

Compare to this:

Output:

[ Back to top ]

CSS Property: Text-Decoration

Alright, let’s do more fun things, shall we?
Text-decoration property is mostly used to put a line under, above, both above and under, or through text.

I rarely put a line over text, but you might find some use for it. Strikethrough, however, is quite useful.
Acceptable values for text-decoration are underline, overline, and line-through.

Here are the codes so you can see them in action

The output:

[ Back to top ]

CSS Property: Font-Variant

Technically, there’s only one use of font-variant property, that is to set some text to small-caps.
But what on earth is small-caps? Well, it looks like this when attached to a h4 element (of course, you can attach it to other HTML elements like p or span):

Output:

Pretty neat, right?
I might or might not have abused small-caps in the past just because I like how it looks. :p

[ Back to top ]

CSS Property: Text-Align

Like its name suggested, text-align property is used to set the alignment of specific text. Acceptable values are: left, right, center, and justify.

The codes:

The output:

[ Back to top ]

CSS Property: Border

Border property is one that allows you to be very creative. There are many things you can play with and modify.
It’s actually a shorthand of different properties: the first one is border width, the second is border style, and the third is border color.

For example:

will create a blockquote with dotted blue border with 2px width, it will look like this:

Quote

Then a strange thing happened.

The house whirled around two or three times and rose slowly through the air. Dorothy felt as if she were going up in a balloon.

The north and south winds met where the house stood, and made it the exact center of the cyclone. In the middle of a cyclone the air is generally still, but the great pressure of the wind on every side of the house raised it up higher and higher, until it was at the very top of the cyclone; and there it remained and was carried miles and miles away as easily as you could carry a feather.

You can modify any of these three (width, style, and color). For width, you can specify the unit or simply use “thin”, “medium”, or “thick”. Acceptable values for border style are dashed, dotted, solid, and double. For colors, you can use hexcode or any acceptable keywords.

Furthermore, you can even have different value for top, right, bottom, and left border. Simply divide the border property into 4 properties: border-top, border-right, border-bottom, and border-left then use the shorthand to specify width, style, and color for each.

Here’s an example of a blockquote with 4 different borders on each side:

The output:

“No matter,” replied Forster; “I think that by putting on the very highest speed we might have a chance of getting over.”

“The devil!” muttered Passepartout.

But a number of the passengers were at once attracted by the engineer’s proposal, and Colonel Proctor was especially delighted, and found the plan a very feasible one. He told stories about engineers leaping their trains over rivers without bridges, by putting on full steam; and many of those present avowed themselves of the engineer’s mind.

[ Back to top ]

CSS Property: Background

For background, you can use either color or image. However, if you use image it’s better to also specify a color so that if the image fail to load, the browser can fallback to the background color.

Example of using background color on blockquote:

Output:

It was lucky the Scarecrow and the Woodman were wide awake and heard the wolves coming.

“This is my fight,” said the Woodman, “so get behind me and I will meet them as they come.”

Example of using background-image:

The output:

We remained at Weybridge until midday, and at that hour we found ourselves at the place near Shepperton Lock where the Wey and Thames join. Part of the time we spent helping two old women to pack a little cart. The Wey has a treble mouth, and at this point boats are to be hired, and there was a ferry across the river.

Background is quite a complicated and interesting property, you can set it to repeat, set the position, etc. However, those topics are outside the scope of this introduction post. If you’d like to learn more about background, you can visit the background page on MDN.

---

There you go!
This post ended up much longer than I anticipated it to be. As usual, let me know if my explanation confuses you or if you have any correction/suggestion/question. You can also hit me up on twitter if you have any question/suggestion/rant.
Part 3 of this HTML Tips for Bloggers will (hopefully) be posted within the next 2 weeks.

See you next time!

---

Twitter | Follow my blog with Bloglovin

---

Windie
Twitter | Instagram | Follow my blog with Bloglovin