I have this link created in PHP:
echo '<p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="'.$suggested_solution_id.'" data-problem_id="'.$problem_id.'">'.$solution_name.'</a></p>';
And I have this css for it:
a.expand_suggested_solution
{
color: blue;
}
But I also tried a bunch of different things like
.expand_suggested_solution
{
color: blue;
}
.expand_suggested_solution .a
{
color: blue;
}
But none of those worked :) Any idea of what I am doing wrong? Its probably simple, but I just suck at css sometimes :)
Here it isn't working for some reason: http://www.problemio.com/problems/problem.php?problem_id=223 in the "Existing Group Plans" link
The rule:
.ui-widget-content a {
color: #222222;
}
In the jQuery theme (http://hotlink.jquery.com/jqueryui/themes/base/jquery.ui.theme.css) is more specific, and hence the link will be #222222.
You can make your rule more specific by doing something like:
.problem_comment_text a.expand_suggested_solution { color: blue; }
For an explanation of CSS specificity, see here.
.expand_suggested_solution {
color: blue
}
should work, but to be more precise, you can write it as:
a.expand_suggested_solution {
color:blue
}
The selector would read as "any a element with a class of expand_suggested_solution".
If this is not working, it'll be some other problem. Since you've written PHP here, i would double check to see your link is rendering out correctly to the browser by viewing the source on the executed page.
What text do you actually wish to be blue? The link text or the "Solution name:" text?
If it's the latter, then you need to apply the css to the <p> tag.
Is the link not actually being echo'd to the page or just that it's not blue?
Sometimes swapping the quotes can be easier because you don't have to concatenate the variables ('.') you can just put them in.
echo "<p style='font-family: arial;'>Solution name:
<a class='expand_suggested_solution' href='#'
data-suggestion_id='$suggested_solution_id'
data-problem_id='$problem_id'>$solution_name'
</a>
</p>";
Check the rest of your css for anything that overrides this css rule, eg a {colour: #fff} will override this if written after this rule.
You could always try putting an !important into your declaration to make sure nothing overrides it. eg color: blue!important;
Make sure you have a legitimate Doctype declaration too.
As #wsanville rightfully pointed out, a selector already defined in jquery.ui.theme.css:
.ui-widget-content a {
color: #222222;
}
is more specific than the first selector you tried:
.expand_suggested_solution {
color: blue;
}
Furthermore, your 2nd CSS selector syntax is incorrect:
.expand_suggested_solution .a {
color: blue;
}
Instead you meant:
a.expand_suggested_solution {
color: blue;
}
However, it's still not as specific as the one in jquery.ui.theme.css.
You could try:
.ui-widget-content a.expand_suggested_solution {
color: blue;
}
Or as #Daryl suggested:
a.expand_suggested_solution {
color: blue !important;
}
because the !important declaration will trump any other selector. However, I recommend using it sparingly!
Related
I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then #extend it to the two focuses to save on coding.
But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.
Heres a small example of the code I've got.
%button-styling {
color: $grey;
%btn-focus {
color: $white;
}
&::focus,
&.focus {
#extend %btn-focus;
}
}
As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:
$grey: red;
$white: #FFF;
%btn-focus {
color: $white;
}
%button-styling {
color: $grey;
&:focus,
&.focus {
#extend %btn-focus;
}
}
button {
#extend %button-styling;
}
And in your html you may have something like this:
<div>
<button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
<button>btn-focus</button>
</div>
For example, say I want to create text in HTML with the color blue and a size of 13px.
Is there any way I can do something like:
<h1 class = "blue 13px">Hallo</h1>
And then use CSS to make it blue and 13 px without doing:
.blue 13px {
color: blue;
font-size: 13px;
}
Instead of using CSS classes, you could use inline styling in your HTML elements:
<h1 style="color: blue; font-size: 13px;">Hallo</h1>
Because of its poor maintenance and reuse qualities, this styling strategy is generally not advisable though. Use with caution. ;)
Also note that the CSS code that you provide in your question is invalid. CSS class names have to be valid CSS identifiers. This would be more correct:
<h1 class="blue-13px">Hallo</h1>
.blue-13px {
color: blue;
font-size: 13px;
}
And also note that you can include CSS rules inside your HTML page as well (without using a separate CSS file):
<style>
.blue-13px {
color: blue;
font-size: 13px;
}
</style>
<h1 class="blue-13px">Hallo</h1>
CSS
:root
{
--css_h1_color: rgba(204,204,204,.2);
}
h1 {color: var(--css_h1_color);}
JavaScript
getComputedStyle(document.documentElement).getPropertyValue('--css_h1_color');
My Jekyll blog's theme has a scss file with the following syntax related style in minima.scss:
.highlight {
background: #fff;
#extend %vertical-rhythm;
.highlighter-rouge & {
background: #eef;
}
.err { color: #a61717; background-color: #e3d2d2 } // Error
// more stuff
I want to override the nested .highlight -> .err style only, but I don't want to set the color and bg-color attributes to anything specific, just the default. As in, I want it as if the .err style had never been defined in the first place.
I consume the minima.scss file in a main.scss which (which is the the actual file included in the page), like so:
#import "minima";
.highlight {
.err { ???? }
}
This makes it easy to add styles, easy to extend styles with new attributes, and easy to override specific attributes of styles (since I guess the second mention takes priority), but how do I "delete" style or elements?
#import "minima";
.highlight {
.err {
color: unset !important;
background-color: unset !important;
}
}
Should do the trick. You can read more about "unset" and "!important".
setting the color to inherit will make it take it's parent element color which in this case looks to be white
The answer that's marked correct is not the recommended way at all. In fact, it's a terrible way to override a style.
The correct way to do this:
#import "minima";
.highlight {
&.err {
color: unset;
background-color: unset;
}
}
HTML:
<div class="highlight err"></div>
HTML
<div data-countdown="2016-12-10 01:17:26">
<div class="countdown-text">noch</div>
<div class="countdown-val">2</div>
<div class="countdown-text">Tage</div>
</div>
CSS
.countdown-val {
color: red;
}
.countdown-text {
font-size: 13px;
}
Values from .countdown-val class are not applied. When I change the order of classes within the css file the same thing happens vice versa. I am using a bootstrap built theme, but I cannot explain this behaviour. Can anybody else please?
you just try this.
.countdown-val {
color: #ff0000;
}
otherwise.you can add !important
.countdown-val {
color: #ff0000 !important;
}
CSS is fine.
Check your closing brackets {} in your code.
In your bootstrap file, make sure your classes aren't nested under another class.
seems like some other css is overriding yours
use
.countdown-val {
color: red !important;
}
.countdown-text {
font-size: 13px !important;
}
or change the class names to some other unique names to be sure that the divs style is not affected by other css
I am generating a html file with many different links and they (by default) all show up the regular blue color. Is there anyway i can make certain links different colors. note that this html is getting pushed into outlook as an email so i can't have separate css files.
You can put your css in the <head/> of the <html>. Style your links with the color(s) you want. If you need more than one type of link, use classes. e.g.
a { color: #abcde1}
a.visited, a.hover {color: #1abcde;}
a.special {color:#123456;}
use a css style for the anchor inline:
<a href="foo" style="color:orange"....
There are a couple different ways. CSS can appear in your head tag, so it doesn't have to be a separate style sheet.
One is to use the style attribute:
<a style="color:blue;">...</a>
Another is to use css classes:
<style>
.navLink { color: blue; }
</style>
<a class="navLink">...</a>
There are lots of options. See http://www.echoecho.com/csslinks.htm
You can use classes for your styles:
your CSS file:
.redlinks a
{
color: #FF0000;
}
.greenlinks a
{
color: #00FF00;
}
your HTML file:
<div class="redlinks">my link</div>
you could use internal style sheet or inline styles
assuming the email client doesn't ignore them. of course by messing with link colours you run the risk of users not realising that you have links at all, so be careful.
This is example use of different colours for links:
<style type="text/css">
a.yellowLink { color:#ff0; }
a.greenLink { color:#0f0; }
a.redBlueLink { color:#f00; }
a.redBlueLink:hover { color:#00f; }
</style>
I’m yellow
I’m green
I’m red and blue on hover