Home/ Questions/Q 3955690
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:16:00+00:00

i have the below code doing what i want, but wanted to see if

  • 0

i have the below code doing what i want, but wanted to see if i can simplify it into a single line and not use two html elements

<head runat="server">
    <title></title>
    <style type="text/css">
        .FirstLetter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;}
        .Spaced{letter-spacing: 5px;}   
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <span class="FirstLetter">
            R
        </span>
        <span class="Spaced">
            ealtime Account Activiation
        </span>

    </form>
</body>
</html>

can i get away with a single inline text in a html element like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <style type="text/css">
        .FirstLetter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;}
        .Spaced{letter-spacing: 5px;}   
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div class="FirstLetter Spaced">
        Realtime Account Activiation
    </div>

    <div class=""FirstLetter Spaced"">
        Announcements
    </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can use the pseudo-element :first-letter to achieve what you need adding it right after the class .FirstLetter of your css rule like:

    .FirstLetter:first-letter{color:White; background:Blue; border:1px black solid; padding-top:10px; padding-left:10px;} .

    Here an example using the second part of your html: http://jsbin.com/eqicu4

    Of course it needs some modifications to make it exactly how it’s in the first example.

    • 0