CSS Help.

[iBlueBox]

Really new to HTML and CSS and all this basically,I have a header on my website, but I want each letter to be a specific colour I say such as green and blue, how would I do this on CSS?

[Calum0812]

You might want to take a look here: http://www.w3schools.com/css/default.asp

Are you talking about them alternating like this:

Merry Christmas

or like the words like this:

Merry Christmas

I know you could just have 2 classes and then have each letter in it's own class if it is the first one or each word if the second but that might be a bit messy, probably a better way to do it.

[iBlueBox]

You might want to take a look here: http://www.w3schools.com/css/default.asp

Are you talking about them alternating like this:

Merry Christmas

or like the words like this:

Merry Christmas

I know you could just have 2 classes and then have each letter in it's own class if it is the first one or each word if the second but that might be a bit messy, probably a better way to do it.

Like the first one,

[Calum0812]

Like the first one,

If I was doing it I'd setup 2 css classes then have them alternating with the classes so M would be in class_red, E in class_green etc but I'm SURE there HAS TO BE a better way to do it.

[lRhyss]

<span class="red">Letter</span> <span class="green">Letter</span>

The use CSS to style the classes

or...

<span style="color: Red">Letter</span> <span style="color: Green">Letter</span>

The second method requires no css, but it's a more tacky way in my opinion.

[eLv]

Or you can do something like this. http://jsfiddle.net/sJTTG/

<div class="text">
    <span>H</span>
    <span>E</span>
    <span>L</span>
    <span>L</span>
    <span>O</span>
</div>

.text span {
    color: blue;
}
.text span:nth-child(odd) {
    color: red;
}

[Calum0812]

How does Habbox do it for the VIP colours and such? @xxMATTGxx; @Skynus; @Recursion;

[-Nick]

Yeh i like the habbox codes but i dunno what they are :/

[eLv]

They're probably using javascript.

    function alternate(colorpair) {
        if(colorpair.indexOf('|') == -1) return;
        var el = document.getElementById('alternator');
        colorpair = colorpair.split('|');
        var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
                      replace(/<[^>]*>/g,''). /*strip existing html tags */
                      split(''), 
            output = '';
        for (var w = 0, l = letters.length; w < l; w++) {
            output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
        }
        el.innerHTML = output;
    }

http://jsfiddle.net/xpZqs/
http://stackoverflow.com/questions/1...ing-javascript

This is very cool too: http://rainbowcoding.com/how-to-crea...ss-javascript/

[xxMATTGxx]

How does Habbox do it for the VIP colours and such? @xxMATTGxx; @Skynus; @Recursion;

That would be telling