CSS Setup


#1

i dont know how to Link a file called style.css to index.html. The attributes should be set in the following order: href, type, rel.

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>

  </head>
  <body>
    <div class="header">
      <div class="container">
        <h1>Innovation Cloud</h1>
        <p>Connect your ideas globally</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li>Register</li>
          <li>Schedule</li>
          <li>Sponsors</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="128" width="196">
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
        <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h2>Stay Connected</h2>
        <p>Receive weekly insights from industry insiders.</p>
        <a class="btn" href="#">Join</a>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <p>&copy; Innovation Cloud Conference</p>
      </div>
    </div>
  </body>
</html>

#2

well you created a link element here:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>

so maybe you can use this as inspiration to link your style.css stylesheet?


#3

i dont know how sorry i am completly stuck


#4

well, you need a <link> element, with attributes. You could use the link attribute you already have as example?

you can also revisit earlier exercises if you need a syntax refresher


#5

i understand what ive got to do but i dont understan on what to put


#6

and helping is really difficult if the only reply i get is: i don't understand.


#7

i understand what ive got to do but i dont understan on what to put


#8

You need to use the <link> tag with the following attributes:
href
rel
type

For href you need to set the value equal to (=) the name of your stylesheet.

For rel you need to set the value equal to stylesheet, which is what the file you're linking is in relation to your HTML document.

For type you need to set the value to the type of file that you're linking, which is a text/css file.

If you require further help, please provide more information than just "I don't understand". Thanks.


#10

Keep your rel and type attributes' values the same, but change the value of href to the name of the stylesheet.


#11

ive got

<link href="http://innovationcloud.com/" rel='stylesheet'type='text/css'>

#12

Your href is pointing to a website, not a stylesheet. Link it to something with .css at the end.


#13

ok thanks but now where to put it









Innovation Cloud


Connect your ideas globally


Learn More

<div class="nav">
  <div class="container">
    <ul>
      <li>Register</li>
      <li>Schedule</li>
      <li>Sponsors</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

<div class="main">
  <div class="container">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="128" width="196">
    <h2>The Innovation Cloud Conference</h2>
    <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
    <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
    <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h2>Stay Connected</h2>
    <p>Receive weekly insights from industry insiders.</p>
    <a class="btn" href="#">Join</a>
  </div>
</div>

<div class="footer">
  <div class="container">
    <p>&copy; Innovation Cloud Conference</p>
  </div>
</div>
 </body>