Using CSS to set default font

Question

I have a file (CSS/FontStyle.css) containing this code:

.courier { font-family: courier; } 

and my .aspx file has this code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tut1.aspx.cs" Inherits="Rtw.Tut1" %> <asp:Content ID="Content1" ContentPlaceHolderID="StatusLabel" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">      <link rel="stylesheet" href="CSS/FontStyle.css"/>      <h2>Unsigned Vs Signed Integers</h2> //lots of text is below here.. 

However the font remains in time new roman. I can use other .css files from the same folder find, not sure why this one doesn't work?

thanks in advance.

Answer 1

Try changing

.courier { font-family: courier; } 

to

* {     font-family: courier;   } 

The reason is the same as what @koala_dev mentioned. The ".courier" makes it apply only to elements of the class "courier," and from the code that you show none of your content is labeled with that class name, so the font is not being applied.

The * selector, however, will apply the CSS font-family rule to the text of all elements.

Note that CSS uses a specificity priority, and if you have any other CSS selectors that apply to the same elements, but with a more specific identifier than *, then any font-family specified in those CSS rules will override the general rule specified by the * selector.

Update (this is considered a bad idea in CSS, but may help)

If you can't find what other CSS rule may be conflicting, then you can use the !important rule to override other rules (unless those other rules are also using it):

* { font-family: courier !important } 

Warning

Using !important is considered bad practice, however, but is useful possibly in your case where the conflicting CSS rule seems to be lost and you just need something that works.

What !important does is interfere with CSS's usual "cascading" rules for priority. As an example, the h2 element would have the font-family courier in the below exam, even though the usual result would be arial (because of the more specific selector). The more specific selector h2 is overridden by the less specific selector * because the * rule has the !important predicate applied to it.

* { font-family: courier !important } h2 { font-family: arial } 

For more info, please read this except and continue reading at the link that follows:

... postscripting your CSS values with !important can be highly abused and make for messy and hard to maintain CSS. The unfortunate typical use case goes like this:

1. WHY IS MY FRAGGLE ROCKING CSS NOT WORKING?!?!
2. (use !important rule)
3. OK, now it's working

Then the next guy comes along and tries to make new changes. He tries to alter some existing CSS rules, but now his changes aren't behaving how they should. He traces the issue back to the !important rules, then has a choice. He can try and remove those and attempt to get things back on track, or add some more of his own to fight them and get his change done. Since he might not know exactly why those !important rules were added in the first place, he might opt for the second option for fear of breaking something somewhere else on the site he's not aware of. And thus the vicious cycle starts.

Continue reading here: http://css-tricks.com/when-using-important-is-the-right-choice/