dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: two color text

  1. #1
    Join Date
    Sep 2004
    Location
    The Hereandnow
    Posts
    168

    two color text

    is there a css technique for coloring a word so that the first half is one color and the last half is a different color?

    obviously this can be done with font tags:

    <FONT COLOR="#00f">tele</FONT><FONT COLOR="#f00">phone</FONT>

    but as close as i can get with my limited css knowledge is:

    h1.one {color:#f00;}
    h1.two {color:#00f;}

    <h1 class="one">tele</h1><h1 class="two">phone</h1>

    but this displays the text like this:

    tele
    phone

    is there a way to get the results i want with css?

  2. #2
    Join Date
    Jul 2003
    Location
    New York City
    Posts
    2,771
    perhaps:

    <h1 class="one">Tele<span class="two">phone</span></h1>

    You shouldn't be breaking up your headers. I'd do that if you're just breaking it up for visual purposes. If, however, you are coloring one part a different color to make it stick out, or emphasize it, I'd do something like:

    <h1 class="one">Tele<em class="two">phone</em></h1>

    with:

    h1.one {
    color:#f00;
    }

    h1 em.two {
    color:#00f;
    font-weight:normal;
    }

  3. #3
    Join Date
    Jan 2005
    Posts
    6
    Hi,Just make a page like what i have shown below and use two classes. Finally you can use the two classes on the text by using the span tag. The two classes have only color attribute different.


    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .style1 {
    color: #FF0000;
    font-family: Arial;
    font-size: 24px;
    }
    .style2 {
    font-family: Arial;
    color: #0000FF;
    font-size: 24px;
    }
    -->
    </style>
    </head>

    <body>
    <span class="style1">Vinay</span><span class="style2">Sharma</span>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles