CODEWITHSUNDEEP
htmlcss
Pulkit Jain
Pulkit Jain

Reputation: 13

Unable to link CSS files to HTML file

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

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

Upvotes: 1

Views: 568

Answers (2)

Maimas2
Maimas2

Reputation: 961

You just have to do this:

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

Upvotes: 0

Professor Abronsius
Professor Abronsius

Reputation: 33813

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' />

Upvotes: 0

Related Questions