Lesson 2 – Basic Text

Normal Text

When building a website, or just playing about with HTML, all of your normal text should be written in between these two things called tags: <p>Writing here</p> The little “p” stands for paragraph. If you do not use these two tags, then your text will just become a hideous font, depending on your web browsers standard font, font size etc. This is how you can jazz it up with CSS (remember, this is just an example):

p { text-align: left; text-indent: 5px; color: #000000; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Text-align, basically, is whether you want your text to be centered, to the left, or to the right, like on Microsoft Word. It’s your choice which one you want, but most people choose left, sometimes center.
• Text-indent is optional. As you would expect, it gives you a margin, or indent. If you choose to add this, then it is completely customizable.
• Color is what it is; the color of your text. This has been written in something called hex colours, but you can just say “Black” or “Yellow” for instance. I will come onto hex colours later.
• The font section in my view is the most important bit. This will sort out the size of your font, and what you want your font to be. You should always specify more than one font, just in case somebody doesn’t have that font on their computer. If you want to see examples of font sizes, just check it on Microsoft Word, with the view at 100%. Once again, it is your choice what you want.

Bold Text

Bold text will just look like the writing above really. There are two common ways of tagging bold text, and that is with <b></b> tags that stand for bold, and <strong></strong> tags. It is your choice which one you wish to use. CSS wise, there isn’t much you need to add, compared to normal text.

b or strong { text-align: left; text-indent: 5px; color: #000000; font: bold 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• See the text I have put in pink. Those are is the differences. All you have to put is “bold” before your font and font size (which is compulsory), as well as changing the name to something other than “p”.

Italic Text

Italic text looks like this. Again, there isn’t really much to do. You just have to add some words, like you did for bold text. Also, you have two choices of tags – <i></i> or <em></em>.

i or em { text-align: left; text-indent: 5px; color: #000000; font: italic 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Once again, just two differences, in pink once again. Change the name, and put italic in front of the text (that part is compulsory).

And that is that. You already know what HTML & CSS were. Now, you know how to write normal, bold, and italic text. See, it wasn’t that hard, was it? Good luck with your CSS!