CODEWITHSUNDEEP
htmlcsschromebook
mandrake
mandrake

Reputation: 15

Chromebook HTML Viewer: CSS not displaying?

I have a Chromebook and I am using the app: HTML Viewer with this app: http://drive-html-viewer.pansy.at/

This is the HTML file: https://shiftedit.net/edit#162629/0B94fPcefbkHSXzJpNFc5cmlWMnc

CSS files: https://shiftedit.net/edit#162629/0B94fPcefbkHSVmhVb0M5d2hrSTg https://shiftedit.net/edit#162629/0B94fPcefbkHSN2o3c1I3WTd4ZG8

and the page shows up fine in basic HTML format but when I try to apply a CSS style sheet it doesnt recognize it ? this is part of the code with the stylesheet link: 

<html lang="en">
<head>
<meta charset="UTF-8" /> 
<title>
    Scissors
</title> 
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="rps.css" />
</head>
<body>

help?

Upvotes: 0

Views: 2039

Answers (4)

Arnav Vasishta
Arnav Vasishta

Reputation: 1

For me that happend before and I saw the same question but sometimes later I was thinking to use VSCode and it worked! The solution is to use vscode and put both the html and css code into the same folder and I'd rather use vscode since when you put a file inside a folder it shows that thing!

Upvotes: -1

Paul Murray
Paul Murray

Reputation: 105

The solution is...

  1. From a chromebook, open the Files App
  2. Locate the index.html you wish to view
  3. Double-click on the index.html file
  4. The file will open in the Chrome browser
  5. Copy all of the local address, except for "index.html"
  6. Open/Edit index.html
  7. Paste the local address into the "link" tag in the "head"

example:

link rel="stylesheet" type="text/css" href="externalfile:drive-6a0d36c37ed3c1d0c03bd5ca216484a83b9d68ae/root/CodedWebsite/style.css"

Hope this helps anyone in the future!

Upvotes: 0

Yasmin
Yasmin

Reputation: 86

I was running into the same problem when opening an HTML file from within my Chromebook; the styles would not display. When I opened the same file from my PC, the styles would display just fine.

After a lot of searching I finally ran into this article that helped me figure it out. Basically, since the Chromebook files are in Google Drive, I needed to include a direct link to the file, even though my HTML and CSS files were stored in the same folder.

Did not work on Chromebook:

<link rel="stylesheet" href="style.css">

Worked on Chromebook:

<link rel="stylesheet" href="https://googledrive.com/host/put-the-fileID-here">

You can get a file's ID by right-clicking the file in Google Drive and selecting "Get Link". Copy everything that comes after "id=".

Upvotes: 1

Rob Erskine
Rob Erskine

Reputation: 927

Never used HTML Viewer, but are you sure the path to those two css files are correct?

Upvotes: 0

Related Questions