Link to site in question.
In the footer, just above the copyright notice, I have a small block of Schema microdata. Business name, address, phone number. I want that text to be write, matching the copyright notice below it.
I've tried to do it like this:
<div class="schema_footer"> Schema block here</div>
And in my css file:
.schema_footer {color: #ffffff;}
Why doesn't this work?
Try this, the HTML is more complex than the example you have provided as shown in the screenshot. There may also be more specific CSS that you can't override unless your CSS is at least as specific:
.footer .schema_footer div,
.footer .schema_footer span
{
color: #fff;
}
It is not good practice, but you could also add the important rule color: #fff !important; to try and override the previous styles that have been set.
That is because there are more specific rules that overrides the rule mentioed in the .schema_footer like the one below:
....
.footer span, .footer a {
color: #666;
}
So you need to make your rule even more specific like.
.footer .schema_footer span, .footer .schema_footer a {
color: #fff;
}
or override the .footer style later in the stylesheet (or with multiple style sheets load this one later)
.footer span, .footer a {
color: #fff;
}
No matter how bug the html is, You can always use the web inspector to inspect the styles applied and overridden. Here is how it looks after overriding and you can see the second arrow showing the actual rule applied before.
here is a simple solution
.footer {color: #fff;}
Related
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
Have a menu as an SSI. I wish to change color of displayed SSI links on page. My reading shows I can use CSS to change displayed link color, so created div around the menu and unique div id as well as CSS for the div. The div ID is “menu”.
CSS
#menu {
font-family: Verdana, Geneva, sans-serif;
margin-left: 25px;
a { color: #FFFF00; }
}
Only the unvisited links need to change, hence the single line. This code makes no changes to my links: they show default #0000EE. This code does provide the needed margin, so the server is reading the CSS.
I can change the link colors by adding html change to the body of the page, but I’d prefer not to:
<style>
a {color: yellow;}
</style>
This changes all links, not what I wish to do.
Unless you're using some kind of CSS preprocessor that supports nesting, then your CSS is invalid. Once the browser sees the a tag inside the #menu, it stops working because it expects a CSS property to be there and not another element selector.
To get the correct styling, do this:
#menu a {
color: #FFFF00;
}
If you want to style only links that have not been visited, do something like this:
#menu a:not:visited {
color: #FFFF00;
}
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
I'm diving into web development and CSS is getting the best of me very early on. I have the following html...
<div class="span-6" id="left-sidebar">
<h4>Left Sidebar</h4>
<ul>
<li>fruits</li>
<li>meats</li>
</ul>
<h4>This is a header</h4>
</div>
and my CSS code...
#left-sidebar, #right-sidebar {
background-color: black;
color: white;
}
but only the text "fruits" and "meats" are rendered in white text, the other text is rendered is a dark grey color. Why isn't all the text rendered in white?
Also, I find I can fix this when I'm more specific, using the CSS code...
#left-sidebar, #left-sidebar h4, {
background-color: black;
color: white;
}
Why do I have to be more specific? Doesn't #left-sidebar mean, "render all text in the left-sidebar using white, unless it's been overwritten with a more specific CSS statement"?
I should also note that I don't have any other CSS code that's related to the left-sidebar div. Also, I'm using Blueprint CSS (as you can see in the "span-6" class), but I don't know how that could be conflicting with anything.
Thanks so much!
Blueprint css has default colours for heading tags. (see screen.css)
You need to specify:
#left-sidebar h2, #left-sidebar h4,
#right-sidebar h2, #right-sidebar h4 { color: white; }
Basically, the h (header) definitions are sometimes pre-set by the browser. Are you using a CSS reset? Try this out http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - it essentially gets rid of browser defaults and makes it much easier to develop websites across multiple browsers.
In the short term, try setting the definitions of the h2 and h4 individually, like this:
h2,h4 {
color: white;
}
Or add an important tag to your current CSS, like such:
#left-sidebar, #right-sidebar {
background-color: black;
color: white !important;
}
You can use Firebug in Firefox or the developer tools in Chrome to see what classes are being applied to each element. You just "Inspect" the element and view the applied CSS rules in the pane on the left.
the header tags need their own CSS Class.
h2, h4{
color:white;
}
should do the trick