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>
Related
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
Is it possible to create a selector that would identify elements with specific HTML font-weight properties?
Something like (fake example):
div[font-weight^='900']{
font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
font-family:"HaasGrotDisp35Thin";
}
w/ font-face css definitions as:
#font-face {
font-family: 'HaasGrotDisp35Thin';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
#font-face {
font-family: 'HaasGrotDisp55Roman';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
}
You could do the following:
/* Your fonts */
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-35thin.eot');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'HaasGrotDisp';
src: url('fonts/neuehaasgrotdisp-55roman.eot');
font-weight: 900;
font-style: normal;
}
body { font-family: "HaasGrotDisp" }
h1,h2,h3 { font-weight: 900 }
This minifies it to only one font-family. Simply assign the different weights inside your #font-faces
And as for your attribute like query: I would suggest using semantic classes to use it with divs.
Nope. Add classes to elements so that you can apply certain font-weight's to those elements. Use those same classes for to "identify" elements that have a certain font-weight. That's how CSS works.
as far as I know, css selector will work on element name or attributes, but not css. besides, even if it were possible, it would be strongly discouraged to do so. instead you can define class for each font face, and apply class to approriate div's, and search div's with those classes.
eg)
`
.Haas {
font-family: '...';
}
.Neue {
font-family: '...';
}
...
<div class="some_class Haas">....
`
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.
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;
}
<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.