3 replies [Last post]
DoctorT
DoctorT's picture
Offline
newbie
Guttenberg, New Jersey
Last seen: 39 weeks 3 days ago
Guttenberg, New Jersey
Timezone: GMT-5
Joined: 2016-12-18
Posts: 2
Points: 3

Hi!

I want to code an H1 header tag in which each letter has a different color. How do I do it with CSS?

Thank you!

Dr. T

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9644
Points: 3712

Is this homework?

First thoughts? Use the sibling selector or the nth child selector.

For example (sibling selector)

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    html {
        padding: 0;}
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;}
 
    p {
        font-size: 1em;}
 
    /* end boilerplate */
 
    h1 span {
	color: red;}
 
    h1 span+span {
	color: cyan;}
 
    h1 span+span+span {
	color: green;}
 
    h1 span+span+span+span {
	color: magenta;}
 
    h1 span+span+span+span+span {
	color: blue;}
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <h1><span>B</span><span>i</span><span>n</span><span>g</span><span>o</span></h1>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DoctorT
DoctorT's picture
Offline
newbie
Guttenberg, New Jersey
Last seen: 39 weeks 3 days ago
Guttenberg, New Jersey
Timezone: GMT-5
Joined: 2016-12-18
Posts: 2
Points: 3

Reply to Gary

Dear Gary,

Thank you for your reply.

I take it the the operative tag is the span tag, which I can also use inline.

Doctor T

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 42 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9644
Points: 3712

Hooks

Div and span are non-semantic elements that provide hooks for javascript and css.

Divs are aggregating elements that group block atoms to be styled or manipulated as a unit. Spans are used to segregate inline atoms for styling or manipulation separate from other elements in the container. (in your case, the h1 may be styled however you want {e.g. the font-size, margins, etc.}, with the spans allowing you to address each letter separately.)

Neither element should be added until you must have them. The page should be functional without them. They are for enhancement, not basic functionality.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.