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

HTML & CSS
62

I never assigned a font-family at first,so, jsfiddle, and blogger were probably using their own. Whatever their defaults were.

63

What is going on, why are they both different?

Blogger

<table>
<tr><td style="font-family: Times New Roman;color:green;font-weight:700:font-size:13px;"><input type="hidden" name="on0" value="Colors">Colors</td></tr><tr><td><select name="os0">
 <option value="Blue">Blue </option>
 <option value="Green">Green </option>
 <option value="Pink">Pink </option>
 <option value="Grey">Grey </option>
</select> </td></tr>
</table>

Does any of this tell you anything?

    font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
        font-family: Arial,Tahoma,Helvetica,FreeSans,sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: normal;
        font-size-adjust: none;
        font-stretch: normal;
        -x-system-font: none;
        font-feature-settings: normal;
        font-language-override: normal;
        font-kerning: auto;
        font-synthesis: weight style;
        font-variant-alternates: normal;
        font-variant-caps: normal;
        font-variant-east-asian: normal;
        font-variant-ligatures: normal;
        font-variant-numeric: normal;
        font-variant-position: normal;

jsfiddle:

64

What would I add to this code so if I put it into jsfiddle, it’ll look like bloggers text?

style="font-family: Times New Roman;color:green;font-weight:700:font-size:13px;"

65

font: normal normal 13px Arial;

overrides

font-family: Times New Roman;?

Automatically?

And why is normal written twice?

66

How would I override bloggers css?

67

asasass, you’ve just posted 8 (eight) messages. Which one would you like answered?

2 Likes
68

This one:

What’s the difference?
font: normal normal 13px Arial, Tahoma, etc, etc
font-family: Arial, Tahoma, etc, etc

What does the 1st normal control, what does the 2nd normal control?

69

The top sample is an example of font shorthand.

The lower sample is an example of the font-family declaration.

What do they control? The following article addresses both individual and shorthand font statements.

https://www.impressivewebs.com/a-primer-on-the-css-font-shorthand-property/

70

Why would blogger use both longhand and shorthand in css?
Is there a reason for this?

   font: normal normal 13px Arial, Tahoma, 
        font-family: Arial,Tahoma
        font-style: normal;
        font-weight: normal;
        font-size: 13px;
71

The article (and most other articles) explain that shorthand declarations apply defaults values to omitted properties. Individual declarations are useful when one wants to change a single value and not bother rewriting the entire shorthand statement.

When talking about background images in the past, I recommended to you that you concentrate on using individual statements to avoid the “gotchas” that can happen when shorthand declarations are used improperly. Common newbie mistakes. The font shorthand is the other one that I do not care to use simply becauseit is too easy to make mistakes using it.

72

I just tested these and they both are equivalent now.

font: normal bold 13px Arial;

<td style="font-weight:700; font-family: Arial;font-size:13px; font-style: normal;">
73

Isn’t less code better?

74

You do not need to declare {font-style:normal} unless you are overriding a previous {font-style} declaration.

Just a thought: In the interest of practicing to learn the shorthand, you might remember that the font-family must be listed last and the font-size listed before font-family. Those are the two declarations that MUST be included in the font shorthand. Others are optional.

Please read the article.

75

Long hand it doesn’t matter how it’s written?
font-family: Arial; font-style: normal;font-weight:700;font-size:13px;

76

The order of longhand statements does not matter.

77

That’s written correctly, right?
font: bold 13px Arial;

78

Yes, that shorthand is written correctly.

80

font size before font family, got it.

81

ARe you asking why they include the “normal” values? I do not know but I would not use them because they might override “bold” or other properties that I wanted.

82

blogger has family first here and size last.