Home arrow Style Sheets arrow CSS: Text, Fonts, and Tables
STYLE SHEETS

CSS: Text, Fonts, and Tables


We last left off discussing text in CSS. In this article we will finish this discussion, and cover how to manipulate fonts as well. And if time permits, we will also go over tables in CSS. It's a lot of ground to cover, so let's jump right in.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 17, 2008
TABLE OF CONTENTS:
  1. · CSS: Text, Fonts, and Tables
  2. · Word Wrapping
  3. · Adjusting Your Font Size
  4. · Fonting with Style
  5. · How to Set the Boldness of a Font
  6. · Tables in CSS

print this article
SEARCH DEVARTICLES

CSS: Text, Fonts, and Tables
(Page 1 of 6 )

Can I Get Directions?

You can manipulate an element's text direction using direction. Here is an example:


<html>

<head>

<style type="text/css">

div.rightoleft

{

direction: rtl

}

div.lefttoright

{

direction: ltr

}

</style>

</head>

<body>

<div class="rightoleft">This text runs right to left.</div>

<div class="lefttoright">This text runs left to right.</div>

</body>

</html>

 

Increasing the Space Between Your Ears

It is possible to increase the amount of white space between your words, using word-spacing:


<html>

<head>

<style type="text/css">

p

{

word-spacing: 20px

}

h1{word-spacing: 50px}

h2{word-spacing: 40px}

h3{word-spacing: 30px}

h4{word-spacing: 20px}

h5{word-spacing: 10px}

h6{word-spacing: 5px}

</style>

</head>

<body>

<p>

My feet sure do stink

</p>

<h1>Hello fools</h1>

<h2>Take me to your leader</h2>

<h3>Actually, take me to your Burger King</h3>

<h4>My Intergalactic Zagats says its the best in this quadrant</h4>

<h5>I hear the North American cockroach is very delectable</h5>

<h6>Hey you feeling okay? You don't look so well...</h6>

</body>

</html>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials