There are three .navbar bootstrap classes in bootstrap.css file.
first .navbar rule sets display property to none.
second .navbar rule sets position, height, margin and border.
third .navbar rule is encapsulated into a media rule min-width: 768px, and sets the border-radius.
Now If I create a div with class="navbar", I expect it to be hidden. But it is not. I am not able to find out why the first .navbar is not getting applied.
If you check the CSS file the .navbar { display:none } is inside #media print {} so the browser will only apply that class when printing or using print preview.
Display:none; is under media print that is why
Related
I am writing css code in which I use a selector:
nav a:link{
background-color: orangered;
margin-right:30px;
margin-top:100px;
}
Although these properties are applied on nav, but when I inspect, it is not visible on style window (where we see different elements and dev tools). But when I use nav{ different properties }, they are visible there. What should I do?
The code you have written above seems to apply styles to the tag inside the nav tag and will not apply styles to the nav tag.
For applying styles to nav tag, you should be writing css like
nav { css properties here...}
I have :before and :after pseudo elements. I have these to change when the media rule has a screen width max-width:760px.
When the max width is 760 or > I should see a different graphic but the same :before and :after text content.
I see the new graphic but not the :before and after elements displaying.
I have tried adding the :before and after pseudo elements in the css under #media all and (max-width:760px) but without any success.
Does anyone have any idea why this is not displaying?
CSS
#infoGraph::before {width:100%; content:"Did you know..."; line-height:3rem; font-weight:bold; font-variant-caps:all-small-caps; font-size:1.4rem; margin-top:1.5rem;}
#infoGraph::after {width:100%;content:"Full text here..."; font-style:italic; font-size: 0.8rem}
#infoGraph {width:100%}
#infoGraph img {width:100%}
#media all and (max-width:760px){
#infoGraph{content: url('/site_images/new-graphic.png');}
}
Youare missing the brackets around the media rule:
#media all and (max-width:760px) {
#infoGraph{content: url('/site_images/new-graphic.png');}
}
Making responsive website,
I wrote this, it doesn't work.
#media (max-width: 767px) {
#nav { display:block; }
}
but, I wrote this, it works!
#media (max-width: 767px) {
#nav { display:block !important; }
}
Why? :(
Check your css code , something with higher specificity is changing your #nav element.
This is a little concept:
!important after the style attribute gives high priority to that style. That is why your css is working then.
!important override the existing stylesheet attribute defined in same context.
!important will override any inline style, or more specific style that may be taking precedence on your page.
For example, you can override the style on this element...
<div style='background-color:white'></div>
by adding this in your stylesheet...
div { background-color: black !important }
But!, if you add !important to the inline style, it will then take precedence, for example...
<div style='background-color:white !important'></div>
here is a good stackoverflow answer explaining the concept in a bit more detail.
Hello I'm having some issues with CSS on my blog. My Wordpress theme has a post styles section in the CSS file which have a class "Entry" in which "a" attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,
.Entry a{color:black;text-decoration:underline};
.button {background:black;color:white And some other Styling};
I used this code to display the button.
Go to this link
Without the use of class="button", the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don't want the button to use Entry a properties. Any help?
You could rewrite the first rule using the CSS3 :not pseudo-class selector as
.Entry a:not(.button) {color:black;text-decoration:underline}
This will do what you need, but it's not supported by IE versions earlier than 9.
A true cross-browser solution is more involved: you would need to "undo" the attributes that .Entry a applies in your .button rule. For example:
.Entry a {color:black;text-decoration:underline}
.button {color:white;text-decoration:none;background:black}
Update: I forgot something quite important.
If you do go the "undo" route you will need to make sure that the "undoing" selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it's not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.
For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a
For example:
.Entry a{color:black;text-decoration:underline};
.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.
There are a few ways to "fix" this:
Increase the specificity of the .button selector.For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
Use !important.Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.
If you want to learn more about specificity, here's a good article about what it is and how it's calculated.
Well in CSS3 you could do this:
.Entry a:not(.button)
That will restrict your .Entry a rule from affecting any elements with .button.
If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.
.button { border: none; /* more button styles */ }
You could overwrite any styles in .button class that are defined in .Entry a
E.g. if you dont want your text to be underlined you could use text-decoration: none
.Entry a{
color: black;
text-decoration: underline;
}
a.button {
background: black;
color: white;
text-decoration: none;
/*And some other Styling*/
}
Also don't use semicolons after braces }; in your css. simply use a brace to close }
The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.
If you only need it to work for newer browsers, then you could use the not() selector #Jon has mentioned.
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.