Linking HTML to CSS

HTML-CSS
1

I completed the Survey Form project but I tried to run the code through VC Studio off the platform, and ran into this problem:

I have the

at the top of my HTML index.
—But it won’t work unless I copy and paste the CSS code into the HTML file (after)

Any tips?

2

We need to see your actual HTML code in order to see what you have at the top of it. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3 
<lang=en>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
4

Do you have your CSS in a file named “styles.css” and is it in the same directory as the HTML file?

5

Yes:

screenshot css
screenshot css1106×325 9.89 KB

6

how’s the content of your css file?

please share your code when you ask for help

7 
`  `<style>
  body { 
 font-family: verdana;
 font-size: 1.4em; 
 font-weight: 400;
 background-color: rgba(255,0,0,3);
}

h1 { 
  text-align: center; 
  color: white;
  }

p {
  text-align: center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }


label {
  line-height 1.8em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.container { 
  width: 100%;
}

/* form*/

form { 
  background-color: gray;
  display: grid;
  grid-gap: 1em;
  grid-template-rows: auto;   grid-template-columns: 1 fr 1fr 1fr; 
grid-template-areas: "name name name"
"email email email"
"age age age"
"dropdown" "dropdown" "dropdown"
"friend friend friend"
"improve improve improve"
"comment comment comment"
"submit ... ...";
padding: 1em;
}
.heading { text-align: center}
.container { text-align: left;
color: white;
  
}
.name {
  grid-area: name;
}
.email {
  grid-area: email;
}
.age { 
  grid-area: age;
}
.dropdown { 
  grid-area: dropdown;
}
</style>
8

You’ve got some minor issues in your CSS, I’m not sure it’s anything that would be causing this problem. I don’t think we have all the information we need to help you fix this. The best thing to do would be to put everything into github so we can download all of your files onto our own computer and try it for ourselves.

9

If that is the content of your css file, you have a big issue: you can’t put html tags in there

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.