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
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' />
You just have to do this:
<link rel = 'stylesheet' type = 'text/css' href = 'style.css'>
Related
I have my layout.html file in the 'templates' directory and my styles.css file in the 'static' directory. Both are in my project folder named 'books-cs50w'. does not work though. I ve probably read all the google-able posts on absolute and relative paths, but for some reason my css is not applied to my layout.html. I had it at the bottom and and at the top of my bootstrap-stylesheets to make sure it's not a matter of being overwritten. To test the actual CSS, I pasted the code directly in -tags inside the layout.html file - it works. But no matter what I do when it's external - it won't read it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet" >
</head>
The CSS to test it is:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
h1, h2 {
color: red;
background-color: green;
}
body, head {background-color: green;
color: yellow;
}
enter image description here
You need to go one level up from your current templates folder by prepending ../ to your css path and now that you're one level up and currently in the main books-cs50w project folder, you can just navigate to your static folder and access the css file.
Change this line:
<link href="/static/styles.css" rel="stylesheet" >
To this:
<link href="../static/styles.css" rel="stylesheet" >
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/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">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
I have a local /swagger-ui.html that is served from a different package/library. I want modify the style, thus I thought about embedding it into my own index.html and adding some css style overrides to it:
index.html:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
</head>
styles.css (same folder):
.swagger-ui .scheme-container,
.swagger-ui .topbar {
background-color: red !important;
display: none !important;
}
Result: I'm not seeing any changes on the styles. Why?
Try to switch the following lines
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
to:
<link rel="import" href="/swagger-ui.html">
<link rel="stylesheet" href="styles.css">
<html>
<head>
<title> HELLO </title>
<link rel="stylesheet" type="text/css" href="back.css"/>
</head>
<body>
<h1> WELCOME TO THE NEW WORLD </h1>
<p> This is the world of Oppurtunities </p>
</body>
</html>
the css file is below.
body{
background-color: darkslategrey;
color: azure;
}
h1{
color: coral;
}
You question is pretty vague but your path to the CSS is probably off.
Without more info on your dev environment this is my best suggestion.
Change your CSS link to...
<link rel="stylesheet" type="text/css" href="../back.css"/> Notice the ./back.css
This may not be the correct path to the file but your issue lies in your relative path. It all depends on your file structure.
Basic Examples
<link rel="stylesheet" type="text/css" href="/back.css"/>
<link rel="stylesheet" type="text/css" href="../back.css"/>
<link rel="stylesheet" type="text/css" href="/someFolder/back.css"/>
Perhaps putting the css file into a folder might work out.
<link rel="stylesheet" type="text/css" href="styles/back.css"/>
That usually does the trick, let us know ;)!
I made a simple responsive website and everything is working great when browser reads file from my computer but when I put it on my server Mozilla is not loading CSS. It loads fine in Chrome and IE.
Here is the HTML code:
<head>
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css\normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css\main.css">
<link rel="stylesheet" href="css\responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And CSS (in main.css) starts with this:
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Is it a problem with encoding? Is there anything I should put in main.css and responsive.css file?
I didn't change any settings in Mozilla and my version is 31.0.
Website: http://test.mateajdukovic.com
Thanks!
The errors are:
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cnormalize.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cmain.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cresponsive.css"
Try changing the \ to / in your HTML.
I am not sure But according to me you should use forward slash.
instead of "\" use "/" in your path of hreg tag
i.e.
use this:
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Rest all seems good.