CSS works in html but not external

#1

My site isn’t referencing the external style sheet. If I do the styling in the index.html file, it works.

I am able to load the site in Chrome as a local file and it references all the styles and other pages just fine.

The code is short and sweet. I’m stumped on this. (For this post, I had to remove the front < b/c it wouldn’t display the HTML code otherwise.)

!DOCTYPE html>
html lang=“en”>

head>
meta charset=“utf-8”>
title>MC Professional Biography
link href=“css/landingpage.css” rel=“stylesheet” type=“text/css” media=“screen”>
/head>

body>
div class=“aboutbutton”> About Me
/body>
/html>

body {
background-image: URL(’…/images/mcstandingprofile.jpg’);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}

.aboutbutton a:link,
.aboutbutton a:visited {
color: white;
}

.aboutbutton {
position: absolute;
left: 50%;
Top: 70%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-size: 300%;
color: black;
background: transparent;
}

#2

For code examples, you can use Markdown code fences (```), like this:

```
<html>code</html>
```

One immediate problem I see is that the background image uses a triple dot (...), instead of double-dot (..) to reference the jpeg.

#3

Thanks for the response and the fences tip.

It’s odd that there’s three dots here. Inside the file that lives on the server it’s only two dots. Maybe I added one by accident to my post.
Screen Shot 2021-05-19 at 5.55.54 PM

#4

Maybe the next thing to look at is the stylesheet HREF attribute. It is a page-relative URL, which may malfunction on subpages:

<link href="css/landingpage.css" rel="stylesheet" type="text/css" media="screen">

Using an absolute URL, like /css/langingpage.css might help.

#5

If your css directory is in the same directory as your index file then try forming the link href using a more complete relative path:

./css/landingpage.css

⠀
⠀

The forum app magically expands double dots ‘..’ to elipses ‘…’ unless you contain them within single ` back ticks or ``` full code fencing as @habilis points out.

#6

Found the issues. Relative path didn’t seem to be an issue, but is probably something I should get in the habit of doing anyhow just in case.

In this instance, I must have been working off files from an older directory. The folder references in my paths weren’t capitalized but should have been.

Thanks for all the help.

#7

There was no capitalisation in your posted code. Perhaps you inadvertently used capitalisation when naming your directories.

It is better practice to avoid any form of Capitalisation or CamelCase or other-Ideas when naming directories or formatting system paths. The best bet is to stick with all lowercase. Boring, yet ./bulletproof.

(and_avoid_using_spaces_too)

1 Like