If you haven’t already, check out our first article in the “HTML Basics For WordPress Beginners” series, available here.
Part Two: Styling Our Text With Tags
In our first lesson, we covered how to use the <a> tag to embed links on our webpage. Now we’ll be looking at some quick and easy ways to style our text on the fly. Let’s dive right in…
This text is about to be <strong>bold</strong>.What will be
displayed:
We just made use of the <strong> tag that will make our text elements bolder and help them stand out. Again, like the <a> tag we reviewed, there is an opening tag: (<strong>) and a closing tag (</strong>). Let’s try out making something italic
This text is about to be <em>italicized</em>.What will be
displayed:
Again, we can see the effect that our <em> tags have on the text that they are surrounding (as always, being sure we use both the <em> and </em> tags to wrap around the text to which we want to apply our italic style. Now let’s underline some text…
This text is about to be <u>underlined</u>.What will be
displayed:
We are able to underline text using the <u> tag. I’m sure that by now you are seeing a pattern of how our tags, wrapped around our text elements, are creating the various styles we’ve seen so far. Just as I did in the previous article, I’ll emphasize how important it is to close our tags (i.e. <b></b>, <em></em>).
Let’s take a look at all our styles in one line:
I'm <strong>important</strong>, while I'm <em>sarcastic</em>, and I should be <u>remembered</u>.What will be
displayed:
So what if we want some text to be bold and italic? Calm down, I’ll show you right now…
This text is<strong><em>bold and italic</em></strong>.What will be
displayed:
Notice how the <em> tags are nested within the <strong> tags. Imagine that the tags represent a box, and each style is its own box. We are putting our text into our italic box (<em>) and then taking our text in the italic box and placing it in the bold box (<strong>). Now let’s have a look at the <font> tag…
This text is<font color="#0000CC">red</font>.What will be
displayed:
Ok, so if you’ve had very limited exposure to HTML, you’re probably asking yourself “What exactly does #FF0000 mean?” First things first, looking at the <font> tag we see that similar to our <a> tags we have an attribute (color) with a value of #FF0000. #FF0000 is a hexadecimal color value that all browsers will recognize (and yes, the # sign is important). For more information about HTML colors, check out: http://www.w3schools.com/tags/ref_colornames.asp; it’s a great resource.
We’ll also find that we’re able to use actual color names as well, like ‘blue’, ‘red’, ‘green’ and ‘honeydew.’ Again, the full list of color names and their HEX values is available at: http://www.w3schools.com/tags/ref_colornames.asp; definitely worth clicking into and browsing for a minute. Let’s try some colors out.
All the colors of the rainbow: <font color="red">Red</font>, <font color="orange">Orange</font>, <font color="yellow">Yellow</font>, <font color="green">Green</font>, <font color="blue">Blue</font>, <font color="indigo">Indigo</font> and <font color="violet">Violet</font>What will be
displayed:
Don't matter if you're <font color="black">Black</font> or <font color="white">White</font>What will be
displayed:
What's the difference between <font color="greenyellow">Green Yellow</font> and <font color="yellowgreen">Yellow Green</font>?What will be
displayed:
So now you have acquired a great deal of power from learning about the <font> tag, but with great power comes great responsibility. Do Not Abuse These Tags on your website. Color styles are neat, but you don’t need your professional website looking like the Rainbow Connection. So please, as a professional web designer I am asking (maybe even begging) you not to overuse these tags. Practice moderation in life and design. That being said, have fun!