I'm having trouble overriding bootstrap's css code.
I have included my own stylesheet AFTER bootstrap's code, but it doesn't seem to be working.
I know that a soft override like simply having a style.css that reads:
a {
color: #c54bb7; (it's a sort of red)
text-decoration: none;
}
probably won't work as bootstrap has more specific css that has priority over that one. However, you can see in this picture the link text is green because of the simple a{} config in bootstrap, and that's it. Which means mine should have priority, as it is after the bootstrap css, correct? I'm not sure what i am doing wrong here. I want all links to be red.
https://i.gyazo.com/bf06b0a3990927ed019bf65873a84d42.png
You can use '!important' to force overriding.
a {
color: #c54bb7 !important; (it's a sort of red)
text-decoration: none !important;
}
Try !important. !important emphasizes that this specific css should be applied and overrides the bootstrap css.
a {
color: #c54bb7; !important
text-decoration: none;
}
Hope it helped :)
use a wrapper div for your entire html code
like
<body>
<div class="wrapper">
<div class="content_area">
content goes here...
</div>
</div>
and style using the wrapper class,
.wrapper a{
color: #c54bb7;
text-decoration: none;
}
Related
So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:
Take the following example:
// Example "template style"
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
So let's say I want to add that to my footer I would in my HTML go:
<div class="blue_bold" id="footer">
// Content goes here
</div>
This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:
<div class="blue_bold" id="navigation">
// Content
</div>
....
<div class="blue_bold" id="footer">
// Content
</div>
My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)
#navigation, #footer {
attach_style(".blue_bold");
}
That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.
Any ideas? Does this exists?
You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.
Syntax examples here :
LESS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
.blue_bold;
}
SCSS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
#extend .blue_bold;
}
you will need to have a look on sass or less they are your best options.
sass here
less here
You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:
#navigation,
#footer,
.some-other-element,
.another-element
{
// css styles go here that you want to apply to each element listed above
}
Can't see any benefits. What you're asking for is not a standard CSS.
You can define this for all elements with class blue_bold
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
For this block
<div class="blue_bold" id="navigation"></div>
You can simply add another declaration like this:
#navigation, #footer {
background: black;
color: red;
}
Everything from .blue_bold will be used unless overwritten. What's wrong about it?
Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of HTML.
<body>
<section id="content">
<article>
<ul class="posts-list">
<li class="post-item">
<h2>[post title]</h2>
<p class="item-description">...</p>
<p class="item-meta">...</p>
</li>
...
</ul>
</article>
</section>
</body>
Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px / 24px serif;
}
I wanted to style HTML within a ul.posts-list differently, so I wrote these rules.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
However, I ran into some issues. Here is how Chrome is rendering the CSS:
For some reason, the rules #content p, #content li are overriding my rules for .item-description and .item-meta. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?
Edit: Also, where can I read up more about how this hierarchy works?
Elements id have the priority in CSS since they are the most specific.
You just have to use the id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)
The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.
For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:
<p style="color:white" id="itemDescId" class="item-description">...</p>
With the CSS:
p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}
The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.
This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:
http://css-tricks.com/specifics-on-css-specificity/
My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:
li.post-item > * {
margin: 0px !important;
}
.item-description {
color: #FFF !important;
}
.item-meta {
color: #666 !important;
}
The !important rule will override the order of evaluation between id and class.
Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)
Better to follow the CSS standards.
choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)
I have a simple Css rule like so:
strong a:hover {
text-decoration: none;
}
This works for the following HTML:
<strong>
Go to website
</strong>
The problem is the Wysiwyg within the CMS i am using often puts the code in like so:
<strong>Go to website</strong>
My css rule then doesnt work. Is there are pure Css solution?
Thanks
Al
What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:
Go to website
CSS:
a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }
That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)
Working Example: http://jsbin.com/ekuza5
This should work:
.hrefspan a:hover, strong {
text-decoration: none;}
<span class="hrefspan"><a>...</a></span>
By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.
use
a:hover strong
{
text-decoration:none;
}
since you have define rule strong a:hover
indicates rules to be applied to the a tag which is present inside strong html tag
So the bit you actually want to change is the underling of the anchor
a:hover { text-decoration:none; }
If you want to have this only affect particular links on the page then apply classes to them.
<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>
a.notunderlined:hover { text-decoration:none; }
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.