Code works in Codepen but not in browser

Question

I'm completely new to coding, so please be gentle with me! I'm trying to add CSS code to a button, I've tested it in Codepen which shows it as working, but when I've tried it in my browser, it's coming up with a hyperlink, then the code alongside it.

<a href="index.html" class="button">Home</a>

        .button 
        {padding: 10px 24px;
        font-family: trebuchet;
        Color: #E8DCEC;
        Background-color: #ed1c24;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border: 2px solid #8b52a1;
        border-radius: 4px;}

        .button:hover {
        background-color: #72bf44
        color: #E8DCEC; }

I'm sure I've missed something totally obvious here, but I've looked over it so much and I can't see anything

Are you putting your CSS inside <style></style> tags? Codepen does that for you automatically. If not, you should probably read up on the basics of an HTML page. — j08691
– j08691, Commented Jan 20, 2017 at 21:23

Michael Coker · Accepted Answer · 2017-01-20 21:23:55Z

1

CSS code needs to be in <style> or linked in an external CSS document via a link tag

<a href="index.html" class="button">Home</a>
<style>
.button {
  padding: 10px 24px;
  font-family: trebuchet;
  Color: #E8DCEC;
  Background-color: #ed1c24;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  border: 2px solid #8b52a1;
  border-radius: 4px;
}

.button:hover {
  background-color: #72bf44 color: #E8DCEC;
}
</style>

answered Jan 20, 2017 at 21:23

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

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

1 Comment

Jenn Over a year ago

Amazing, thanks so much! I have recently done foundation diplomas in web design and web development, but this is my first attempt at anything practical .

Collectives™ on Stack Overflow

Code works in Codepen but not in browser

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related