How to set different colors in HTML in one statement

Question

I m thinking of having different color of text in one line  How could that be possible    lt p style  color  4C4C4C font-weight bold font-family Calibri font-size 20  gt  My Name is      lt  color  FF0000 font-weight bold font-family Tahoma font-size 20  gt  Tintincute  lt  p gt    I would like to have a different color for Tintincute but in one line the problem with this  the name went down one space    This is the code example     lt p style  color  4C4C4C font-weight bold  gt All fields marked with    lt style  color  FF0000 font-weight bold  gt   lt  color gt   lt style  color  4C4C4C font-weight bold  gt are required lt  p gt    Update   Phil  I tried using the code  but it didn t work  The code itself was shown on the page  This is how I did it     lt div style  color red  gt   validationmessage   lt  div gt  p detail  color  4C4C4C font-weight bold font-family Calibri font-size 20   span name  color  FF0000 font-weight bold font-family Tahoma font-size 20    lt p class  detail  gt My Name is   lt span class  name  gt Tintincute lt  span gt   lt  p gt

User · Answer

Use the span tag   lt style gt       redText               color red             blackText               color black          font-weight bold         lt  style gt    lt span class  redText  gt My Name is  lt  span gt  amp nbsp  lt span class  blackText  gt Tintincute lt  span gt    It s also a good idea to avoid inline styling  Use a custom CSS class instead

User · Answer

How about using FONT tag   Like   H lt font color  red  gt E lt  font gt LLO    Can t show example here  because this site doesn t allow font tag use   Span style is fast and easy too

User · Answer

x000D   x000D   rainbow   x000D    background-image  -webkit-gradient  linear  left top  right top  color-stop 0   f22   color-stop 0 15   f2f   color-stop 0 3   22f   color-stop 0 45   2ff   color-stop 0 6   2f2  color-stop 0 75   2f2   color-stop 0 9   ff2   color-stop 1   f22     x000D    background-image  gradient  linear  left top  right top  color-stop 0   f22   color-stop 0 15   f2f   color-stop 0 3   22f   color-stop 0 45   2ff   color-stop 0 6   2f2  color-stop 0 75   2f2   color-stop 0 9   ff2   color-stop 1   f22     x000D    color transparent  x000D    -webkit-background-clip  text  x000D    background-clip  text  x000D    x000D   lt h2 gt  lt span class  rainbow  gt Rainbows are colorful and scalable and lovely lt  span gt  lt  h2 gt  x000D   x000D   x000D

User · Answer

You could use CSS for this and create classes for the elements  So you d have something like this   p detail   color  4C4C4C font-weight bold font-family Calibri font-size 20   span name   color  FF0000 font-weight bold font-family Tahoma font-size 20     Then your HTML would read    lt p class  detail  gt My Name is   lt span class  name  gt Tintinecute lt  span gt   lt  p gt    It s a lot neater then inline stylesheets  is easier to maintain and provides greater reuse   Here s the complete HTML to demonstrate what I mean    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt style type  text css  gt      p detail   color  4C4C4C font-weight bold font-family Calibri font-size 20       span name   color  FF0000 font-weight bold font-family Tahoma font-size 20        lt  style gt   lt  head gt   lt body gt       lt p class  detail  gt My Name is   lt span class  name  gt Tintinecute lt  span gt   lt  p gt   lt  body gt   lt  html gt         You ll see that I have the stylesheet classes in a style tag in the header  and then I only apply those classes in the code such as  lt p class  detail  gt       lt  p gt   Go through the w3schools tutorial  it will only take a couple of hours and will really turn you around when it comes to styling your HTML elements  If you cut and paste that into an HTML document you can edit the styles and see what effect they have when you open the file in a browser  Experimenting like this is a great way to learn

[html] How to set different colors in HTML in one statement?

Examples related to html

Examples related to text