Web Design & Development

[ Web Design & Development Topics ]

Cascading Style Sheets

Text

One easy thing you can do to with CSS is affect the text. For example, lets say you want to set the color of text, you could do this inline by doing something like this:

<span style="color:orange">This is a paragraph</span>

Here is what it looks like:

This is a paragraph

Or you could do it embedded or external doing something like this:

p {color: #00703c}
h2 {color: #dda0dd}

Font

Lets say you want to affect the text. A common one is to want to set the font type. This can be done like this:
<span style="font-family:arial">This is a paragraph</span>

Here is what it looks like: This is a paragraph

or, if you want to try one type of font, and then add a second or third choice (in sequential order), it would look like this:
<span style="font-family:geneva, tacoma, arial">This is a paragraph</span>

If you wanted to do it inline or external it would look something like this:
span {font-family: courier}

You can also set the size of a font:
<span style="font-size:x-large">This is a paragraph</span>

or the style of a font:
<span style="font-style:italic">This is a paragraph</span>

or you can do more than one thing like this:
<span style="font-size:x-large; font-style:italic">This is a paragraph</span>

like this:

This is a paragraph

Line Height

Sets the distance between lines. Can be written as:

line-height: 1.4
line-height: 14pt
line-height: 140%

Sample:

<style type="text/css">
p.increase {line-height: 1cm}
</style>

Or lets say you want to do it inline, then it would be like this:

<div style="line-height:150%">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:

blah blah blah blah

blah blah blah blah

blah blah blah blah

Letter Spacing

Sample:

<div style="letter-spacing:5px">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:

blah blah blah blah

blah blah blah blah

blah blah blah blah

Word Spacing

Sample:

<div style="word-spacing:5px">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:

blah blah blah blah

blah blah blah blah

blah blah blah blah