2 replies to this topic

[Joe]

CSS Text

Another primary thing CSS is used for is to apply attributes to your text. Color is one of these attributes and can be done similarly to a background color. There are 3 ways to describe the value: by color name, by hex code, and by RGB value. If no color is inserted in the css it will go to whatever the browser default is. So here's how to do it:

For Color name:

 Body { color:red;}

For Hex Code:

 Body { color:#0000ff;}

For RGB Value:

 Body { color:rgb (250,0,0);}

One really neat thing that is often used for websites that have riddles or questions and you want to encrypt the answer in some way is to reverse the lettering. To reverse the lettering of any text within the paragraph tag you simply need to use the following CSS:

p { direction: rtl;}

and when the browser finds anything wrapped in the "P" tag it will become completely inverted and in this case appear as "goD eulB ehT". Pretty neat huh? If a direction is not stated then it will be default (ltr) the only 2 values for direction are "ltr" and "rtl" (left to right and right to left).

Spacing is a very important part of a website. If it's to close together it can be hard to read and if it's to far apart it looks tacky and like you didn't have enough information to fill the space quota. So here I'm gonna show you how to get your spacing just the way you want it. Line-height is a property that is commonly overlooked simply because the browser usually picks a good value itself. However in those occasions where you want some extra, or less space, you can use to get the right spacing.

H1 { line-height: 1.25 }
H2 { line-height: 5px}
H3 {line-height: 115% }

In the H1 tag I defined a number value which indicates what the font size's normal space is by that number. In the H2 tag I used an absolute spacing value so there would be 5 pixels space between lines. In the H3 tag I specified a percent which, like number 1, also defines the spacing relative to the font size. This can be used for overlapping text but generally isn't, as padding is usually used for that. If no line height is given the browser will use a default of 100% to find the correct spacing.

Letter spacing is another important part text on a website. It defines how far away a character is from the one's next to it and can be defined like so:

p {letter-spacing: 2px;
p.overlap {letter-spacing: -0.2px; }

Text alignment is also useful, especially when using tables. To justify the text to the right, left or center we can simply use the following:

P {text-align:left;}
P.center {text-align: center;}
P.right {text-align: right;}

You don't have to use those classes I used above you can add your own classes if you so desire it's just to give you an example.

Now it's time to go over our lines. Underlining, line-through, and in some cases blink. (Blink does not currently work in Opera or IE so be careful where you use it) Here's the example code of the CSS:

p {text-decorate: none;}
p.underline {text-decorate: underline;}
p.strikethrough {text-decorate: line-through;}
p.blink {text-decorate: blink;}

Many of you have probably already realized that HTML does not care how many spaces you put in it it will only put 1 space between words. For indenting there is a special property that is used to indent only the first line of every element.

p.Indent1 {text-indent: 5px;}
p.Indent2 {text-indent: 5%;}

Capitalization of words can sometimes get on your nerve or maybe you want something all capitalized or lowercase? Well the text-transform property tells the browser just what to do. This is commonly used in combination with php or other dynamic languages in order to capitalize titles of pages and such. The value's that can be used include:

"none" - tells the browser to do the default and include what you type
"capitalize" - tells the browser to capitalize the first letter of every word
"uppercase" - tells the browser to capitalize every letter
"lowercase" - tells the browser to make every letter lowercase

p {text-transform: none;}
p.cap {text-transform: capitalize;}
p.upp {text-transform: uppercase;}
p.low {text-transform: lowercase;}

Word spacing is another property that can be used when editing text. It tells the browser how much space to put between each word, like so:

p {word-spacing: 3px;}
p.wide {word-spacing: 15px;}

This will think you are word spacing after every time you push the space bar in your browser between words.

CSS Font

You can select font types using CSS as well. Some browsers may not support the font type you specified so you want to make sure that you have at least 2 if not 3 different fonts put in for the value. You can do this like so:

P {font-family: arial, sans-serif, serif;}

The browser will try them in order and use whichever one works first. To find a list of fonts that you can use go Here

You can also set font sizes through CSS by using the "font-size" property.

p {font-size: 12px;}

As always you can also use %'s or the following variables (default is medium)

Quote

xx-small
x-small
small
medium
large
x-large
xx-large

You can also style your font. By using the variables "normal", "italic", and "oblique". Example:

 p {font-style:italic;}

This will make everything in the P tag become italicized.

Similarly you can adjust the font weight to make it appear bold. You can do this by using the following code and variables:

P {font-weight: bold;}

Variables for font weight:

Quote

normal - default weight
bold - bold font
bolder - darker than bold font
lighter - lighter than normal font
100 - lightest font
400 - normal font
700 - same as bold font

You can use the numbers in order to get the exact weight you want

[Christopher]

How can I make the line spacing apply after the first line? I don't want it to move the first line down.

[Joe]

Well as we already figured out together you can use the html in order to adjust each line individually by starting each line with a div tag so it works right in firefox and IE or you could use padding