WashesWhiter.com
Flash+PHP+MySQL databases | scripts | tutorials | contact






RAILS
DEVELOPER
EMAIL
MARKETING
SUBMISSION
PAGE DESIGN
HTML TABLES
CSS TEXT
FONTS
IMAGES
FLASH
SECURITY
tutorials


CSS TEXT


Guide to writing text with CSS style.

INTRODUCTION

The easy start to using text. The source code for each section is in the text box below the section.

See the TOOLS section for some tools.

Web pages are made up of two parts:
1. Content i.e. words, pictures etc
2. Style of presentation of content

What you are looking at is pure content. No style has been applied.
There are various ways to apply style but to keep this simple I am only going to show you one.
First you put your content into a container. In this case we are going to use a DIV.
We shall set the style in the next section.
This content has had some style set.
To set the style, you do two things:
1. Make the external style sheet available to the page.
This is done by putting the link code into the HEAD section (see the text area below).
2. By giving the DIV a name. In this case it is designsectiontitletext.
The contents of the DIV then adopt the style as set by .designsectiontitletext in the external style sheet.
Why use an external style sheet?
The main advantage is that if you have several pages on your site and you want to change the style of something, you only have to do this once: in the external style sheet.

The style sheet used for this lesson can be seen at the bottom of the page.
You can change the style of an entire DIV either by changing the external style sheet or by changing the style in the DIV tag.
Here the background color is changed by changing the style inside the DIV tag.
You can change part of the contents of a DIV by using the SPAN tag.
Here part of the text is changed.
Part of the text is changed. Again.
Here we are back to normal!

Here we are using a P tag instead of a DIV. Notice how the style as set in the external style sheet is over-ridden by the style set within the P tag. This happens in the DIV tag as well.

You should be getting the hang of it by now.
The following examples all use a P tag (you could also use a DIV).

Note that they do not use an external style sheet.

To display text, you use the p tags. p stands for paragraph. No style has been set as yet so anything inside the p tags looks plain.

The STYLE has been set here and colors introduced. The output is much nicer.
To find out more about colors see: ICONBAZAAR LEPIHCE
It is a good idea to note down the number of the colors that you use regularly!!!

This printout is in sans-serif. Now we set the fonts.
Font-size may be measured in various ways but I recommend that you start by using points(pt)
There are five font families. A computer which reads your page may not have the fonts that you specify on it. In this case it looks first for Futura. If this is present it uses that otherwise it will use verdana if that is available. Arial is almost certain to be present but if it isn't, it defaults to whatever sans-serif it has available.
This is true for all font families.

This output is in navy serif.
From a design point of view, a good rule of thumb is:
1.Use sans-serif for headings and titles and serif for the main text
2. Do not use more than two font families on your site.

This output is in red cursive.

This output is in green fantasy.

This output is in golden monospace.

Font style may be normal, italic or oblique.
Font weight may be normal, bold or a number of other choices.
For more about fonts in general, see W3C

Text-decoration may be none (default), blink, line-through, overline, and underline.
Line-height is the distance between text baselines in a block of text (also known as leading). Line-height: normal; is fit for most purposes.
Text-align may be left, right, and center, as well as justify, which justifies both the left and right margins of text, adding horizontal padding between words as necessary.
Text-indent sets the amount of indentation of the first line of a block of text.

Finally, a "normal" style of output which should work in both IE and Netscape browsers.



How do I copy the source code? First highlight it by putting your mouse cursor at the beginning of the text and then click on the left mouse button and pull down as far as you want to go. (If you are in a text box you can also use shift button plus down arrow/page down button). Second copy it to memory by pushing the ctrl and insert buttons at the same time. Third go to notepad or whatever editor you are using, put the cursor where you want the code to go, and press the shift and insert buttons at the same time.

The .css file used on this page: