I am in a conundrum: the stylelint rule "selector-max-universal": 0 is required and, at the same time, I need to provide a default font family to text elements within a certain class.
Therefore I am not able to use this:
* { font-family: Somefont; }
And, at the same time, code review requested me not to use these kind of selectors (SCSS mixin):
#mixin setGlobalFontFamily($family: Somefont) {
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p {
font-family: $family, sans-serif;
}
}
// fonts are specific to certain classes
.theme-a {
#include setGlobalFontFamily;
}
.theme-b {
#include setGlobalFontFamily(Roboto);
}
//.theme-...
Theme classes are conditionally applied through JS to a container element, e.g.:
<body>
<section class="theme-b">
</section>
</body>
Additionnaly, these fonts families should be set globally in one file and only once per each theme class, guaranteeing that other theme font families are not shown...
Can anyone see a way to workaround this problem?
If I understood correctly you can just set the font families directly to .theme-a and .theme-b e.g.:
.theme-a {
font-family: 'Some Font', sans-serif;
}
.theme-b {
font-family: 'Roboto', sans-serif;
}
The children of those elements should inherit the fonts automatically if something doesn't overwrite them. There's no need of setting each element manually.
Related
Is it possible to change all original Bootstrap font sizes of h1,h2,h3,h4 etc. elements at the same time by adding something to custom css file without writing new sizes for each separate element.
My idea is to make font sizes smaller:
h1,
h2,
h3,
h4,
h5,
h6
{
80% of Bootstrap font sizes;
}
you can change the styling in bootstrap.min.css but its not a good practice rather than you should make the changes into your css only ,the best ways give your wrapper name followed by H1
eg: wrappnername h1,h2,h2,h4{font-size:12px;}
You can use 'em' to set a relative
font-size
h1, h2, h3, h4{ font-size: 0.8em; }
If that does not make a differance try adding the !important
I am hacking away at a wordpress theme and do not wish to make changes to the main stylesheet, style.css, so all changes need to go into style-custom.css
The stylesheet applies a font-family style to a certain class, but I want that class to defer to the globally defined font.
So this is how the inheritance is working:
style.css:383
div#main-superfish-wrapper ul {
font-family: Georgia,"Times New Roman",Times,serif;
}
style.css:10
body {
font-family: Droid Sans;
}
in style-custom.css, I simply wish to cancel out the style defined at style.css:383 and revert to the original definition at style.css:10. I don't wish to redefine the font-family.
Is this possible in straight css?
Yes, just use the inherit keyword:
div#main-superfish-wrapper ul {
font-family: inherit;
}
So here's the problem I have. I wanted to be efficient and set all of my header tags to be the same font-family. So I used the code below. However it only appears to work when the multiple selector code is AFTER the single h2 code.
If i place the multi-selector code BEFORE the h2 code then it ignores it completely. Any thoughts as to what I am missing? Here's a link to the test page:
http://www.jasonkoprowski.com/test/JK_Test.html
I want the header to display using 'Crimson Text' font but seems to be defaulting to 'Times New Roman' (not even sure where it's getting this from actually. It works find when i put the h1, h2, h3, h4, h5 code after but not before. I guess I could just put it after the h2 tag code and be done with it but I want to make sure that I understand the root cause of the issue:
h1, h2, h3, h4, h5 {
font-family:"Crimson Text", "Lucida Sans Unicode","Times New Roman", serif;
}
h2 {
color:#232323;
font-style:normal;
font-weight:500;
letter-spacing:-1px;
line-height:1.1em;
margin:30px 0;
text-align:center;
font-size:42px;
}
To add even more to my confusion, when I added the code to Code Pen (http://codepen.io/anon/pen/EDpJg) it looks to be rendering correctly...so something wrong on my site?
Any help you can offer would be greatly appreciated.
Thank you,
Koprowski
The problem isn't with your selectors or the ordering of your rules (although in general it does matter sometimes), it's with the <style> tags at the beginning and end of your stylesheet:
<style type="text/css">
and
</style>
<!--CSS END-->
These belong in an HTML page, but not in a CSS sheet. Furthermore, the start tag is interfering with your h1, h2, h3, h4, h5 rule. You should remove them.
Is it possible to assign different fonts to different font-weights?
For example, If I have 2 fonts, "helvetica roman" and "helvetica bold" and I want a font-weight of 500 to always display "helvetica roman" and a font-weight of 700 to always display "helvetica bold"
I know this functionality is available through cufon, but would like to use it with straight CSS.
Thanks!
If you're using font-weight style inline, then you can use (example on jsFiddle)
*[style~="font-weight:"][style~="500;"]
{
/* Font 1 */
}
*[style~="font-weight:"][style~="700;"]
{
/* Font 2 */
}
I'm not sure about browser compatibility (the above was tested on Firefox). And I recommend using classes instead. Also, this probably isn't bullet proof.
You're getting things backwards, but not far off the mark. Use the various header-levels (h1, h2, etc) and assign CSS to those! They already imply weights, and each can be assigned a distinct font via CSS.
This is not really how CSS works. You want to use classes or tags instead, preferably with semantic meaning. You don't assign styles based on stylistic information (like font weight); you assign them based on semantic information (like "does this have class Header?" or "is this marked as strong?")
.Header /* or h1, h2, h3, h4, h5, h6, or strong, or any combination of these */
{
font-family: "Helvetica Bold";
}
.Normal /* or just body, and everything will inherit it unless overriden */
{
font-family: "Helvetica Roman";
}
Let's say that I want to specify Arial in the HTML header - and I want it to apply to everything.
Do I have to list each element type explicitly? Or can I set them all with a single statement?
You can use the * selector which applies to everything:
<style>
* {
font-family: Arial;
}
</style>
Note that this may be overkill for your purposes - due to the nature of CSS, styles set on parent elements are generally inherited by child elements, and thus, it's usually enough to set a font style on the body element to apply to the entire page.
body {
font-family: Arial;
}
No, generally specifying it on body is enough. That’s what the C in CSS is for: cascading. That means elements inherit the properties of their parent element. So anything under body (which should be everything) will inherit the font automatically.
body { font: 12px Helvetica, Arial, sans-serif; }
I prefer
body {
font-family: Arial;
}
and let it cascade down. This has the advantage of not stomping on explicit font selections further down the tree. If you want to stomp, use the * form in other answers