Sun, 2016-12-18 13:43
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
Sun, 2016-12-18 18:11
#1
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
Mon, 2016-12-19 10:40
#2
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
Mon, 2016-12-19 17:21
#3
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