+ 1

How to make CSS work with HTML?

I recently started using sublime text edit and Visual Studio Code to write HTML and CSS so I can practice for the website I’m making, every time I save my code and test it on a browser it only shows the HTML I have written and not the CSS. I think this is because I have to save my CSS as a different file from my HTML so when I click on my HTML folder it ignores the id’s and Classes, therefore adding no CSS elements to the page. Is there any way of saving my CSS & HTML in one file? Or how do I do it? Thx!

html css web sublime vscode

12th May 2018, 10:56 PM

Kyle

6 Answers

+ 1

Hello Kyle If you want to put CSS in the same file as your HTML file, just add a <style></style> tag inside the <head></head> tag in your HTML file. Your CSS goes inside the <style></style> tag. You should notice the that this is not the recommended way. Because any CSS that you write in this way will affect only one file. The recommended way is to put the CSS in it's own file. And then link the .css file in the head of the HTML file: <html> <head> <title>Page</title> <link rel='stylesheet' href='path/to/css/file.css'> </head> ...

12th May 2018, 11:36 PM

Ulisses Cruz

Thank you so much Ulisses! So in the href how do I link it? And should the name be the name of the CSS file?

12th May 2018, 11:49 PM

Kyle

If your CSS file is in the same folder as your HTML file, then the href attribute would be: href = "styles.css" You would change styles.css with the name of your file

13th May 2018, 12:02 AM

Ulisses Cruz

If your file structure is: site/ index.html css/ styles.css Then href attribute would be: href = "css/styles.css"

13th May 2018, 12:04 AM

Ulisses Cruz

If your file structure is: site/ index.html css/ styles.css Then your href attribute would be: href = "../css/styles.css"

13th May 2018, 12:06 AM

Ulisses Cruz

For some reason it didn’t work.. what do I put for the “rel”?? I did: <link rel=“stylesheet” href=“css/test.css”> The <style> method works though!

13th May 2018, 1:41 AM

Kyle