So I have a big trouble understanding how to override a css rule inhered, with my css rules define in some class for example
first i have this html
<a class="formatText" style="font-weight:bold">Accesorios 4x4</a>
And I defined a class formatText like this
.formatText{
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}
Never the less, because i'm using jquery-ui in some point the rule that match with the element is this
.ui-widget-content a {
color: black;
}
How can fixed this without defined a css selector by ID.??
.ui-widget-content a.formatText{
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}
it's a part of basic specificity rules.. you can read further in here
and avoid !important as possible as you can because it will give us headache in the future trust me. make !important as your latest arsenal when there's no hope..but as long as specificity still able to help, use it.
You must define your style rule to be more specific than the .ui-widget-content a style rule. This could be done as follows:
.ui-widget-content a.formatText {
...
color: #FFF;
}
If this is not feasible, you can also mark the setting as important:
color: #FFF !important;
.ui-widget-content a.formatText {
color: #FFF;
}
done
try adding a span around the text inside the a href like this
<a style="font-weight:bold"><span class="formatText">Accesorios 4x4</span></a>
If you want to override a CSS style introduced later in your document with an earlier one, use the !important declaration.
e.g:
.formatText{
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF !important;
}
Related
I'm working on a system that uses LESS for styling. The variables for the font families look like this:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
Now I have to change the font family to Arial. I'm going to use Arial Narrow for the condensed fonts:
#font-family-regular: Arial, sans-serif;
#font-family-bold: Arial, sans-serif;
#font-family-condensedregular: "Arial Narrow", sans-serif;
#font-family-condensedbold: "Arial Narrow", sans-serif;
The problem is, that I can't set the font weight of the two bold font styles that way. I could add "font-weight: bold;" manually to all styles that use one of the bold families, but I would like to avoid that.
Is there a way to tell LESS something like "for all elements: if font-family is set to #font-family-bold or #font-family-condensedbold add font-weight: bold;" or something like that? What would be the most elegant solution?
Thank you in advance.
I fear you'll have to change the markup a little bit after all, but this is a solution i can offer, that might work for you:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
.font-face-bold (#font-select) when
(#font-select = #font-family-bold),
(#font-select = #font-family-condensedbold) {
font-weight: bold;
}
.font-face (#size, #font-select) {
font: #size #font-select;
.font-face-bold(#font-select);
}
// USAGE
.my-class {
.font-face(14px, #font-family-regular);
}
.my-bold-class {
.font-face(14px, #font-family-bold);
}
.my-condensed-class {
.font-face(14px, #font-family-condensedregular);
}
.my-condensed-bold-class {
.font-face(14px, #font-family-condensedbold);
}
What i do here is that i create two mixins that are nested in one another. The inner one is conditional and only "does" something if the passed variable is either #font-family-bold or #font-family-condensedbold.
Here is a Live Example of the code above.
Hopefully this works for you.
I'm trying to change the font-family of the pre tag, but it's not working:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
How to fix it withing the tags without using css?
You need to put all of your inline CSS inside the style attribute, not just your font-size:
<pre style="font-family: 'Avenir', Verdana, sans-serif; font-size: 10px">.......</pre>
Im trying to change the font-family of the pre tag, but it's not
working
If you're using inline CSS then you must encapsulate all the CSS rules inside the style attribute.
change this:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
to this:
<pre style="font-size: 10px; font-family: "Avenir", Verdana, sans-serif;">Hello World</pre>
If you need to use inline CSS, you should add
style
attribute to make the code meaningful.
If you need to add the required styles to all the pre tags add the below mentioned style to your style sheet:
pre
{
font-family: "Avenir", Verdana, sans-serif;
font-size: 10px;
}
My CSS specifies font-family: inherit for a button but why is that. I thought with CSS that if you don't specify it will inherit anyway?
In common browsers, button defaults to a sans-serif font. Specifying font-family: inherit overrides that browser default.
Perhaps to override a different setting from a less-specific selector?
* {
font-family: Comic Sans;
}
div {
font-family: Verdana;
}
button {
font-family: inherit; /* look like my parent */
}
<div><button ...></div>
Css on the body tag:
body{
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
font-size: 12px;
line-height: 1.4;
min-width: 1050px;
min-height: 500px;
color: #333333;
}
Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.
What is causing this and why?
Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.
To set their font, you need to use a selector that refers to them, e.g. using
body, input {
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
font-size: 12px; /* if that’s what you want... */
line-height: 1.4; /* somewhat excessive */
color: #333333; /* if that’s what you want, but it reduces legibility */
background: white; /* always set background when you set color */
}
body {
min-width: 1050px; /* if you really want this... */
min-height: 500px;
}
(but note that this also affects submit buttons).
Try to use following :
input {
font-family: inherit;
}
Or set any other font, and let see does this change issue.
<div class="timer">00:01:05</div>
The following css generates a 154x30px box:
div.timer
{
font: 700 24px Arial, Helvetica, sans-serif;
}
and this one generates a 154x19px box (on the sam div element).
div.timer
{
font-weight: 700;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
How can this be possible? I checked the shorthand property and i can't find what I'm doing wrong. I ordered the attributes in the good order, of that I'm preety sure.
When you use a shorthand property, any value you don't specify is reset to the default.
So the first example changes the font-style, font-variant and line-height. The line-height in particular is likely to alter the box size.