I was trying to link a css file to my html, and for some reason the css won't load in. Below I'll supply the html and css code. When I open the page source, the css href works fine, I can click on it and it takes me to the css file, but when I inspect I can see that the css file is not part of sources. I've tested my code on JSFiddle and it works fine there, as well as on the snippet here. I also tried pressing ctrl + f5 and shift + f5 to refresh the page without caches, but nothing changed. So I don't know what else to do to fix this. I've been doing it on Chrome so I tested it real quick on Firefox but still, no changes. Thanks in advance for any help.
raw html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="'stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
{% block content %}{% endblock %}
</body>
</html>
Runnable html and css.
li a {
color: green;
}
body {
background: grey;
}
.question-display {
border-color: black;
border-width: 5px;
position: center;
}
.question-link {
text-decoration-line: none;
}
.choices {
}
.question-container {
}
.site-header {
color: aqua;
}
.site-header-link {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="'stylesheet" type="text/css" href="/static/polls/styles.css">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="3/">What's your favorite game?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="2/">How are you?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="1/">What's up?</a></ln>
</div>
</body>
</html>
You have an additional quote in the rel= property. It should be:
<link rel="stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
Related
I'm making as simple game as a webpage with HTML/CSS/JS (no framework). I decided to try out muicss for styling. I added an appbar to the page, but there is still a white gap above it.
Here's an example:
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<link
href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
What I get
How do I get rid of the white stripe at the top? Examples from their docs don't have that. What am I missing
Add custom CSS style...
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<style>
h1 {
margin-top: 0px!important;
}
</style>
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
Immediately after posting this, I found that muicss declares a style
h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}
So the whitestripe is caused by the margin-top on the h1 element.
So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!
You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>
You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}
Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}
Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}
file structure:
app/template/base.html
app/static/css/base.css
I have created the base.html to contain the header, which I am importing to the other HTML pages to keep it the same throughout the website. And I want to style this header as well, so I am trying to link a base.css to my base.html, but no luck.
Things which i have tried are : adding inline css, adding external css,adding internal css, clearing the cache, adding a block.
code in base.html:
{%load static%}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
</head>
<body>
<nav>
<button id="myButton" >Home</button>
<button id="aboutButton" >About</button>
<button id="contactButton" >Contact</button>
</nav>
{% block content %}
{% endblock content %}
<footer>
<p>this is footer</p>
</footer>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "{% url 'home' %}";
};
document.getElementById("aboutButton").onclick = function () {
location.href = "{% url 'about' %}";
};
document.getElementById("contactButton").onclick = function () {
location.href = "{% url 'contact' %}";
};
</script>
</body>
</html>
that's my base.html code, which i want to link with base.css:
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
how i am extending the base.html to other pages is as follows,
home.html which is extending the base.html same navigation bar with other:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<html>
<head>
<title>Smooth</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<!--sample how my other html pages look like-->
I hope i have given a good idea how my file system is, how the code is in my project.
now how can i link base.css with the base.html, so that i can style the buttons in header using an external css file.
It depends on your settings, for e.g. this is how my settings for static files looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
and my base.css is located at:
/project_name/static/base.css
So you should check your setting for static files.
You can also try to change your link tag to
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
because if your settings are configured to /app/static/ when u link static like
<link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
It's looking for /app/static/static/css/base.css instead /app/static/css/base.css
I'm getting a little problem with my HTML page. I would like to set my horizontal line to the left side.
Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.
This is my little HTML script :
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
margin:left;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
(variable)
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
(variable)
</div>
</html>
And my HTML page looks like :
Do you have an idea ?
You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties.
Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px;.
Plus: It's not recommended to use inline styles, as the code becomes less maintainable. Try defining the rules in the CSS section of your HTML document or a separate CSS file.
.header {
line-height: 80%;
}
hr {
width: 10%;
display: inline-block;
}
<div class="header">
<h3> Département </h3>
<p>(variable)</p>
<hr>
<h3> Commune </h3>
<p>(variable)</p>
</div>
Just add (variable) text inside any HTML element. So that hr tag will come below it.
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
<span>(variable)</span>
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
<span>(variable)</span>
</div>
</html>
HTML file:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body>
<p>Red</p>
</body>
</html>
CSS file:
p {
color: red;
}
The word 'Red' does not change to red text when I open the page in a browser. If anyone would know why my CSS file isn't linking to the HTML file that would be greatly appreciated. The files are in the same directory.
The code you have provided has no errors.
Fiddle: https://jsfiddle.net/9n97Lz69/
Please copy & paste the following code into your html file and verify this works:
index.html:
<style>
.menu p {
color: red;
}
</style>
<div class="menu">
<p>This sentence should be red.</p>
</div>
Fiddle: https://jsfiddle.net/21umj65u/
Then move the CSS to mystyle.css and verify this works:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<div class="menu">
<p>This sentence should be red.</p>
</div>
mystyle.css:
.menu p {
color: red;
}
Please check the file location of mystyle.css and verify against the url in index.html:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Your code seems fine, perhaps "p" is already defined in your css file.Try this
.menu p {
color: red !important;
}