External CSS Not Rendering in Browser

Question

Does anyone have any idea what my external style sheet isn't rendering in my browser?

Both files are in the same directory, I have tried multiple browsers, and I have cleared the cache on all of them multiple times. It is probably something small as this is my first time using an external style sheet but I am completely lost because everything seems correct.

heading {
  font-family: arial;
  color: red;
}

emphasis {
  color: blue;
  background-color: yellow;
}

<h1 class="heading">Cascading Style Sheets</h1>
<h2>Benefits</h2>
<p>Cascading Style Sheets offer many benefits to web designers. <em class="emphasis">CSS lets you separate style information from HTML</em>, allowing you to provide style sheets for different destination media as your web site requires. You can control the
  display characteristics of an entire web site with a single style sheet, making maintenance and enhancements of display information a less taxing chore. You can express a wide range of style properties that increase the legibility, accessibility, and
  delivery of your content. You can build page layouts, either flexible, fixed, or responsive to suit your user and content needs. As you will see in this chapter and through the rest of the book, CSS is easy to learn and apply to your web design projects.</p>

You do not have that elements on you html (heading, emphasis). You have .emphasis and .heading. You need to had a point before the class on the css — Luís P. A.
– Luís P. A., Commented Oct 3, 2017 at 16:27
Not sure if this is a typo but in your css it should be .heading instead of heading. Classes in external CSS files always being with a . — Michael Platt
– Michael Platt, Commented Oct 3, 2017 at 16:27
@MichaelPlatt THANK YOU SO MUCH THAT WAS THE PROBLEM. I'm surprised the validator didn't catch that. Thanks again! — Noah210012
– Noah210012, Commented Oct 3, 2017 at 16:29

Noah210012 · Accepted Answer · 2017-10-03 16:31:38Z

2

Solution provided by Micheal Platt:

In the external CSS, each class should be preceded with a .

Therefore:

.heading{
    font-family: arial;
    color: red;
}

.emphasis{
    color: blue;
    background-color: yellow;   
}

Is the correct solution.

answered Oct 3, 2017 at 16:31

Noah210012

899 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucca Dias · Accepted Answer · 2017-10-03 17:22:05Z

0

missed the dot at the beginning of the statement in css.

.heading {
    font-family: arial;
    color: red;
}

.emphasis {
    color: blue;
    background-color: yellow;   
}

edited Oct 3, 2017 at 17:22

user4447799

answered Oct 3, 2017 at 16:32

Lucca Dias

4401 gold badge5 silver badges6 bronze badges

Collectives™ on Stack Overflow

External CSS Not Rendering in Browser

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related