It should work fine. try more lighter color #666.
Answer from Nahar on Stack OverflowIt should work fine. try more lighter color #666.
QUICK FIX: In your css file use '!important'. This will override the conflicting CSS you have unless you have used it in the first place.
p.gray { color: #333333 !important; }
REAL FIX: Was mentioned above. Use firebug (FireFox plugin) and inspect the element to see what CSS is affecting the element in question.
I discovered the answer to my question. In react-bootstrap, the markup for adding classes is different for JSX than it is in regular HTML. Instead of
<div class="hero">
You must label it:
<div className="hero">
The reason the id was populating is that applying an id to an element in JSX is the same as it is in HTML.
Other divs might be hiding that div. Try to you put in your CSS a margin for your div to see where it is located.
Update:
You need to use className as the attribute for HTML elements for classes instead of class. Because class can conflict in react. So try like below;
return (
<div id="homePage">
<div className="hero">
</div>
</div>
);
For whatever reason, the class I created in a separate CSS file is not being applied to tags with that class attribute. I know its being read in right, as other elements work just fine. But classes dont. Anyone know whats going on?
HTML file
<!DOCTYPE html>
<html>
<head>
<title>Taco Bell Sauce Museum</title>
<link rel="stylesheet" type="text/css" href="assign4_Style_Sheet.css">
</head>
<body>
<header>
<h1><img src="tacobell.png" alt="Logo" height="110px" width="110px"><br>Sauce Museum</h1>
</header>
<div id="main0">
<div id="main">
<div>
<div>
<div class="leftFloat">
<img src="CryingPepe.png" alt="NoPic" height="25%" width="25%">
</div>
<p>
Hot Sause
</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS file
body {
background-color: #3A167E;
}
#main {
text-align: center;
margin: auto;
width: 70%;
}
header {
text-align: center;
font-family: Tahoma;
color: white;
font-size: 18pt;
}
#main0 {
width: 100%;
background-color: #ffffff;
position:absolute;
left:0;
right:0;
}
h2 {
text-align: center;
font-family: 'Segoe UI';
color: purple;
font-size: 16pt;
}
p {
font-family: 'Trebuchet MS';
font-size: 14pt;
}
.leftFloat {
float: left;
margin-left: auto;
}
.rightFloat{
float:right;
margin-right: auto;
}I know its probably some stupid rookie mistake but I've been banging my head against this for an hour now.
There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.
Posting, since it might be useful for someone in the future:
For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl + shift + R) to get the new styles applied, it seems the old ones got cached really "deep".
This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav"><a href="contact.html">Contact</a></li>
<li class="header_nav"><a href="projects.html">Projects</a></li>
<li class="header_nav"><a href="about.html">About</a></li>
<li class="header_nav"><a href="index.html">Home</a></li>
</ul>
</nav>
</div>
</body>
</html>UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
I'm trying to call a class but when I load my website it doesn't change anything.
This is the html script:
<!doctype html>
<html>
<head>
<title> Practice Website </title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<h2> Practice website. </h2>
<p class="yes"> It is nothing special. I am just trying to improve my skills as a web developer. </p>
<p> If you would like to visit another site, please click on one of the links below: </p>
<ul>
<li class="one"><a href="http://www.google.com"> Google </a></li>
<li class="two"><a href="http://www.reddit.com"> Reddit </a></li>
<li class="three"><a href="http://www.youtube.com"> Youtube </a></li>
</ul>
</html>And this is the css script:
body {
background:white;
color:grey;
padding:10px 250px;
font-family:arial;
}
.yes {
color:red;
}I'm trying to make just the one paragraph red using the "yes" class but when I view my website it doesn't go red. Anyone know why?
LPChip suggested me to use the debugger/inspector of Firefox and there, the head is greyed out. On further investigation, I noticed it said "css was not loaded because its mime type "text/html" is not "text/css"
That made me check something...
I got the solution:
I had an apache mod_rewrite activated. While the path was correct, it seems that this mod_rewrite or the dedicated php for the redirection somehow told the browser that the file was html not css.
I had a similar issue. Was setting up a NGINX from scratch and all the styles for my project were not applied. But they existed and I did not had any other error.
I found out that I had to apply the correct mime types to all files served by NGINX. Before the fix it was text/plain and this did not worked.
I fixed it by adding those lines to NGINX configuration:
http {
# other config before ...
include /etc/nginx/mime.types;
default_type application/octet-stream;
# rest of config ...
}
CSS doesn't differentiate between inline, in-page or linked styles. If results between those methods differ, the reason is either erroneous including of the external file or the load order of your CSS, neither of which could be judged from the info in your question.
Furthermore, there are several problems and things to improve with the code in your question:
- As @FrédéricHamidi commented, you're not using the content property as you should - it's only valid use is within
:beforeand:afterpseudo-elements. - Your
imgelement doesn't have asrcattribute, and possibly should have analtattribute as well (since this isn't part of the question, I won't go into great detail, but a good description can be found on the MDN page. - Since you're using a CSS file to store your page styles, you shouldn't rely on inline styles whatsoever. Instead, add the respective attributes to those elements and address them via CSS selectors. This will give you long-time maintainability, good task management (HTML files structure content, CSS files handle display) and won't look like your first HTML page.
- There is very little chance you actually need the
floatproperty on an absolute positioned element.
That being said, since you're apparently trying to set a background image, here is the code you would need for that:
<style>
.wrapper {
position: absolute;
right: 0;
}
.MyClass123 {
background-image: url("img/ic_datos_activo_48px.png");
max-width: 100%;
max-height: 30px;
}
</style>
<div class="wrapper">
<div class="MyClass123"></div>
</div>
If instead you need the image to be a part of the document flow, use the img element for that purpose. If you need to change those with CSS (this would mostly be the case if you did some JS manipulation), a clean way to do it would be to creature multiple image elements and hide them as needed:
<style>
.image2, .image3 {
display: none;
}
</style>
<div>
<img class="image1" src="img1.jpg" alt="Image 1" />
<img class="image2" src="img2.jpg" alt="Image 2" />
<img class="image3" src="img3.jpg" alt="Image 3" />
</div>
If you need to set the src to a previously unknown value entirely, you would be better off solving this via JS anyway, as CSS is for design purposes, not for content manipulation (with a handful of exceptions, yours not being one of them). For completeness' sake, here's a jQuery one-liner on how to tackle the problem:
$('.MyClass123').attr('src', 'new_url.jpg');
Change the code to:
.MyClass123 {
max-width: 100%;
max-height: 30px;
float: left;
position:absolute;
right:0
}
<div>
<img class="MyClass123" alt="Image" src="img/ic_datos_activo_48px.png"/>
</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (@media screen) brackets
@media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}