Creating new file


#1

Hello dear friends, I am trying to link a css file with an existing html file. The html file is available, and I have written the code for linking in the html file. How do I create a new file for a css, because I see that there are no options for creating a new file in the workspace. Kindly assist.


#2

If there is file navigator then you do have the ability to create a CSS file. Is there a file navigator?

Also, please post a link to the exercise you are on. Thanks.


#3

Dear Codeacademy member, This is the link for the exercise I am working
currently.

https://www.codecademy.com/courses/learn-html-css/lessons/css-setup/exercises/review-css-setup?action=lesson_resume

Here, he says 'link a file style.css to the existing index.html'. I have
written the script for linking in index.html, but I am not able to create a
file for style.css. Hence it is not able to link.

Thanks
Aravind


#4

The CSS is already created and Read Only, hence no file navigator or edit mode. All that matters is that you have properly linked to the stylesheet so it is loaded and parsed. The effects will show up in the rendering of the page.

Until now, the CSS has been embedded in the page.

    <style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

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

.header {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center; 
  background-size: cover;
  height: 800px;
  text-align: center; 
}

.header .container {
  position: relative;
  top: 200px;
}

.header h1 {
  color: #fff;
  line-height: 100px; 
  font-size: 80px;
  margin-top: 0;
  margin-bottom: 80px;
  text-transform: uppercase; 
}

@media (min-width:850px) {
  .header h1 {
    font-size: 120px;
  }
}



.header p {
  color: #fff;
  font-weight: 500;
  letter-spacing: 8px;
  margin-bottom: 40px;
  margin-top: 0;
  text-transform: uppercase; 
}

.btn {
  color: #fff;
  background: #000;
  padding: 10px 40px;
  text-decoration: none; 
  transition: background .5s; 
}

.nav { 
  background: #000;
  height: 80px; 
  width: 100%;
}

.nav ul {
  height: 80px;
  list-style: none;
  margin: 0 auto; 
  padding: 0;
}

.nav ul li {
  color: #fff;
  display: inline-block; 
  height: 80px;
  line-height: 80px; 
  list-style: none;
  padding: 0 10px;
  transition: background .5s; 
}

.btn:hover, .nav ul li:hover {
  background: #117bff;
  cursor: pointer; 
  transition: background .5s;  
}

.main .container {
  margin: 80px auto;
}

.main img {
  float: left;
  margin: 50px 80px 50px 0;
}

.jumbotron {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg) center center;
  background-size: cover;
  height: 600px; 
}

.jumbotron .container {
  position: relative;
  top: 220px;
}

.jumbotron h2 {
  color: #fff;
  text-align: right; 
}

.jumbotron p {
  color: #fff; 
  text-align: right; 
}

.jumbotron .btn {
  margin: 10px 0 0;
  float: right; 
}

.footer { 
  background: #000;
  height: 80px; 
  padding-bottom: 50px;
}

.footer p { 
  color: #fff;
  font-size: 14px;  
  height: 80px; 
  line-height: 80px;
  margin: 0;  
}

@media (max-width: 500px) {
  .header h1 {
    font-size: 50px;
    line-height: 64px;
  }

  .main, .jumbotron {
    padding: 0 30px;
  }

  .main img {
    width: 100%;
  }
}
</style>

I suspect that in a later lesson this embedded style sheet will be in the external file.


#5

Dear Member, I have inserted the link.
https://www.codecademy.com/courses/learn-html-css/lessons/css-setup/exercises/review-css-setup?action=lesson_resume

I am working on the execrise called as the CSS setup. Here in the last page
( 6/6), I see that after I write the link script inside the head section ,
i.e, .
After I run, it gives me an error saying that 'Did you link the stylesheet'
?. I do understand from the previous post that the css file is already
setup, but it seems that the html file is not able to link that page.

Thanks
Aravind


#6

First off,

Note: The contents of style.css aren't important for now, so the file is not shown at the moment. In the next unit, you'll learn more about the fundamentals of CSS.

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

#7

Hello mtf, I know, since it is not able to locate the file mystyle.css, it
is not allowing me to move from this current unit. I am in 6/6 of the
lesson. It still aks me , If I did link the stylesheet. It gives me an
error. I am not able to exit from this lesson.

https://www.codecademy.com/courses/learn-html-css/lessons/css-setup/exercises/review-css-setup?action=lesson_resume

Thanks
Aravind


#8

Try using this code...

<link href="/style.css" type="text/css" rel="stylesheet">

#9

Hey codeacademy member. I recently got started with javascript. Its my
first session. I got an error, even when I feel it's correct.

https://www.codecademy.com/courses/learn-javascript-introduction/lessons/introduction-to-javascript/exercises/types?action=lesson_resume

It gives an error, even when I type the correct syntax:
console.log('Javascript');
I am getting the output. But it gives me a cross symbol, saying that I am
wrong.

Thanks
Aravind


#10

Check the spelling.

Javascript vs. JavaScript

#11

I know its not a pizza topping. Its javascript. But why it gives me this
error, even when we know that it is not a pizza topping? Maybe it should
have been one pizza topping. That should have solved the problem.??


#12

I had the wrong lesson. Notice that my post is edited. (lesson 3 instead of lesson 1).