CODEWITHSUNDEEP
htmlcss
Farmer Joe
Farmer Joe

Reputation: 41

CSS Font not showing up in HTML

In my CSS file, I have the following code:

h1 {
color: black;
font-family: Calibri;
}
p {
color: black;
font-family: Calibri;
}
h2 {
color: black;
font-family: Calibri;
}
h3 {
color: black;
font-family: Calibri;
}
h4 {
color: black;
font-family: Calibri;
}
}
body {
color: black;
font-family: Calibri;
}

However, my HTML page is partly Calibri and some serif font. This is the code for my HTML page:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="file:///C:/Users/SreePC/Desktop/Website%20Setup/Website(1)/mystyle.css">
<body>
<h1>PC Parts</h1>
<p>This subpage will be all about PC Parts!</p>
<p> <a href=https://pcpartpicker.com/> Click here to make a PC build!</a></p>
<h2>CPU</h2>
CPU stands for Central Processing Unit. It performs the [blank] tasks for your computer. There are 2 main brands of CPU's. Intel and AMD. Intel is by far the most popular brand. It accounts for more than 90% of all CPU's used in the world. AMD is not very popular but it has the same quality as Intel. Due to its low market share, its prices are comparitevly cheaper than Intel CPU's. <br>If you are on a budget build, you should go with AMD. Also, if you want more cores for a low price you should go with AMD. If you can spend a bit more money, you should go with Intel. If you go with AMD, you should choose the Zen family as it is the newest version. If you go with Intel, you should go with 8th generation or Coffee Lake arcithecture. Multicore performence is completly revamped in 8th gen CPU's and is almost 60% faster than previous generations. When you look for a Intel CPU, you might see random letters on the end of the processor number. For a full cheat sheet to understanding this click <a href=file:///C:/Users/SreePC/Desktop/Website%20Setup/Website(1)/Subpages/PCparts/IntelNamingGuide.html> here</a>!
<br>
AMD: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/products/cpu/#s=62,60/> AMD Ryzen™ 3 or 5<br></body></a>
   <b> The Best</b>:<a href=https://pcpartpicker.com/product/CF7CmG/amd-threadripper-1950x-34ghz-16-core-processor-yd195xa8aewof> AMD Ryzen™ Threadripper 1950x</a></p>
Intel: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/products/cpu/#s=11,12&f=85/> Intel Coffee Lake™ i3 or i5</a><br>
   <b> The Best</b>: <a href=https://pcpartpicker.com/product/r87CmG/intel-core-i9-7960x-28ghz-16-core-processor-bx80673i97960x> Intel - Core i9-7960X (Extreme Edition)<br><a>
<h2>CPU Cooler</h2>
A CPU cooler keeps your CPU cool, or at low temperatures. You can determine what temperature your CPU is running by using a program called <b>Intel XTU</b> or Intel Extreme Tuning Utility. It can monitor your temperature, clock speed, and a whole lot more. Also, you can undervolt your CPU using this. Undervolting your CPU means reducing the power that goes to your CPU. It ca help decrease temperatures and stop thermal throttling. A great video that explains this is <a href=https://www.youtube.com/watch?v=QBNP5I2y668>here</a>. Now going back to subject, there are 2 main types of coolers, Air and Liquid. Air coolers use air to cool your CPU. Liquid uses water to cool your CPU. All coolers use a metal plate to transfer the heat from your CPU to the cooling system. The metal plate is attached on the metal part of the CPU. The heat gets transferred very efficently to the cool device. In a air cooler, the heat goes to a another metal part of the. The metal parts of the cooler are known as heat pipes, because the it transfers heat via "pipes". The pipes are cooled by air or water. 
<br>
Air: <br>
	<b>Budget</b>: CRYORIG - H7<br>
   <b> The Best</b>: Noctua - NH-D15 82.5 CFM CPU Cooler<br>
  <small> However, if this doesn't fit your case you should go with this: Noctua - NH-L9i</small>
    <br>
    <br>
Water: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/product/Vwdqqs/corsair-cpu-cooler-h60cw9060007ww> Corsair - H60<br></a>
   <b> The Best</b>: Intel - Core i9-7960X (Extreme Edition)<br>
In <a href=https://www.youtube.com/watch?v=hr0qLLv3dKc>this video</a>, Linus Tech Tips puts a showdown between Air Cooling and Water Cooling. He is using a <a href=https://noctua.at/> Noctua</a> for air and (I think) Corsair for liquid.
<h2>Memory</h2>

<h2>Storage</h2>
<h2>Video Card</h2>
<h2>Case</h2>
<h2>PSU</h2>
<h2>Monitor</h2>
<h2>Keyboard</h2>
<h2>Mouse</h2>
<h2>Speakers</h2>
<h2>Thermal Compound</h2>

<h2>Other Stuff</h2>
</body>
<link rel="stylesheet" type="text/css" href="file:///C:/Users/SreePC/Desktop/Website%20Setup/Website(1)/mystyle.css">   
</html>​

When I go to my HTML page, only the title and headings are Calibri. Everything else is still some serif font. I want everything to be Calibri, but I want to do it on my css file. Could you please tell me what I'm doing wrong. Thanks!

Upvotes: 1

Views: 955

Answers (3)

Jon P
Jon P

Reputation: 19772

All you need is :

body {
 color: black;
 font-family: Calibri;
}

The other "base" styles are irrelevant. As mentioned in the comments. your existing CSS is broken with a double }.

