|
Using CSS to Justify Text on the Web
|
|
Is there justification for justified text on the web? Well... yes and no... Hey, who cares, if you want it, come and get it! Also, I move quickly over all the steps in making your new tags and styles but I cover them much more nicely in my CSS Text & Links Tutorial. Also, just let me add that there is a great tutorial on basic understanding of how to use CSS in GoLive by Kath Howard that can be found HERE. |
|
Justified Text Now this is kinda strange. I never really feel the urge for justified text on the web but I've seen a number of people wondering why they can't do it in GL when some other brand-crap web products can. Well, the truth is, you CAN do this with our style sheet. There are a few different ways to do this. First, if you want absolutely everything on your page to be justified, you need to set up a body, td and p tag. Essentially the body tag controls any text just lounging about on your page, while the td (stands for table data) controls text inside of any table cells and the p tag then controls text inside any returns, or paragraphs on your page. So, having all three of these should cover practically any text you have on your page. I used to set this up for each tag. My CSS window will look like this: ![]() BUT! Due to recent technological advances in my understanding, I now know that this can be done using only one tag for all three! This is really excellent because now you no longer have to edit all three styles to cover everything. Just edit the one style and it will get all the text at the same time, much more efficient. This is how to do it. After you add your body tag, click on it either in the CSS Window or the CSS Inspector, and change the name from just body to body, td, p. Check the example shots below to see what it should look like. This will catch everything in one swoop. ![]() ![]() Now, what if you only want some text to be justified, but not all your text. This is a great time to make a custom style that we can apply to only the areas we want. This custom style is called a Class. Let's make a class for our justified text by selecting the '' button in the CSS Window, which I've put a red line around in the pic below, purely for your convenience. Note that your version of GoLive won't actually have a red line around the class button. ![]() (Again, for all the steps in this see the tutorial I mentioned at the start of this page) Now let's name our new class. I'm going to call it '.justy'. Take note of the 'dot' in front of the name. This is essential. Ok, let's justify our text. It does not matter if you are using the body, td, and p tags or your own class style, next we want to click on it in the CSS Window and then edit it in the CSS Inspector pallet as follows. With your style selected, go to the little button that looks like a ruler or something. Possibly little building for lots of little people. A close up of whiskers? Bar graph? Well, anyway, I think it is indicative of measurment since thats what we're up to here. ![]() All we have to do is move down to the align pop-up box and select Justify. TaaDaa! There we go. All your text will now be justified if you are using the body, td & p tag! If you are only going to apply your text justification to a specific section of the text on your page, you need to use the class we created by selecting the text you want justified. Then, with the text selected, go to the CSS window (in your menu under Window > CSS) and select select the Par or Div option. You should see your text scramble like mad to be justified! ![]() HERE is a link to the finished example. Simply use GoLive to download the page and then you can open it up for deconstruction! Thanks again. Sincerely, Jeff Seal, curator of sad.ark. |