Home arrow Style Sheets arrow Page 2 - 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 / 1
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

TOOLS YOU CAN USE

advertisement
CSS: Text, Fonts, and Tables - Word Wrapping
(Page 2 of 6 )

You can remove text wrapping from an element using white-space: nowrap:


<html>

<head>

<style type="text/css">

p

{

white-space: nowrap

}

</style>

</head>

<body>

<p>

Hambone Hambone whats your name? Ask me again and I will tell you the same. You fool! Mr. T pities you greatly! He has decided to auction his multitude of gold chains in order to help raise money to get a girl to date you. I'm not certain it is enough however...

</p>

</body>

</html>

The Font-ain of Youth

Manipulating fonts in CSS is one of the great joys of life. If you are a nerd that is. Otherwise it's just a way to spiffy up your text. And who doesn't want to do that? We'll start off with the simple:

Setting the Font of Your Text with CSS


<html>

<head>

<style type="text/css">

h1 {font-family: impact}

h2 {font-family: verdana}

h3 {font-family: times}

p {font-family: courier}

p.sansserif {font-family: sans-serif}

</style>

</head>

<body>

<h1>Behold the Impact of a corny pun!</h1>

<h2>This is Verdana text</h2>

<h3>And I am his buddy Times!</h3>

<p>Just your friendly Courier here</p>

<p class="sansserif">And I'm loveable sans-serif</p>

</body>

</html>

Setting the Font of A Paragraph

You can use caption to set the font of a paragraph, as in the following example:


<html>

<body>

<p>Behold my paragraph with a normal font</p>

<p style="font: caption">Now behold this one which uses a caption font!</p>

</body>

</html>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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