Geek asks and answers

Stacking individual letters in a word

I am currently trying to fine-tune the word Citripe. I would like each letter to have a different color. As shown on this page, I can only create the first letter with the lines of CSS below

#namer:first-letter {
  color:#09C;
  font-size:1.1em;
  font-weight:bold;
}

Since there are eight (8) letters in a word, how do I style the remaining seven? I tried the style, but that didn't work. Is there a way to individually style letters without wrapping each letter using spaces.

   #namer:(1)-letter {
      color:#09C;
      font-size:1.1em;
      font-weight:bold;
    }
+5
source share
3 answers

Remember that CSS is Cascading . You can stylize the entire #namer element separately from the first letter - a more specific style will override a more general one.

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red;
}

Update:

Lettering.js . . . OP , , .

+1

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red!important;
}

,

0

" " , . ? , span CSS.

Now you can style the rest of the letters as a whole. Then in your CSS:

#namer:first-letter {
color:#09C;
font-size:1.1em;
font-weight:bold;
}

span {
color:red;
.
.
.
}

If you want to style an EACH letter, you can try to wrap each letter using spaces. However, it may look visually like a complete mess. Note: come up with a better name for your #LOL class

0
source

More articles:


All Articles