|
|
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
|
|
Text Properties in stylesheets are very versatile. You can change any number of things, such as word-spacing, letter-spacing, text-decoration, vertical-alignment, text-transform, text-align, text-indent, and line-height. We will cover all of those properties and all of the things you can do with those properties on this page, and we will do them in order. Let's start off with word-spacing... Word Spacing Word spacing is the amount of white space in between strings of connected characters (also known as words). The word "orange" is a string of 6 characters, just like "t400GH" is a string of 6 characters. You can manipulate the amount of space between words quite easily. First we will cover the simplest way to change (or actually, NOT change) the amount of space between words. That is the 'normal' setting:
listing {word-spacing: normal}
In this example above the word-spacing is set to it's normal (default) setting. There is no practical point in using this setting because unless your text is already set to be abnormally spaced, this tag is just reinforcing what your browser should do automatically.
p {word-spacing: 5em}
In this example you can see that the words enclosed inside the paragraph tag (p) will have a space of 5em in between the words. Just as you can use the "em" unit for a measurement of white space you can also use centimeters (cm) and inches (in) and pixels (px) and points(pt). Letter Spacing Letter spacing is the amount of white space in between any displayed character. In the word "apple" there are 5 displayed characters. Supposing you set the letter-spacing to 200% the word apple would look like this: a p p l e Setting letter-spacing is simple. Look at this easy example below, in which I am setting the letter-spacing inside the underline tag to be 12 points, which is a lot for letter-spacing.
u {letter-spacing: 12pt}
Also, just like many properties, you can use relative settings to adjust your text. Using points and pixels and such are absolute settings because 12 points will always be 12 points. 200%, though, will not always look the same. If you have text whose default setting is 20 pixels and if you set the letter-spacing to 200% then the spacing will be 40 pixels. If you have 10 pixel text and you double the letter-spacing (200%) then the spacing will be 20 pixels. As you can see, in both examples the letter-spacing is 200%, but that produces different results. Here is an example of letter-spacing with the relative setting, which can only be a percentage.
q {letter-spacing: 50%}
In this example the letter spacing inside the q tag is half of what the text around it is. Text Decoration Text decoration is another way to say what you want, or don't want, to do with the text on your web page. Now, let's assume that you want all the blinking text on your page to also be underlined. To define that with style sheets you would write this code out:
blink {text-decoration: underline}
As the code says, the text enclosed in the blink tag will also be underlined. There are other options to text-decoration, too. You could use any one of the following:
none With the text-decoration option in stylesheets you could do a number of things, including putting a strikethrough on text, making text blink, and underline text. Knock yourself out. Vertical Align Vertical alignment is tricky. In the immortal words of the CSS Resource Guide, vertical alignment "Sets the vertical alignment of an element's baseline with respect to its parent element's line-height." In addition to that, the boys at Webreview say that vertical alignment "May only be applied to inline elements; Negative values are permitted." So, vertical alignment, in other words, is the amount of vertical (up & down) space between two elements. Check this out:
<p>
See how the blockquote tag is nested inside the paragraph (p) tag? Well, that means that the blockquote tag is the child element of the paragraph tag and the paragraph tag is the parent tag of the blockquote tag. I think. I'm pretty sure, anyway. Anyway, so if I used the stylesheets code below then the blockquote text would appear as a superscript compared to the normal paragraph text.
blockquote {vertical-align: super}
Got it? OK. The other choices for vertical align are as follows:
baseline As you may or may not have guessed, when using a percentage to denote what the vertical align will be remember that percentages usually signify a relative, not absolute, position. Text Transform Text transform is used to change the settings of a whole set of text. You can make all the text capitalized, uppercase, lowercare, or you can reiterate it's default settings. Look:
caption {text-transform: uppercase}
In this example all the text within the caption tag will be automatically turned into uppercase text, no matter how it was when you originally wrote it. The following could be used as settings with the text-transform style:
capitalize
Text Align Text align is the alignment setting in stylesheets. This is actually the only way to do alignment on a web page at the present time. Check it out:
cite {text-align: justify}
In that example code the cite tag would automatically justify it's text. All the options for the text align style are:
left Text Indent The text indent style is used most often on the first line of a paragraph to indent it, but this style can easily be used on anything. This style needs to have a percentage or length unit to work - so brush up on your measurement. Remember: pixels, points, inches, centimeters are all good. And percentages work by indenting the text a preentage of the length of the whole block of text. if the text is 3 inches wide and you have 33% indentation on the first line, then the first line will start 1 inch in. Here is some example code:
dfn {text-indent: 3em}
As you can see, all the text inside the definition tag (dfn) is indented 3 em's and the Header 5 tag is indented 70%. Line Height Line height is the setting that changes the amoutn of white space between lines in a block of text. The white space that line height deals with is the vertical space, leading is what deals with the space in between words horizontally. Look at this sample code below:
samp {line-height: normal}
In those four examples I showed you the four ways to signify line height. The first way is through the normal setting, which just reinforces the default browser setting.
| Site Map
| |