CSS not working in HTML file - potential browser issue? - html

Question

this is baffling me.
As I was writing CSS and testing it in my browser (safari 12.1), I noticed things weren't working as I expected, so I tried testing a few things out.
I literally copy and pasted some HTML and accompanying CSS from codepen (to test) and the CSS is only applying the very basic text-align and things like that.
Am I missing something? Do I need to change some settings or do something else to the CSS/HTML files to get it to work? I'm so confused...
I've attached a screenshot of how it's being displayed in my safari window too.
HTML:
<link href='style.css' rel='stylesheet' type='text/css'>
<h1>RESPONSIVE PRICING TABLE DESIGN <br> BY <a target="blank" href="http://www.digimadmedia.com">DIGIMAD MEDIA</h1>
<div class="price-table-wrapper">
<div class="pricing-table">
<h2 class="pricing-table__header">- BASIC -</h2>
<h3 class="pricing-table__price">£50</h3>
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com">
Join Now!
</a>
<ul class="pricing-table__list">
<li>30 day free trial</li>
<li>50gb storage space</li>
<li>20% discount</li>
<li>24 hour support</li>
</ul>
</div>
<div class="pricing-table featured-table">
<h2 class="pricing-table__header">- BUSINESS -</h2>
<h3 class="pricing-table__price">£80</h3>
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com">
Join Now!
</a>
<ul class="pricing-table__list">
<li>40 day free trial</li>
<li>100gb storage space</li>
<li>25% discount</li>
<li>24 hour support</li>
</ul>
</div>
<div class="pricing-table">
<h2 class="pricing-table__header">- PREMIUM -</h2>
<h3 class="pricing-table__price">£130</h3>
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com">
Join Now!
</a>
<ul class="pricing-table__list">
<li>50 day free trial</li>
<li>200gb storage space</li>
<li>40% discount</li>
<li>24 hour support</li>
</ul>
</div>
</div>
CSS:
body {
background: #f8f8f8;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
font-family: "Lato", sans-serif;
font-size: 25px;
line-height: 32px;
padding-top: 70px;
a {
color: #66cccc;
}
}
.price-table-wrapper {
font-family: "Lato", sans-serif;
text-align: center;
margin-top: 30px;
.featured-table {
box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
}
.pricing-table {
display: inline-block;
border: 1px solid #c8c8c8;
border-radius: 10px;
background: white;
margin: 20px;
transition: all 0.3s ease-in-out;
&__header {
padding: 20px;
font-size: 20px;
color: #909090;
background: #e0e0e0;
}
&__price {
color: #66cccc;
padding: 20px;
margin: auto;
font-size: 40px;
font-weight: 500;
}
&__button {
display: block;
background: #66cccc;
text-decoration: none;
padding: 20px;
color: white;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
&:before {
position: absolute;
left: -20%;
top: -10%;
content: "";
width: 60%;
height: 220%;
transform: rotate(-30deg);
background: white;
opacity: 0.3;
transition: all 0.3s ease-in-out;
}
&:after {
position: absolute;
content: ">";
top: 0;
right: 0;
font-size: 25px;
padding: 15px;
padding-right: 40px;
color: white;
opacity: 0;
transition: all 0.3s ease-in-out;
}
&:hover {
background: black;
}
}
&__list {
padding: 20px;
color: #a0a0a0;
li {
padding: 15px;
border-bottom: 1px solid #c8c8c8;
&:last-child {
border: none;
}
}
}
&:hover {
box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
.pricing-table__button {
padding-left: 0;
padding-right: 35px;
&:before {
top: -80%;
transform: rotate(0deg);
width: 100%;
}
&:after {
opacity: 1;
padding-right: 15px;
}
}
}
}
}

Answer 1

Your CSS isn't CSS. It is SCSS and needs transpiling to CSS with a SASS tool before a browser can make use of it.
See the SASS website for more details.
CodePen indicates this by putting SCSS in brackets.