I have a very confusing problem and I'm not sure what's wrong. My CSS styles completely disappear when I add the media attribute to the link tag in the head of the html file. When I remove the attribute, the styles show up just fine. But I need this attribute to set the size for the display. Here is what I have in my head:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="DesktopCss.css" media="screen and (max-width:481px)" >
</head>
Anyone know what the problem can be? Thanks.
You probably just copied the media query without understanding what's happening in it. Or else you simply overlooked the error in it.
Your query defines that this css file should be used only up to maximum screen size of 481px. Which is highly likely what you're not trying to do.
You should change max-width to min-width to make it work.
Also one more change that I would recommend is using all small case in the file name of your css file, and also changing the original name of your file on your server to small case, to avoid browser incompatibility issues.
Your code should look something like this:
<head>
<title>Learning Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="desktopcss.css" media="screen and (min-width:481px)" >
</head>
If you're trying to load CSS that will apply to a desktop browser, unless you're using the world's smallest monitor, you should be saying
screen and (min-width:481px)
Related
My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.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">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.
Im trying to link my css file in the html file but anything ill try doesnt work.
changing paths
creating another file/folder
renaming
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<meta charset="utf-8">
<title>Gamerologie</title>
</head>
.h1 {
font-size: 300px;
}
this title need to change it's color to red but nothing happens
I may have misunderstood your question, but the CSS you are providing isn't supposed to change the font's color, just the size. In addition to that, you are selecting every item whose class is "h1". Only when you remove the dot, you'll be selecting every h1. Hope that helps!
I am creating mvc4 application. I want to set background in layout.cshtml. Issue is that my background image is repeating even after setting a tag of background-repeat:no-repeat. I Google it a lot and tried different approaches told there. But none of them helped me out. Any help in this regard? My background image is paced in the Images folder created in my app. Here is the simple code of my layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="bootstrap.css" rel="stylesheet" />
<script src="bootstrap.js"></script>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
You error is in the line:
<body style="background-image:url(Images/blue.jpg)" "background-repeat:no-repeat">
in which you're using too many ".
You need to use semi-colons instead to differentiate between one style and the next. So instead, make it:
<body style="background-image:url(Images/blue.jpg); background-repeat:no-repeat">
for it to work.
Side Note
Styling inline is generally avoided, as it leads to multiple problems from a css point of view. Try setting this inside your css file instead.
Your css would then include:
body{
background:url(Images/blue.jpg);
background-repeat: no-repeat;
background-size:100%; /*if you wanted to 'fill' the page to max size without cropping*/
}
DEMO
To completely 'fill' the page, you need to add a size to your html as well,
DEMO
Give inline style as follows:
<body style="background-image:url(Images/blue.jpg);background-repeat:no-repeat;">
The problem is to, you need to put the single quotations between inside the url also you missed one forward slash as well.
<body style="background-image:url('/Images/blue.jpg'); background-repeat:no-repeat;">
From Code Academy's Make a Website: CSS Styling:
<head>
<link href="font.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
"Inside the head element are two link elements. The order of these
link elements matters.
The browser first sees the link for the custom font font.css, and
makes the font available to use in the page.
Next the browser sees the link for main.css. Since the browser now
knows about the custom font, we can use it from main.css to style
elements."
I want to have an intuition/answer as to why does the order matter (link to fonts before the main CSS stylesheet)?
I tried to do it in the other order (link to main stylesheet before link to fonts) and it still worked.
Order matters when you're overriding CSS definitions. This is part of the "cascade" of cascading style sheets. If main.css does not contain any font definitions, then the order doesn't matter.
For example: you were given a default CSS file from a designer, but you need to tweak it a little. Instead of editing the default.css file, you create a custom.css file and change only the handful of definitions that you wanted to tweak. Now the order matters.
<head>
<link href="default.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
If you were to put custom.css first, then your changes would never appear.
Here's an article that gets into various levels of further detail. Warning, it can make your head spin.
I have a wordpress theme which have its default styling, I developed a new page template and wrote some styles specifically for it but for some reason the styles aren't being applied.
The styles include table cell-padding.
When inspecting the code, the css I applied is being stroked out. How can I force that CSS to apply itself. I have already tried using the !important but still no success
usually if you are developing your own theme for wordpress that there are no problems with the application of styles possible presence of an error in the connection of style, even when finished remaking theme personally I have no problems
Sometimes you have to use all classes and ids of div to declare style for it. Anyway you shouldn't use !important, but try to describe your div precisely.
Write CSS (stylesheet) at the end of the all css files in header, Write css in Hierarchy level. select parent class or id and written down css
CSS Declaration in Header
<head>
<link rel="stylesheet" type="text/css" href="defaultwordpress.css">
<link rel="stylesheet" type="text/css" href="own.css">
</head>
Can you make sure your own CSS code is called after the main CSS code ?
Maybe by changing the order of CSS calls in your head section like this :
<head>
<link rel="stylesheet" type="text/css" href="defaultWordpress.css">
<link rel="stylesheet" type="text/css" href="myOwn.css">
</head>
edit : default Wordpress css first :-)