Broadway button CSS - can someone explain?


#1

I've just completed the Broadway project and after much frustration of trying to complete the last task ended up looking at some completed codes.

The task is as follows (for anyone that may not know it):
"In the supporting section, add three links that say Learn more. Write CSS to style them into white buttons with gray borders using hex color: #333333."

I understand the use of a class earlier in the HTML to create a button, but I thought I'd need to include btn somewhere in the CSS for this one too. Does the previous use of a class along with the btn-main mean it doesn't need another btn code?

I don't understand a number of elements in the final code I used; can someone explain them please?:

.supporting a {
border:1px solid #333333;
text-decoration:none;
text-transform:uppercase;
font-size: 12px;
padding:10px 55px;
color:#333

Thanks in advance!


#2

Hey Katie,

Could you give a link to your final Codebit so I can help you? It helps to be able to actually see what's wrong ;)


#3

Hey, here's the CSS (although this is the final version including the button CSS which I found other people using)

html, body {
  margin: 0;
  padding: 0;
}

.header {
    background-color: #333333;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  height: 800px;
  background-image: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
  background-size: cover;
  position:relative;
}

.nav {
  margin: 0;
  padding: 20px 0;
}

.nav li {
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display:inline;
  text-transform: uppercase;
  padding: 20px;
}

.main {
  position: relative;
  top: 180px;
  text-align: center;
}

.main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
  text-transform: uppercase;
}

.btn-main {
  background-color: #333333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
  
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}
  
.supporting a {
border:1px solid #333333; 
    text-decoration:none;
    text-transform:uppercase;
    font-size: 12px;
    padding:10px 55px;
    color:#333
}

.clearfix {
  clear: both;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 500px) {
  .main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

And the HTML for that particular section

<div class="jumbotron">
      	    <div class="container">  
        <div class="main">
           <h1>We are Broadway</h1>
          <a class="btn-main" href="#">Get started</a>
              </div>
      </div>
    </div>

    <div class="supporting">
          <div class="container">
        <div class="col">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          <a href="#">Learn more</a>
            </div>