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.
Related
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.
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 trying to style all the headings in my header with a different font-family than the headings on the rest of the page but I am having trouble getting the style to only apply to the specific header ID.
Here is what I tried:
#header h1,h2,h3,h4 {
font-family:'Helvetica';
}
But this causes all h1/2/3/4 tags to use the Helvetica font regardless of if they are in the header div or not. I'm sure I am missing something simple, can anyone help? Thanks!
I think you must do so:
#header h1,#header h2, #header h3, #header h4 {
font-family:'Helvetica';
}
You need to target all hN with the ID.
#header h1,
#header h2,
#header h3,
#header h4 {
font-family:'Helvetica';
}
See Fiddle
Bootstrap docs say:
Use the #font-family-base, #font-size-base, and #line-height-base attributes as our typographic base.
Does this mean there is a CSS variable called #font-family-base?
How can I set this in CSS to change the font for my whole page?
For Bootstrap 3 open up your custom.css and
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "Ubuntu", Helvetica, Arial, sans-serif!important;
}
It's not a CSS variable, it's a LESS variable.
You can find (and edit) them in variables.less.
Visit the Bootstrap docs on customization - you can change several variables in Typography section, for instance #sansFontFamily, #serifFontFamily, #monoFontFamily, #baseFontSize, etc
See below, place at the top of your CSS file.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
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";
}