You also have a closing </body> tag in the middle of your text. Get rid of that.

body {
color: black;
font-family: Calibri;
}
<h1>PC Parts</h1>
<p>This subpage will be all about PC Parts!</p>
<p> <a href=https://pcpartpicker.com/> Click here to make a PC build!</a></p>
<h2>CPU</h2>
CPU stands for Central Processing Unit. It performs the [blank] tasks for your computer. There are 2 main brands of CPU's. Intel and AMD. Intel is by far the most popular brand. It accounts for more than 90% of all CPU's used in the world. AMD is not very popular but it has the same quality as Intel. Due to its low market share, its prices are comparitevly cheaper than Intel CPU's. <br>If you are on a budget build, you should go with AMD. Also, if you want more cores for a low price you should go with AMD. If you can spend a bit more money, you should go with Intel. If you go with AMD, you should choose the Zen family as it is the newest version. If you go with Intel, you should go with 8th generation or Coffee Lake arcithecture. Multicore performence is completly revamped in 8th gen CPU's and is almost 60% faster than previous generations. When you look for a Intel CPU, you might see random letters on the end of the processor number. For a full cheat sheet to understanding this click <a href=file:///C:/Users/SreePC/Desktop/Website%20Setup/Website(1)/Subpages/PCparts/IntelNamingGuide.html> here</a>!
<br>
AMD: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/products/cpu/#s=62,60/> AMD Ryzen™ 3 or 5<br>
  <!-- What was this doing here?
  </body>
  -->
  </a>
   <b> The Best</b>:<a href=https://pcpartpicker.com/product/CF7CmG/amd-threadripper-1950x-34ghz-16-core-processor-yd195xa8aewof> AMD Ryzen™ Threadripper 1950x</a></p>
Intel: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/products/cpu/#s=11,12&f=85/> Intel Coffee Lake™ i3 or i5</a><br>
   <b> The Best</b>: <a href=https://pcpartpicker.com/product/r87CmG/intel-core-i9-7960x-28ghz-16-core-processor-bx80673i97960x> Intel - Core i9-7960X (Extreme Edition)<br><a>
<h2>CPU Cooler</h2>
A CPU cooler keeps your CPU cool, or at low temperatures. You can determine what temperature your CPU is running by using a program called <b>Intel XTU</b> or Intel Extreme Tuning Utility. It can monitor your temperature, clock speed, and a whole lot more. Also, you can undervolt your CPU using this. Undervolting your CPU means reducing the power that goes to your CPU. It ca help decrease temperatures and stop thermal throttling. A great video that explains this is <a href=https://www.youtube.com/watch?v=QBNP5I2y668>here</a>. Now going back to subject, there are 2 main types of coolers, Air and Liquid. Air coolers use air to cool your CPU. Liquid uses water to cool your CPU. All coolers use a metal plate to transfer the heat from your CPU to the cooling system. The metal plate is attached on the metal part of the CPU. The heat gets transferred very efficently to the cool device. In a air cooler, the heat goes to a another metal part of the. The metal parts of the cooler are known as heat pipes, because the it transfers heat via "pipes". The pipes are cooled by air or water. 
<br>
Air: <br>
	<b>Budget</b>: CRYORIG - H7<br>
   <b> The Best</b>: Noctua - NH-D15 82.5 CFM CPU Cooler<br>
  <small> However, if this doesn't fit your case you should go with this: Noctua - NH-L9i</small>
    <br>
    <br>
Water: <br>
	<b>Budget</b>: <a href=https://pcpartpicker.com/product/Vwdqqs/corsair-cpu-cooler-h60cw9060007ww> Corsair - H60<br></a>
   <b> The Best</b>: Intel - Core i9-7960X (Extreme Edition)<br>
In <a href=https://www.youtube.com/watch?v=hr0qLLv3dKc>this video</a>, Linus Tech Tips puts a showdown between Air Cooling and Water Cooling. He is using a <a href=https://noctua.at/> Noctua</a> for air and (I think) Corsair for liquid.
<h2>Memory</h2>

<h2>Storage</h2>
<h2>Video Card</h2>
<h2>Case</h2>
<h2>PSU</h2>
<h2>Monitor</h2>
<h2>Keyboard</h2>
<h2>Mouse</h2>
<h2>Speakers</h2>
<h2>Thermal Compound</h2>

<h2>Other Stuff</h2>

Additional notes:

Your HTML could do with a lot of tidying up.

Avoid using file references. These will no longer work when uploaded to a server. Learn how to use the various types of relative and absolute paths.

It is best practice to enclose HTML attributes in quotes, e.g : <a href="https://www.youtube.com/watch?v=QBNP5I2y668"> . Single or double is fine, just be consistant.

Limit the use of <br> tags. They are semantically meaningless and you can't style them. Never use them for vertial spacing, use padding or margins as appropriate.

Upvotes: 0

TechTorch
TechTorch

Reputation: 21

You can use * to specify everything, but depending on the size of the HTML this can slow the page rendering.

Example:

* {
font-family: Calibri;
color: black;
}

Another option would be to specify all of the elements in one go rather than restating it.

Example:

html,body,h1,h2,h3,p {
font-family: Calibri;
color: black;
}

You are also likely to have issues where the text is not inside of an element, you could use <span> tags which may help.

Upvotes: 2

Stradosphere
Stradosphere

Reputation: 1285

Maybe try wrapping your text in p tags and use the following css:

p {
     color: black;
     font-family: Calibri;
}

Upvotes: 0

Related Questions