color text in html code

Question

I have one word ONE_WORD and I would like to make it little big bigger, change text style and color it in red. How can I do that? I tried with this code, but it doesn't work:

<font color="#B00000 ">ONE_WORD</font>

thx, D.

don't use the  tag. It is obsolete.

Spudley
– Spudley

2012-09-01 10:55:32 +00:00
Commented Sep 1, 2012 at 10:55 — Spudley
– Spudley, Commented Sep 1, 2012 at 10:55

Priyank Patel · Accepted Answer · 2012-09-01 08:59:59Z

6

Font is deprecated.Use span instead

<span class="word">Your Word</span>

Then apply style to it.

CSS:

.word
{
font-size:20px;
color:Red;
//Other styles
}

Using inline styles is not recommended.

answered Sep 1, 2012 at 8:59

Priyank Patel

7,01611 gold badges62 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spudley Over a year ago

+1 for pointing out the deprecated font tag and not using inline styles. Can't believe so many others have suggested using them.

Priyank Patel Over a year ago

@Spudley Thanks mate.Ya it is actually surprising that many experienced mates out here are giving such replies.

Madara's Ghost · Accepted Answer · 2012-09-01 08:57:36Z

3

font is deprecated. Use  and CSS to apply specific styling:

<span style="color: #b00; font-size: 16px; font-style: italic;">ONE_WORD</span>

answered Sep 1, 2012 at 8:57

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Comments

Codegiant · Accepted Answer · 2012-09-01 09:01:48Z

3

You can try this

HTML and INLINE CSS

<div class="text" style="color:red; font-size:20px;">ONE_WORD</div>

OR USE THE FOLLOWING CSS

.text{color:red; font-size:20px;}

answered Sep 1, 2012 at 9:01

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

Comments

NotGaeL · Accepted Answer · 2012-09-03 13:17:42Z

3

Use attribute style to edit style properties:

<span style="color:#B00000;">This is dark red.</span>

More info: ~~http://www.w3schools.com/html/html_css.asp~~ (By popular demand: Use http://www.w3.org/Style/Examples/011/firstcss.en.html#colors and also https://developer.mozilla.org/en-US/docs/CSS/color instead. It may take a long search to find out what you're looking for in w3.org or MDN, but as pointed out they are definitely more reliable sources than w3schools.com)

edited Sep 3, 2012 at 13:17

answered Sep 1, 2012 at 8:58

NotGaeL

8,5555 gold badges46 silver badges72 bronze badges

5 Comments

Spudley Over a year ago

please avoid recommending w3schools. They are well known to not a particularly good quality resource to learn from.

NotGaeL Over a year ago

I totally agree with you there. Outdated entries and even some standard violations can be found on w3schools.com, but it's still the most comprehensive user friendly resource online I know of. When stuff gets serious I always go w3.org instead, but browsing the actual standards for a particular thing can be a painful waste of time. Feel free to recommend any other alternative of your preference.

Spudley Over a year ago

see w3fools.com for further info on the topic, and links to better resources.

Jon Hanna Over a year ago

Calling w3schools.com outdated isn't fair, a lot of it was never right. It's the least user-friendly resource, because its impossible to tell its moments of a stopped clock being right twice a day from the bullschildt. This is particularly troubling with client-side stuff because you could read something works generally, then try it and find that it works, and then continue working for some time before you realise that it's got poor cross-browser support. When you refuse to reference that site, you don't just answer 1 question, you prevent dozens more from ever needing to be asked.

NotGaeL Over a year ago

Ok I found out what I was looking for in w3.org and also in MDN. In both cases it took me a horribly long search compared to w3schools.com (found in 5 secs), and that knowing exactly what I was looking for. That's my only point against these alternatives, but I think it's a fairly good one, and what I mean with "user friendly". Also, the particular document I linked is quite accurate and easy to understand. That being said, I agree it's better to spend a little more time on the search to save the trouble of possible bad practices. I will take it on account for future answers, thanks ;)

Stefan Fandler · Accepted Answer · 2012-09-01 08:57:22Z

2

ONE_WORD

answered Sep 1, 2012 at 8:57

Stefan Fandler

1,1437 silver badges13 bronze badges

Comments

sandeep · Accepted Answer · 2012-09-01 08:57:43Z

2

Define CSS property inside style. write like this:

<font style="color:#B00000">ONE_WORD</font>

answered Sep 1, 2012 at 8:57

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

4 Comments

sandeep Over a year ago

@Abody97 there is no need for a downvote. My answer related to OP issue & i am not telling him any misleading thing.

Chris Over a year ago

I think advising the OP to use  is pretty misleading.

sandeep Over a year ago

read my answer i am not advising OP to use . I am just giving an solution for what issue he is facing.

Chris Over a year ago

But you're using , which is bad practice since it's deprecated. Hey, no hard feelings here, I would've undone the downvote if I could.

Jon Hanna · Accepted Answer · 2012-09-01 09:13:19Z

First, think of your reason for wanting to increase it's size. If there's an HTML element that matches that reason (such as  for emphasis), then that's the element to use:

<em>ONE_WORD</em>

If you use the same element elsewhere but don't want those other uses to have the same appearance, then use it with a class. The class name should also reflect your thinking that led to you wanting it larger:

<em class="ourName">ONE_WORD</em>

If there's no natural match, use .

<span class="ourName">ONE_WORD</span>

Then in your CSS you set the style to match. If you went with the first choice:

em
{
  color: red;
  font-size: 120%;
  font-style: italic;/*em does this by default, but we'll include it anyway*/
}

If you went with the second choice or third choice, then either:

.ourName
{
  color: red;
  font-size: 120%;
  font-style: italic;
}

Or to e.g. only apply this style to  elements with that class - and treating other elements you used the same class on:

em.ourName
{
  color: red;
  font-size: 120%;
  font-style: italic;/*em does this by default, but we'll include it anyway*/
}

While more work for this one word that just putting the style straight on it, taking this approach to your entire site will make it simpler, faster, more logical for you to understand later, and quicker to change. It'll start paying off after just one document. Putting the CSS in a separate file will start paying off after the second page, and keep on giving.

Hmxa Mughal · Accepted Answer · 2012-09-01 08:59:09Z

1

you have to use style attribute to do that like:
ONE_WORD"

answered Sep 1, 2012 at 8:59

Hmxa Mughal

3941 gold badge4 silver badges17 bronze badges

Comments

Jukka K. Korpela · Accepted Answer · 2012-09-01 12:40:14Z

If the code posted does not set the text color, then the problem is elsewhere, possibly in a style sheet that overrides this setting, or in browser settings (browsers can be set to ignore colors suggested on web pages).

People and organizations have various opinions, but technically the font tag keeps working, and you can also set font family and size there, e.g.

<font color="#B00000" face="Verdana" size="4">ONE_WORD</font>

This is however rather inflexible, since here font sizes are expressed by numbers from 1 to 7, so that 3 is normal size and others are something different, in a browser-dependent manner. To get better control, you can add a piece of CSS, e.g.

<font color="#B00000" face="Verdana" size="4"
      style="font-size: 135%">ONE_WORD</font>

To change text style to italic, you could wrap  and  around this; to get bold font, use  and  around.

And you can of course use semantically empty span markup and set everything in CSS, though there is little practical reason to do so for just styling an individual word.

Collectives™ on Stack Overflow

color text in html code

9 Answers 9

2 Comments

Comments

Comments

5 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

Comments

5 Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related