Luke Thompson
Luke Thompson

Reputation: 11

What is a CSS Parse error and how do I fix it?

I am coding from the book, Learn to Code: HTML and CSS by Mr. Shay Howe, and ran into a problem with my code.

I use Brackets by Adobe as my text editor and when looking at my live preview, it didn't look how it was supposed to look, so I put it into the W3C CSS Validation service and it said I had a parse error. Here is my code (the problem area):

h1, h3, h4, h5, p {
margin-bottom: 22px;
}

<a class="btn-alt"></a>

/*
==============================================
Buttons
==============================================
*/

.btn {
border-radius: 5px;
display: inline-block;
margin; 0;
}

.btn-alt {
border: 1px solid #dfe2e5;
padding: 10px 30px;
}

And my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/stylesconference.css">
</head>

<header>
<section class="container">
<h1>
<a href="stylesconference.html">Styles Conference</a> 
</h1>
</section>
<h3>August 24&mdash;26th &mdash; Chicago, IL</h3>
<nav>
<a href="stylesconference.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav> 
</header>
<header class="container"></header>

 <section>
 <h2>Dedicated to the Craft of Building Websites</h2>
 <p>Every year, the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
 <a href="register.html">Register Now</a>
 </section>
 <section class="hero container"></section>

 <section>

 <section>
 <a href="speakers.html">
  <h5>Speakers</h5>
  <h3>World-Class Speakers</h3>
 </a>
  <p>Joining us from around the world are over twenty fantastic speakers, here to share their stories.</p>
 </section>
 <section class="container"></section>

 <section>
 <a href="schedule.html">
  <h5>Schedule</h5>
  <h3>Three Inspiring Days</h3>
 </a>
  <p>Enjoy three inspiring and action-packed days of talks, gatherings, and  all-around good times.</p>
</section>

<section>
 <a href="venue.html">
  <h5>Venue</h5>
  <h3>The Chicago Theatre</h3>
 </a>
  <p> Within the heart of downtown Chicago, The Chicago Theatre will provide   a beautiful conference venue.</p>      
 </section>

</section>
<section class="container"></section>

<footer>
    <small>&copy; Styles Conference</small>
      <nav>
        <a href="stylesconference.html">Home</a>
        <a href="speakers.html">Speakers</a>
        <a href="schedule.html">Schedule</a>
        <a href="venue.html">Venue</a>
        <a href="register.html">Register</a>
      </nav>
</footer>  
<footer class="container"></footer>
</html>

Upvotes: 1

Views: 4129

Answers (2)

Ronan Lopes
Ronan Lopes

Reputation: 3398

Just remove the tag <a class="btn-alt"></a> and it may work

Upvotes: 0

Drown
Drown

Reputation: 5982

There's an HTML tag in line 5 of your CSS file :

<a class="btn-alt"></a>

I don't know if it's a typo in the actual code or the result of you posting here, but this is a problem.

There's also a semi-colon when it should be a colon in line 16, your last style for the .btn class :

margin; 0;

This should be :

margin: 0;

Upvotes: 4

Related Questions