Cascading Style Sheets Tricks

Adjust Text with CSS

Text is different from fonts – text is the blocks of content written with fonts. With CSS you can affect how the text displays including the color, alignment, decorations and more.

Coloring Text

You can change the text or foreground color with the CSS color property. You can define your colors as hexadecimal codes, RGB, or color keywords. Like this:
color: red;

Aligning Text

Changing the alignment of text is a bit easier than aligning block-level elements on Web pages. There is a text-align property in CSS that will allow you to align your text right, left, centered, or justified:
text-align: justify;

Dressing Up the Text

Just because you have text on a Web page doesn’t mean you can’t modify it to look different than what was written. With CSS you can add decorations like underlines, overlines, and blinking as well as change the case of the text and eventually we’ll have the ability to add drop-shadows with CSS.
text-decoration: underline;
text-transform: capitalize;

Spacing Text

Adding white space in and around text is an important ability in designing powerful pages. With CSS you can affect the leading, tracking, kerning, and indenting of your text with different properties. You can even tell the browsers how to interpret white space making it different from the standard method.
text-indent: 1em;
letter-spacing: 0.2em;
word-spacing: 0.5em;
line-height: 1.5em;
white-space: normal;

Non-English Text

It’s easy to forget that the Web is a global entity, but the reality is that even if your Web site is intended only for a small community, it is possible to be seen by people all around the world. You should always indicate the language of your Web pages. But once you have set the language, you can use CSS to change text found inside the page to a different direction or style. There are two style properties to do this:
unicode-bidi: override;
direction: ltr;

Playing with the Cursor

They aren’t text, but they are what happens with the pointer when it moves over text and other elements of your Web page. You can modify your cursors to show additional information when someone mouses over a link or image. And changing the cursor is a lot less annoying to people than popup windows and other DHTML techniques.
cursor: wait;

If you like the post & want to get more then Subscribe our blog posts. Subscribe RSS Feed Facebook Twitter Email

Both comments and pings are currently closed.

2 Responses to “Cascading Style Sheets Tricks”

  1. I’d perpetually want to be update on new content on this internet site , bookmarked ! .

  2. landscaping says:

    When are you going to post again? You really entertain a lot of people!

Copyright © Sunware Technologies - Your web partner