css fonts

Hi,

I was running following example
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Open in new window


I have not understood the outputt. Which font is being set to which element.
for example
p.serif{font-family:"Times New Roman",Times,serif;}
for seriff class out of three fonts Times New Roman",Times,serif which one does apply.


Please advise. any links resourcees sample code, ideas highly appreciated. thanks in advance
LVL 7
gudii9Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
font family in CSS uses a fallback system, it's best practice to use the family name and generic name of the font you are planing to use after the actual font name. This give you a certain amount of guarantee that out put will look like you intended it to on most of the systems.

in font-family:"Times New Roman",Times,serif; "Serif" is the generic name, and "Times" is the family name. if on a system the font "Times New Roman" is not found, it will look for the first font it can find from the Times family and use that and so on.
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
0
 
arkodConnect With a Mentor Commented:
p.serif{font-family:"Times New Roman",Times,serif;}  <--- Times New Roman is selected.

p.sansserif{font-family:Arial,Helvetica,sans-serif;} < -- Arial is selected.

IN a font family , the first font that you declare gets used in the class. However the font needs to be included in the family .

To know about font family this is a very good place to begin with : - http://font-family.com/ 
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
hassonookConnect With a Mentor Commented:
the font which apply is the first font if there is error in the name of font the font which apply is the default font.
also the three fonts are same
Times New Roman"=Times=serif
Arial=Helvetica=sans-serif

this is useful tutorial:   http://www.w3schools.com/css/default.asp
0
 
RamanhpConnect With a Mentor Commented:
may this example also help u to understand better


http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start
0
 
scrathcyboyConnect With a Mentor Commented:
You would normally use just --

P  { then your CSS }

so when you use --

P.serif
P.sanserif

you are using two different "classes" of font type, one named "serif", the other named "sanserif"

The code --

<p class="serif">This is a paragraph

invokes the CLASS of "serif" -- so the fonts specified for serif in the CSS are used in order 1 to 3

<p class="sanserif">This is a paragraph

invokes the CLASS of "sanserif" -- so fonts specified for sanserif in the CSS are used in order 1 to 3
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.