Unable to link CSS files to HTML file

Question

I am trying to link three CSS stylesheets to my index.php file:

bootstrap-337.min.css
font-awesome.min.css
style.css

I have successfully linked bootstrap stylesheet but I am unable to link font-awesome and style stylesheet.

I had separately tested for all three and style.css is the css file I am creating for this project.

I have also tried to put css code in style tags in php file and that worked but I am unable to link css in separate stylesheet

HTML CODE:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>online store</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap-337.min.css" >
    <link rel="stylesheet" href="/font-awsome/css/font-awesome.min.css">
</head>

style.css:

/*
Template Name   : E-commerce
Author Name     : Pulkit Jain
Theme URL       : localhost/e-commerce
Theme ver       : 1.1
*/


/*General Styles*/

body {
    font-size: 14px;
    line-height: 1.40;
    color: #333333;
    background-color: #f0f0f0;
    overflow-x: hidden;
}


/* Top Style */

#top {
    background-color: #555555;
    padding: 10px 0;
}

I am working on VS Code with Xampp Server for Ubuntu

I have tried using type attribute, '/' in the end of link tag, using '/' at the starting of the path in href:

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

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

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

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

edit: Image of the directory containing the file style.css that didn't load

edit: Image of the directory containing the file font-awesome.css that didn't load

If you open the developer console and reload the page are there any errors - specifically 404 errors referring to these CSS files? — Professor Abronsius
– Professor Abronsius, Commented Jul 12, 2020 at 14:40
Project is in dir where Xampp is located, i.e, /opt/lampp/htdocs/e-commerce e-commerce contains index.php, css, js, font-awsome etc folders. — Pulkit Jain
– Pulkit Jain, Commented Jul 12, 2020 at 18:25
Have you tried loading them in a different order so that style is loaded last? This will ensure that bootstrap or fontawesome isn't overwriting what you have in style. — Jason Aller
– Jason Aller, Commented Jul 12, 2020 at 19:10

Professor Abronsius · Accepted Answer · 2020-07-18 12:14:46Z

0

Looking at the images you posted and from comments made I think you were not correctly referencing the files in whichever folders they were in - from the images I think the paths might be as follows.

<link rel='stylesheet' href='/e-commerce/css/bootstrap-337.min.css' />
<link rel='stylesheet' href='/e-commerce/css/style.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.min.css' />

answered Jul 18, 2020 at 12:14

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pulkit Jain Over a year ago

That worked partially, font-awesome.min.css started working but style.css is still not working.

Professor Abronsius Over a year ago

you must confirm the paths involved. The screenshots did not clearly show the paths involved so it was a guess...what is the FULL path to those folders?

Pulkit Jain Over a year ago

actually screenshot showed the full path clearly. For style.css , opt\lampp\htdocs\e-commerce\css\style.css is the absolute path

Professor Abronsius Over a year ago

if the font-awesome and styles css files are in the same folder and the path is now correct either styles.css is loading and it's effects are unobserved or some other issue is preventing that file being loaded ( .htaccess perhaps or server config ??? )

Pulkit Jain Over a year ago

font-awsome.css and style.css are in different folders, font-awsome.css is in font-awsome folder in e-commerce project dir, while style.css is in css folder in e-commerce dir which is same as bootstrap.min.css.

|

Maimas2 · Accepted Answer · 2020-07-18 13:31:43Z

0

You just have to do this:

<link rel = 'stylesheet' type = 'text/css' href = 'style.css'>

answered Jul 18, 2020 at 13:31

Maimas2

98110 silver badges29 bronze badges

3 Comments

Pulkit Jain Over a year ago

that's not correct because style is inside a folder css

Maimas2 Over a year ago

@PulkitJain Oh, sorry, it's a little confusing, as the folder is called css. Have you tried it?

Pulkit Jain Over a year ago

i have tried many things, and those are mentioned above.

Collectives™ on Stack Overflow

Unable to link CSS files to HTML file

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related