How would I add color to the text here? I'm stuck on this

HTML & CSS
42

I decided against, going to keep one color.

43

I want to look at doing this again.

44

Would it make more sense to set it up like this?

<table>
<tr><td><input type="hidden" name="on0" value="text - more text"><span style="color: blue;">text</span> -<span style="color: #e69138;">  more text</span></td></tr><tr><td><select name="os0">
 <option value="Blue">Blue</option>
 <option value="</option>
 <option value="</option>
 <option value="</option>
</select> </td></tr>
</table>

Than like this?

<table>
<tr><td style="color:blue;"><input type="hidden" name="on0" value="text - more text">text -<span style="color: #e69138;">  more text</span></td></tr><tr><td><select name="os0">
 <option value="Blue">Blue</option>
 <option value="</option>
 <option value="</option>
 <option value="</option>
</select> </td></tr>
</table>

What’s your opinion?

45

You don’t need two spans. Set the colour for the bulk of your text on the <td>, then use <span></span> tags to mark out the portion which differs.

Always keep your code as simple as possible, and don’t add tags unnecessarily.

Without knowing the context, it’s difficult to offer more advice than that, but remember that too many different styles can be confusing to visitors. Remember, too, not to rely on colour to convey meaning, because that can cause problems for the visually-impaired or those with colour-blindness

46

Context:
In Stock - Free Shipping

47

I would leave that as one colour in the actual order form. Draw attention to your free shipping offer elsewhere, if you want, but keep the form simple.

48

How come font-weight:700 isn’t making the text bold on blogger, but 800 does?

<table>
<tr><td style="color:blue;font-weight:700"><input type="hidden" name="on0" value="Text">Text </td></tr><tr><td><select name="os0">

</table>

Compared with jsfiddle: 700 weight

If you don’t know the answer to this @SamA74 might be able to know the reason for this.

49

You’re not declaring a font-family, so JSfiddle and Blogger may be defaulting to different fonts. As you know from your previous question on the subject, not every font is available in every weight.

2 Likes
50

I just did, still the same:

51

To repeat what @TechnoBear just said,

Every font is not available in every possible weight.

Blogger has nothing to do with it.

52

font-family: Times New Roman; 700

Bold here

<table>
<tr><td style="font-style: normal;font-family: Times New Roman;color:blue;font-weight:700"><input type="hidden" name="on0" value="Text">Text </td></tr><tr><td><select name="os0">

</table>

Not bold here:

53

Increase the font-size to maybe 36px.

Change the color of the font on Blogger to yellow so it is visible.

Finish closing the HTML tags properly.

Then compare weights again.

54

They look the same now. Then, how come the smaller fonts don’t look the same?

55

I don’t know. But technically speaking, font’s are not simple. At small sizes, tiny variations can make visible differences.

releases = versions and/or publishers.

When I said releases, I was assuming that one or both services hosted the font-family, but it is a common font-family on the PC and probably common on other platforms as well so they would not necessarily be hosting it just for cross-platform consistency.

56

What do you mean, releases?

57

Is there a way to determine what release they are using? Blogger is run by Google, I couldn’t imagine they never updated it.

58

I did not say or intend to imply that anyone never updated their font-families.

Consider that remark to be a red herring… an unlikely probability… a dumb comment. Don’t worry about it.

Change the font size smaller and smaller until a difference is noticed. I’m curious to know at what size they start to look different. Since you did not have a font-size specified, I wonder if Blogger defaults to a smaller font size than jsfiddle? You might want to test that after you find out at what size the difference is visible. Since you are now specifying the font-size in pixels, there may not be a difference at any size. Like I said, fonts are not simple things.

59

They start to look the same at 16px, does that answer your question?
before 16px they look different.

the line of code I tested on both.


<table>
<tr><td style="color:blue;font-weight:700;font-size:15px;font-family:arial;"><input type="hidden" name="on0" value="Text">Text </td></tr><tr><td><select name="os0">

</table>
60

Nevermind, I had one body color black, the other white, changed them both to black and they look the same.

61

it probably has to do with the font family’s. I’m done with this.