CODEWITHSUNDEEP
csshtmlexternal
Noah210012
Noah210012

Reputation: 89

External CSS Not Rendering in Browser

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>

Upvotes: 0

Views: 41

Answers (2)

Lucca Dias
Lucca Dias

Reputation: 420

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

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

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

Upvotes: 0

Noah210012
Noah210012

Reputation: 89

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.

Upvotes: 2

Related Questions