| Styling your Text |
 |
 |
 |
| CSS - Basics | ||||||||||
| Written by Stuart Duncan | ||||||||||
| Saturday, 03 October 2009 12:53 | ||||||||||
|
The best place to start when learning CSS is with the text on your page. The main reason for this is that you can very easily and quickly see the results of your actions but you can also learn methods that can be applied later when you move on to more complex lessons. In this article I am going to show you how to manage your font, the size, weight, color and more but I'm also going to show you how to add some spacing to it and even change it's position a little.
Covered in this article:
1. Font StylingOne of the most common uses, and probably the very reason that CSS was ever conceived of in the first place, was to give a fast and easy way to style all of the text on your page with just a few lines. For the sake of this article, I'm going to assume that your text is found within <p> tags. This is the most common practice, especially if you use a script such as wordpress, joomla or other editors to make your posts/articles for you. Your text is almost always found in <p> tags however you could really have your text in just about any tag, including <td>, <center>, <span> or even <body>! As long as you reference the tag where your text is found, it's not important to this article which tag it is. Providing your text is found in a <p> tag on your page, you should start by having this in the <head> section of your HTML to begin:
If you have not seen this before or need more information on this, please review my earlier articles on CSS for more. It is in between the curly brackets that we will beging to do our CSS work. font-family: This is the attribute which dictates which font the text should be displayed in. Don't worry if you don't understand exactly what that means, you're about to see it. Your first entry to make your text look different is the font-family attribute. You can tell the text to use a particular font family by using an entry such as font-family: arial;. To see what this looks like in use:
Reload your HTML page in your browser and the look of your text should change ever so slightly. Clearner lines, rounder corners, easier on the eyes. This is one of the few CSS attributes which can take more than one option and the reason for this is that maybe not everyone has arial as a font on their computer. If they don't, what should their computer do? Well, you can give it more options... for example: There is a list of of some popular fonts that spans most every type of computer and operating system. If a person doesn't have arial, chances are they do have verdana. If not, then try helvetica and so on. As an aside, if you are looking for information on the safest choices (and what they look like) for fonts, visit CodeStyle.org.
font-size: One big issue that people have had with fonts over the years is that people can change the font size of their computer, which will affect the font size of the websites they visit which will ultimately break the nice new design you just worked for days on. The solution to this is to use CSS to force your font sizes to stay as they are no matter what the user does. For the purpose of this article and to make the change very noticeable, we're going to ramp up the font size quite a bit so you really see the difference. Example:
You will notice that I didn't just specify a number, I used 16px. The reason for this is that computer screens use pixels to display information to their screen. Your screen and your browser measures how many pixels there are in an inch and displays information based on that measurement. There is another measurement that can be used which is em but that discussion is for another article. For now, just know that you have to specify a pixel size for your font. Feel free to change that number a few times and reload your HTML page to see what it does. Change it to 4px, 22px... anything you like.
color: I know what you're thinking, shouldn't it be font-color? Not this time. For what ever reason, they left the first part out and it's just color. It is strange and you'll likely put font-color the first few times and wonder why nothing's changed but you'll get used to it eventually. As you can imagine, this changes the color of your text. Like regular <font> tags, you can use words such as red, blue, green, or you can use those hard to remember hex codes such as #ff0000, #0000ff, #00ff00. And it looks something like this:
Again, change the colors to green, blue... purple... anything you like and reload your HTML page each time to see how it changes.
font-weight: When you think of a font's weight, think of it as being either thin, normal or bold. There are a few options here: font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: 100-900; Obviously the normal option is obvious, and bold makes your text bold. The bolder and lighter options simply make the text one step bolder or lighter than it was previously. Since you can make multiple changes to a text's style, you could bold something several times bolder than when it started. The numbers 100-900 are a numerical representation for weight, where 100 is the lightest and 900 is the heaviest (boldest). Usually, normal is represented by 400, and bold by 700. Our example:
Again, change it up a bit and see what the differences are and how much freedom you have over your text.
font-style: The style is generally used to make your text italic but there is also normal and oblique. Don't feel like you've been missing out on anything if you've never heard of oblique as an option before. For most browsers, it's just another way of saying italic. This one is pretty straight forward so adding to our example:
text-decoration: This attribute is most widely used on links (yes, you can use any of these font modifications on <a> tags) as this will add or take away underlines, over lines, put a line through it or even yes... the old school blink effects. text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink; As I said, many people use this as a way of removing the default underline that browsers put on links. If you use it in combination with the other attributes, such as color, then you can make your links stand out without the underline.
Give it some of the other options a try.... like blink!
2. Spacing and PositioningSometimes you'll find that you want text to come up next to an image or design element and it just doesn't seem to sit quite right. Either too close or too far... in this case, we've been using <p> tags and that has been known to add spacing around it by default which may make it further away than you'd like. There are 3 options we're going to cover in this section and they are padding, margin and text-align.
padding: Padding is the space around your text (or any other HTML element you use it on) that pushes everything away. In the case of your text, if you had it inside a table, the table may put it's borders as close to the edges of your text as possible but with padding, you'll have plenty of space around the text to make it not look so crowded. Padding in CSS looks like this: padding: 0px 0px 0px 0px; What you have to keep in mind is that your text has 4 sides... a top, right, bottom and left. I say them in this order because that's how CSS sees them. The first 0px is the top, the second is right, 3rd is bottom and last is left padding. This allows you to adjust them in dependantly all in one line but there are other methods. padding: 10px; This allows you to adjust the top, right, bottom and left spaces all at one time if you know that all four of them should be set to the same... in this case, 10 pixels. padding-left: 10px; This line will adjust only the left side by 10px but keep in mind that it doesn't necessarily mean the other 3 are going to be 0px. If you are adjusting something that already has default space, such as an <h1> tag, the default space will still affect those other 3 sides. In some cases you will want to control all 4 sides and sometimes you only want to affect 1. The example:
This padding line means that there will be 10 pixels of space added to the top and bottom and 20 pixels of space added to the right and left.
margin: A similar attribute is margin but in a sense, what it does is the opposite. Where padding will add space around it to push everything away, margin adds space around it to push itself away. Put it this way, if you add padding to the top of some text and there's an image above it... the padding will push the image up. But if you add a margin to your text, the image will stay where it is and push the text down. Other than that difference, margin is handled exactly the same as the padding: margin: 0px 0px 0px 0px; Again, it goes top, right, bottom and left... and again, you have other options such as margin: 0px; or having margin-top, margin-right, margin-bottom or margin-left. Adding to our example:
I only put a value in for the top margin as this will allow you to most noticeably see what it's doing but as always, play with the numbers and see what it does.
text-align: Sometimes on a site you really want text to be on the right hand side, for example... if you make a table layout that shows data and in some fields, there are numbers. You want it to be right justified as it is easiest to read that way. text-align: left; text-align: center; text-align: right; text-align: justify; The first 3 are pretty obvious, justify tells the text to best fit into a space that it can so that it looks like a block of text. That is to say, it'll add spaces in between words if it needs to to make it so that all of the text fits into each line such that each line ends at the same spot. So it literally looks like a rectangle of words when it's done. Completing our example:
The great thing about CSS is that it's simply a way to style your page, which means that as much you could try, you can't break anything. The tricky thing about it though is that there is a lot to it and the only way you'll be able to do it fast and properly is to do it often. Try changing the p { to body { or td { or any other HTML elements that you'd like. You can even add another entry entirely such that text in a table cell looks differently than text in a list.... like this: td { font-family: arial; color: red; } li { font-family: verdana; color: green; font-weight: bold; }
<html> <head> <title></title> <style type="text/css"> p { font-family: arial; font-size: 16px; color: #ff0000; font-weight: bold; font-style: italic; text-decoration: line-through; padding: 10px 20px 10px 20px; } </style> </head> <body> |
||||||||||
| Last Updated on Friday, 09 October 2009 09:56 |
