Writing a selector that applies a font-family attribute to all text at once

Get Help CSS
#1

I am currently doing one of the basic CSS projects on Codeacademy, Healthy Recipes.

One of the steps in the project was:
Finally, let’s make the font Helvetica instead of the default Times New Roman.
Instead of writing multiple selectors to apply the font-family property,
write a selector that applies a font-family attribute to all text at once.
The selector should target the h1 , h2 , p , and li elements.

Here is my question:
Is it wrong to choose ‘body’ selector to change all text at once?
What is the standard selector to use in this situation?

1 Like
#2

No, that would be the simplest approach, and the least specific.

body { font-family: Helvetica, Arial, sans-serif; }

This is what is referred to as the base font. Similarily we can set othe base (default) values for things like color, background, and size.

body {
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    color: black;
    background: white;
}

Note that the 100% means we accept the user set font-size that their machine is configured to. If they are used to large font, then they may have the default set to 32px. Our page would make this the value corresponding to 1em or 1rem.

2 Likes
#3

Thank you for your reply!
I am new to CSS so I have a few questions about your reply,

  1. I learned that html will choose Times New Roman as its font if it is not specified,
    but why use Helvetica, Arial, sans-serif as base font?
  2. What does this code do? Does it set font to Helvetica? Arial? sans-serif? or just picks randomly out of the three?
font-family: Helvetica, Arial, sans-serif;

Thank you!

1 Like
#4

If we don’t wish to change the base font, then why are we having this discussion? The choice of base font has fallen to us. Why any font family? Because we are setting the base. What we choose as that base is our choice, according to our design parameters. I used “Helvetica” for Apple devices, “Arial” for Windows devices, and sans-serif as the default for all other devices that don’t recognize either. This is the standard way of writing for browser compatibility.

The order is important. Start with the font that is least likely to be supported, and go from there to the next… and down to the one that all will support, sans-serif, given that these fonts are members of that generic font family.

I am so far removed from setting anything on my computer that it’s all an uncertainty for me, but, the typical system should allow the user to set which font to assign as the default generic font-family.

serif: "Times New Roman", "Times"
sans-serif: "Arial", "Helvetica"
mono-space: "Courier New"
cursive: "Comic Sans MS",
fantasy: "[Fantasy](https://www.linotype.com/1499797/fantasy-family.html)"

When we write the generic family at the end of our chosen fonts list, it will come from that list.

1 Like
#5

I have learned so much from your replies.
Thank you!!

1 Like
#6

Very useful and informative article, I also learned a lot of new things for myself. Thank you for sharing this information. Programming is probably the only thing that I manage to write. Because at the university I always had difficulties with writing essays and various research papers, for this I always needed help. And if I hadn’t found in time https://ca.edubirdie.com/research-paper-help, I don’t know how I would write all these works on my own. But with programming I have a lot better since it’s interesting to me and I’m happy to try to figure it out and maybe, if I put in a lot of effort, I’ll be a good specialist.

1 Like