Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Head section
<head>
<meta charset="utf-8">
<title>Kaffehaus Mannfredo | Home</title>
<link rel="shortcut icon" href="../1_pics/favicon.ico" />
<link rel="stylehseet" type="text/css" href="../2_css/general.css">
<link rel="stylesheet" type="text/css" href="../2_css/nav.css">
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
First CSS
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
font-family: 'Open Sans', sans-serif;
margin:0px;
float: none;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 15px 17px;
text-decoration: none;}
li a.active {
background-color: #4CAF50;}
li a:hover:not(.active) {
background-color: #555;
color: white;}
.navbar-nav {
width: 100%;
text-align: center; }
Second CSS
body {background-color: black;}
I am trying to add 2 CSS files in 1 html. The second one is not working.
In the first one I format my navbar, in the second I want to make a basic layout for the whole page, any tips?
This line is invalid
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
Remove the semi colon
<link href='fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Semi colons are used for property value pairs not for use randomly inside of a <link> tag.
Please provide your code.
If I understand correctly one CSS is working and the other is not so probably there is an error in your syntax.
Check that you have the correct path for the CSS files and the correct names. If you copied and pasted it be sure that you changed the name of the second.
Bellow is an example of two different CSS files named 1 and 2 that are inside a folder named css.
<link rel="stylesheet" type="text/css" href = "css/1.css" />
<link rel="stylesheet" type="text/css" href = "css/2.css" />
If your files are not in a folder just remove the "css/" part.
Are you sure all of your files are loading?
Press F12 and check the console,
It will give
uncaught error failed to load
or something similar
You can add as many css as you want.
Either from external files with :
<link rel="stylesheet" type="text/css" href="PATH_TO_YOUR_FILE">
Or inside your html file with :
<style>
/* ...Some css...*/
</style>
If there are conflicts between the two css (styling the same element), you need to add specificity because the second one is overriding the first one.
For example :
/* first css file */
h1{
color:blue;
}
/* second css file */
h1{
color:red;
}
In this case, h1 will be red everywhere.
So In the first css file you have to be more specific by adding a class, or id to the selector :
/* first css file */
.navbar h1{
color:blue;
}
Take a look at CSS Specificity
Related
I'm relatively new to this but as far as I can tell from my research, this should be working. I'm trying to link a css stylesheet to an .erb file. Here is the code I'm using:
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
I've also tried
href="./css/stylesheet.css"
and
href="css/stylesheet.css"
for reference my erb file and css file both sit in different subdirectorys of the same main directory. Here is the code contained within my stylesheet, just in case this is the problem:
body {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
background-color:powderblue;
}
h1 {
font-family: verdana;
}
h2 {
font-family: sans-serif;
}
With a server.rb like
require 'sinatra'
set :public_folder, __dir__ + '/static'
get '/' do
erb :index
end
A views/index.erb like
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
Hi!
And your stylesheet in static/css/stylesheet.css it should work, the important bit you may be missing is setting the public folder.
[Answered]
the style of the body of the website I made is overwriting color variables I use to implement themes to my website. The problem is that the style is not in my code. I only changed the color values on the :root{}, first I thought it might be some caching issue but rebooting my computer doesn't work.
here is an image of my problem, what is weird to me is how some variables are spelled differently:
I wonder where the CSS in the purple box is coming from.
here's my relevant code:
css:
:root {
--primary-color: #fff;
--secondary-color: #f2f2f2;
--tertiary-color: #333;
--quaternary-color: rgba(238,238,238,0.2);
--quinary-color: #000;
--senary-color: #000;
--septenary-color: #000;
--octonary-color: #000;
--nonary-color: #000;
--denary-color: #000;
--highlights: #4CAF50;
--warnings: #F00;
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
background-color: var(--primary-color);
}
html (in php):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./includes/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="./includes/jquery-3.1.1.min.js"></script>
<style>
body{
background-image: url("BG.png");
background-repeat: no-repeat;
background-size: auto;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="navbar">
</div>
<div id="sidenav">
</div>
<div id="content">
</div>
</body>
</html>
the file structure looks like the folowing:
web[
includes[
main.css,
jquery-3.1.1.min.js
],
index.php,
BG.png
]
^if that makes sense
In the rest of my code no style tag is used to asign CSS, as said I tried rebooting, I got disable cache checked, Incognito doesnt work, commenting the cdnjs.cloudflare.com CSS out also has no effect. If you want any more info please ask.
Thank you very much for taking your time to read this!
I had this bit of js, which I completely overlooked:
<script>
function setColorTheme() {
document.body.style.setProperty('--primary-color', "#fff");
document.body.style.setProperty('--secondary-color', "#f2f2f2");
document.body.style.setProperty('--tertiary-color', "#333");
document.body.style.setProperty('--quaternary-color', "#eee");
document.body.style.setProperty('--quinary-color', "#000");
document.body.style.setProperty('--senary-color', "#000");
document.body.style.setProperty('--octonary-color', "#000");
document.body.style.setProperty('--nonary-color', "#000");
document.body.style.setProperty('--denary-color', "#000");
document.body.style.setProperty('--highlights-color', "#4CAF50");
document.body.style.setProperty('--warnings-color', "#F00");
}
</script>
I am sorry for asking this question, some say there's no such thing as a dumb question, this one proved em wrong.
Thanks to #Stephen P for pointing out it could be added by js.
I'd like to be be able to link to the rule for the class "button" in multiple sheets and have it defined in one sheet such that I only need to edit it once to edit all my buttons.
Example:
mystyle.css reads:
.button{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
height: 45px;
width: 140px;
background-color: #9999ff;
text-align: center;
padding-top: 6px;
border-radius: 25px;
}
I want when I create a new page to be able to say something like
.button {
url:("../mystyle.css/.button")
}
This one was down to me not understanding how HTML loads styles.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../mystyle.css">
<link rel="stylesheet" type="text/css" href="./newpage.css">
</head>
Will load all the CSS for the buttons and then if both files define the same element, style according to newpage.css
You can achieve this with the #import at-rule:
#import "buttons.css";
or by using a CSS processor such as SASS to combine the files at build time.
You could also import multiple CSS files into a single HTML document by using multiple <link> elements.
Try to include your base css in your child css sheet like;
#import url("base.css");
I am making a hangman game. And I am working on styling everything. I am including CSS reset in my HTML and I think it is causing my tags to error out. Like my H1 tag isn't working now. Any thoughts?
The H1 tag should make my text big and bold. However that is not working. The linked stylesheet I am using is empty right now. When I remove the CSS Reset link the H1 then works correctly.
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container" id="gamebox">
<h1>Hang-Person</h1>
</div>
</body>
<script src="assets/javascript/game.js"></script>
</html>
The last script tag is outside the body tag. It should be inside
Be aware to not repeat the same properties for each object in CSS.
Example:
In reset.css:
body {
margin: 0;
text-align: center;
}
And in style.css:
body {
margin: 20px;
text-align: justify;
}
It might cause the browser to get confused, I recommend you to do CSS reset in only one of your stylesheets. You can do it in the other one as well, but it won't be as efficient.
Here you have the universal CSS reset code:
* {
margin: 0;
padding: 0;
}
After this, you can specify the margin or padding to every element, although it violates the DRY (Don't Repeat Yourself) principle.
CSS Working example:
* {
margin: 0;
padding: 0;
}
.object1 {
padding: 70px;
}
It would be more helpful if you post the CSS code for better answers.
Last but not least, the last <script src="assets/javascript/game.js"></script> tag should be inside the body tag.
EDIT: try with the universal CSS reset code and keep the linked stylesheet.
My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.
I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is`
<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
Here is the HTML code of attributes I want to change`
<h1>Space</h1>
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
And here is my main.css, which takes effect only when the bootstrap line is deleted.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}
I have tried !importnant tags too.
I am not a bootstrap expert, but .parallax and .parallax-inner sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.
If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...
To override a pre existing style use !important after your CSS rule. For example.
h4 {
font-size: 14px !important
}
The above rule will override any other font size assignment for h4
You have to be more specific if you want to bypass conflicts with bootstrap styles.For example, you could target .parallax div with its parent element.
In CSS, a period . denotes a class. If you want to work with the tags alone, simply put 'h1' instead of '.h1' in your css stylesheet.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}