CSS text properties

[chili5]

Formatting with CSS

You can use CSS code in your action script projects to acheive more advanced effects. So before I look into how to use CSS in action script, we have to note a bit about CSS and it's text formatting abilities. There is a lot of things you can do with CSS but the syntax is really simple.

Changing Colors

All we simply have to do is set the color property. You can use a named color, hexadecimal value or the appropriate rgb values.

Example:

span {
	color: #FF0099;
}

In action script, you are more often going to be formatting links though. You can format links by using a as the selector.

Example:

a {
	color: #FF0099;
}

Background Colors

We can change the background colors of elements very easily using the background-color property.

span {
	background-color: #FF0099;
}

Text Decoration

There are quite a few things you can do with the text decoration properties. This is often used to remove underlines when you mouse over some text.

Examples:

text-decoration: underline;
text-decoration: overline;
text-decoration: underline overline; /* Text is underlined and overlined. */
text-decoration: blink;
text-decoration: line-through;

Text Transform

The text transform properties allow you to control the letters in an element. You can capitalize text, change text to lowercase or change text to uppercase.

Theoretically, you could use this on a text field and it would make sure that the user doesn't enter uppercase letters.

Examples:

text-transform: none;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;

Text alignment

text-align: center; 
text-align: right;
text-align: left;

These are used to control the alignment of text.

Later, we look at different events you can do with CSS using mouseovers and other events. These will allow you greater control over labels in action script. You can use CSS on labels. Since, you can't use text format object on labels this provides you a method to format objects.

[Jordan]

I miss the old days, before CSS. +rep

[chili5]

Really? Why? I sense sarcasm.

CSS makes thing so easy.

[Jordan]

No sarcasm, lol. I just learned the old way where you changed text color with <font size="2" color="#FFFFFF" etc... >. I also prefer tables to floating div alignments. It is just because that is the way I learned HTML, back before CSS was available. I'm an old grunt groaning about nonsense.

[chili5]

I find tables are easier to make them work in all browsers. Sure you lose some control but it is a lot easier. That is how I learned HTML also.

[WingedPanther]

I'm still trying to get the hang of CSS. It's a different way of thinking from old HTML. It is better, but different.

[ruskin012]

Avoid using tables from SEO point of view. Tables makes designers to design websites easily but table puzzle the search spiders. If you can, then use css for designing.

[WingedPanther]

I would disagree with that, somewhat. If a search spider can't find a link in a table, it's screwed up.

I would say, "Use tables for reporting tabular data, use div tags and CSS for layout."

[chili5]

I would say, "Use tables for reporting tabular data, use div tags and CSS for layout."

I've always heard people say that tables are bad for layout but why is this? Wouldn't you want to do something in the simplest way possible? Tables are simple.

[WingedPanther]

Usually, people want their layout to be something like:

Header area
Menu area
Body area
  left side bar
  content
  right side bar
Footer area

This is something that CAN be done with tables, but isn't what they were designed for. Div tags give you much better control for layout like the example above. With Div tags, you can alter the CSS and rearrange the sidebars, for example. With Tables, you're changing HTML code. Most themes rely on Div tag/CSS rather than tables.