CSS Help.

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?

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.

Quote:

---

Originally Posted by 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.

---

Like the first one, :)

Quote:

---

Originally Posted by iBlueBox

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.

HTML Code:

---

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

---

The use CSS to style the classes :)

or...

HTML Code:

---

<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.

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

HTML Code:

---

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

---

HTML Code:

---

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

---

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

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

They're probably using javascript.

HTML Code:

---

    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/

Quote:

---

Originally Posted by Calum0812

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

---

That would be telling :P

Quote:

---

Originally Posted by xxMATTGxx

That would be telling :P

---

Well please will you tell us matt! With a cherry on top!

Also, codeacademy.com is fantastic.

Habbox uses JS for our VIP colours.

Take a squizz at their source code and you'll see how Habbox does it.

PHP Code:

---

//redandgreenfunction alternatingColours(selector, rainbowcolours)
{
 var currentcolor = 0;
 var amountinarray = rainbowcolours.length;
 $(selector).each(function(){
  var letters = $(this).html().split('');
  $(this).html('');
  for(var i in letters)
  {
   if(letters[i] != ' ')
   {
    if(letters[i].toString().search('unction') == -1)
     $(this).append('<span style="font-weight: bold; text-decoration: none; color: #' + rainbowcolours[currentcolor] + ';">' + letters[i] + '</span>');
     
    currentcolor++;
    if(currentcolor == amountinarray) currentcolor = 0;
   }else{
    $(this).append(' ');
   }
  }
 });
  } 


---

and to get their colours

PHP Code:

---

$(document).ready(function(){
    alternatingColours('.redandgreen',Array('CB150B','3C8D0D'));//redandgreen}); 


---

and then they set the class of the span they want to change colours to that name (redandgreen)