Css style sheet will not link with HTML page.

Question

0.00/5 (No votes)

See more:

Hello,i am creating a website. I have already created my home page and i had no problem linking my home page html page with my css style sheet but i am having a problem linking my second html page with my css style sheet. By the way i have different css style sheet for different html page. Am i missing something?

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>AfroChic</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <link rel="stylesheet" href="style/hair.css">
</head>
<body>
	
	<nav class="navbar">
	<span class="open-slide">
		<a href="#" onclick="openSlideMenu()">
		<svg width="30" height="30">
                <path d="M0,5 30,5" stroke="#F76C6C"
                stroke-width="5"/>
                <path d="M0,14 30,14" stroke="#F76C6C"
                stroke-width="5"/>
                <path d="M0,23 30,23" stroke="#F76C6C"
                stroke-width="5"/>
 </svg>
</a>
</span>

 <ul class="navbar-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="hair/hair.html">Hair</a></li>
      <li><a href="makeup/makeup.html">Make up</a></li>
      <li><a href="skincare/skincare.html">Skin Care</a></li>
      <li><a href="blog/blog.html">Blog</a></li>
    </ul>



  </nav>

What I have tried:

I have been looking online for a solution for more than two hours and i have tried everything that i know, i only just started coding so i don't know a lot.

Posted 6-Feb-19 12:57pm

Member 14142347

Updated 8-Feb-19 0:41am

Add a Solution

Comments

Prifti Constantine 7-Feb-19 3:28am

Which one goes where? Where does the cdn go and where the locan css file?

Mohibur Rashid 7-Feb-19 3:34am

is your first html and second html are in the same directory.

Member 14142347 7-Feb-19 4:45am

No they are in different directory

Richard Deeming 7-Feb-19 16:39pm

Did you remember to update the href in the stylesheet <link> to account for that?

HTML File Paths[^]

For example, if the HTML is in hair/hair.html and the stylesheet is in style/hair.css, then the link would be:

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

Note the ../ at the start which moves up to the parent directory.

Member 14142347 7-Feb-19 19:15pm

Thanks for the reply, I added ../ and it worked. Thank you

Bob@work 7-Feb-19 12:45pm

After creating a local CSS "/style/hair.css", and assigning the font-family "lobster" to everything, it seems to work. It takes a moment to load the Google font the first time. What does your local CSS file look like? Could it have an error preventing the desired appearance?

/* style/hair.css */
* {font-family:lobster;
font-size:20pt;
}

Mohibur Rashid 7-Feb-19 21:53pm

I know you got your solution, but have you learned anything from this?

Member 14142347 8-Feb-19 1:45am

Yes, ../ means a directory two levels above the current one. So when I am trying to link a file that is in another folder I have add this ../

Mohibur Rashid 12-Feb-19 2:55am

not two level, one level
Say, you are in the following directory
> cd /var/www/html/
> ls *
index1.html
another_dirctor/index2.html
css/main.css

index1.html address main.css as
css/main.css
but
another_dirctor/index2.html address as
../css/main.css
since css belongs to the parent directory of another_dirctor/

you can avoid this whole and address the path in the same way anywhere in the project by putting absolute file path
say your host is
www.liveblog.com
and in the root of the html project you have css/main.css
then your src can be
//www.liveblog.com/css/main.css

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-02-08T00:41:00

Solution 1

As discussed in the comments, adding a leading "../" to the path resolved the issue.

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

Posted 8-Feb-19 0:41am

Richard Deeming

Css style sheet will not link with HTML page.

1 solution

Solution 1

Add your solution here

Preview 0

Css style sheet will not link with HTML page.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us