I am facing difficulty in implementing external CSS in my HTML document

Question

I am facing difficulty in implementing external CSS in my HTML document

I am encountering an error in the browser console, could someone please explain what it means?This is a screenshot of the HTML file displaying the error.

https://i.sstatic.net/8Y7Ri.png

Currently, I am working on a web page using Bootstrap. I have included the Bootstrap CSS and my own CSS within the "head" tag. Here is the code-

 <head>


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--Bootstrap css-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <title>
        first web page using bootstrap
      </title>
<!-- Font awesome for brand name-->
      <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"> 

      <!--Our CSS-->
      <link rel="stylesheet" href="CSS\style.css" >

  </head>

Below is the CSS code I have added:

.mybanner{

  background-color: rgb(12, 8, 5);
  text-align: center;
}


.mybg{

  background-color: rgb(161, 86, 86);
}

.other{
  width: 30px;
 height: 30px;

}

The complete code including the HTML, CSS, and Bootstrap components have been included. However, the classes do not seem to be working as expected. Please provide some guidance on where the issue may lie. Thank you.

css bootstrap-4

Answer 1

Answer №1

To navigate from the current html folder, use ".." to go up one level, then specify the folder to enter, which is /CSS/. Finally, select the file style.css like this:

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

Answer 2

To navigate from the current html folder, use ".." to go up one level, then specify the folder to enter, which is /CSS/. Finally, select the file style.css like this:

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

Answer 3

Answer №2

Kindly make this exchange:

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

Replace with:

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

UPDATE: As @renaldo-balaj mentioned, since you are inside an HTML folder, you must use ../ to move up a level in your folder structure before accessing the CSS folder and retrieving styles.css

Additionally, note that you mistakenly used \

UPDATE 29/11:

I have removed the unnecessary HTML to demonstrate that the solution is correct. Perhaps the implementation is not correct on your end. There are already numerous posts on the same relative path issues, so this post should be closed due to redundancy and lack of context.

<!DOCTYPE html>
<html lang="en">
  <head>


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>
        first web page using bootstrap
      </title>

      <!--Our CSS-->
      <link rel="stylesheet" href="../CSS/style.css" >
  </head> 
<body>

</body>
</html>

body {
    background-color: black;
}

Folder Structure:

Project
│ 
│   
├───CSS
│       style.css
│       
└───HTML
        index.html

Allow me to elaborate on the issue further.

\ backslashes are not used in file paths, as mentioned in @birspider's answer and supported by the HTML validator.

Your index.html is located in an HTML folder, which is unconventional for a static website. Therefore, unless your CSS file is in the same directory as the HTML file, you need to utilize ../ to move out of the HTML folder, followed by /CSS to access your CSS folder, and finally /style.css to fetch the style.css file to display it correctly.

Your DevTools console would have indicated where it was attempting to locate the file, aiding you in debugging.

Please consider closing this post and selecting a solution.

Here is an image from my browser showing that the background-color: black; is functioning from the style.css file: https://ibb.co/ys1Kvvt

Answer 4

Kindly make this exchange:

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

Replace with:

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

UPDATE: As @renaldo-balaj mentioned, since you are inside an HTML folder, you must use ../ to move up a level in your folder structure before accessing the CSS folder and retrieving styles.css

Additionally, note that you mistakenly used \

UPDATE 29/11:

I have removed the unnecessary HTML to demonstrate that the solution is correct. Perhaps the implementation is not correct on your end. There are already numerous posts on the same relative path issues, so this post should be closed due to redundancy and lack of context.

<!DOCTYPE html>
<html lang="en">
  <head>


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>
        first web page using bootstrap
      </title>

      <!--Our CSS-->
      <link rel="stylesheet" href="../CSS/style.css" >
  </head> 
<body>

</body>
</html>

body {
    background-color: black;
}

Folder Structure:

Project
│ 
│   
├───CSS
│       style.css
│       
└───HTML
        index.html

Allow me to elaborate on the issue further.

\ backslashes are not used in file paths, as mentioned in @birspider's answer and supported by the HTML validator.

Your index.html is located in an HTML folder, which is unconventional for a static website. Therefore, unless your CSS file is in the same directory as the HTML file, you need to utilize ../ to move out of the HTML folder, followed by /CSS to access your CSS folder, and finally /style.css to fetch the style.css file to display it correctly.

Your DevTools console would have indicated where it was attempting to locate the file, aiding you in debugging.

Please consider closing this post and selecting a solution.

Here is an image from my browser showing that the background-color: black; is functioning from the style.css file: https://ibb.co/ys1Kvvt

Answer 5

Answer №3

Looks like there are some issues with your HTML markup:

Why not give a try? It will help you identify the errors, such as:

Error: Bad value CSS\style.css for attribute href on 
element link: Backslash ("\") used as path segment delimiter.

At line 20
   <link rel="stylesheet" href="CSS\style.css" >

---

Error: Bad value ../Image\unsplash.jpg for attribute src on 
element img: Backslash ("\") used as path segment delimiter.

At line 84
          <img src="../Image\unsplash.jpg"  alt="Los Angeles" style="width:100%;">↩  

---

Error: Duplicate attribute class.

At line 124

ass="row" class="mybanner" sty

Answer 6

Looks like there are some issues with your HTML markup:

Why not give a try? It will help you identify the errors, such as:

Error: Bad value CSS\style.css for attribute href on 
element link: Backslash ("\") used as path segment delimiter.

At line 20
   <link rel="stylesheet" href="CSS\style.css" >

---

Error: Bad value ../Image\unsplash.jpg for attribute src on 
element img: Backslash ("\") used as path segment delimiter.

At line 84
          <img src="../Image\unsplash.jpg"  alt="Los Angeles" style="width:100%;">↩  

---

Error: Duplicate attribute class.

At line 124

ass="row" class="mybanner" sty

I am facing difficulty in implementing external CSS in my HTML document

Answer №1

Answer №2

Answer №3

Similar questions

Expanding and collapsing all elements with Angular Bootstrap 4's collapse feature

Is there a way to implement the border-box property for Internet Explorer versions 6 and

Struggling to ensure buttons on my page respond and resize properly alongside the other elements

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Changing the color of an element on click using jQuery's .css() method,

Ways to position an element at the edge of the browser either on the left or right side when the image is not in a centered container

Choose with text partially aligned on the right side

I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Ways to modify the header dimensions using CSS

Styling a div to wrap around an image

Text randomly appears on the html page

The background color spills outside the column when using 100% width

Creating a sliding bottom border effect with CSS when clicked

Button with small width containing an icon and text

Change the width of the webpage inside the iframe

Having trouble getting your Bootstrap v4 carousel to function properly?

the neighboring div sliding to the left causing the div not to expand with its content

jQuery - Modify Turn.js to exclusively implement the page Peel effect

Emphasize the checkbox