Home arrow Style Sheets arrow Page 2 - CSS: Working with Text
STYLE SHEETS

CSS: Working with Text


In our last article we left off discussing backgrounds in CSS. We also briefly touched upon working with text, with a promise that I would continue the discussion here. Text is still one of the most important parts of a website, so be prepared to get down to some serious work.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
March 10, 2008
TABLE OF CONTENTS:
  1. · CSS: Working with Text
  2. · How to Set the Background Color of Text or Highlight the Text
  3. · You Seem So Distant
  4. · How To Align Your Text
  5. · Indenting Text

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS: Working with Text - How to Set the Background Color of Text or Highlight the Text
(Page 2 of 5 )

We can change the background color of certain portions of our text, highlighting a specific section by using background-color. In the example below we are going to create some subliminal text by highlighting it in different colors:

<html>

<head>

<style type="text/css">

span.oops

{

background-color: red

}

span.goober

{

background-color: blue;

color: yellow

}

span.highlighter

{

background-color: black;

color: white

}

</style>

</head>

<body>

<p>

<span class="oops">James Payne is great.</span>Superman versus Snoop Dog and his bag of Kryptonite. Who would win?<span class="goober">Give James Payne all your money</span>Well you got me. I don't think that's the right type of Kryptonite but what do I know?<span class="highlighter">James Payne is your best friend</span>

</p>

</body>

</html>

The result of this fine code is:

James Payne is great.Superman versus Snoop Dog and his bag of Kryptonite. Who would win?Give James Payne all your moneyWell you got me. I don't think that's the right type of Kryptonite but what do I know?James Payne is your best friend


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 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials