0

Below is a snippet of my html code 

   <!DOCTYPE html>
  <html lang = "en">
  <head>
        <meta charset="UTF-8">
        <title>Learning D3</title>
       <!DOCTYPE html>
   <html lang = "en">
<head>
                            <meta charset="UTF-8">
                            <title>Learning D3</title>
                            <link rel = "stylesheet" href="css/main.css">
                            <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

I am using chromium as my browser on Linux. My main.css file is not getting loaded for this page. it is inside a css folder and I think I am referencing it correctly in my html.

 <link rel = "stylesheet" href="css/main.css">

Also, when I check the source inside the developer options in chromium, I do see a folder named css with main.css inside it. But "main.css" shows up empty.

I am unable to figure out what seems to be going wrong here.Thanks in advance.

mysterious_guy
  • 425
  • 11
  • 23

1 Answers1

3

Even though that snippet has a bit invalid html, my implementation of css worked just fine using only the snippet in my html file.

Firstly you should validate your html (if it isn't a paste error) and remove the redundant tags:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Learning D3</title>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    </head>

Then make sure that the css/ directory is in the same directory with your html file.

your-root-directory
├── css
│   └── main.css
├── your-html-file.html

There is also a possibility that you are editing a wrong file and that is the reason your css is empty (happens to me sometimes when there is multiple files with a same name).

vkopio
  • 914
  • 1
  • 11
  • 28