So I'm trying to change the font size of an h1 element and it is not changing. I used developer tools to see what is happening and this is what I found.
#media (min-width: 1200px)
.h1, h1 {
font-size: 2.5rem;
}
It said that the above was active and thus my h1 style in my css file was not kicking in. Does anyone know what this is?
The same happens when I try to change my font weight. Something like this is active and it is not allowing me to change the font weight.
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: var(--bs-heading-color);
}
Can anyone please help me here?
You can use !important to apply your changes. Just like this:
font-size: 3rem !important;
So, it gives priority to your styling and you will be able to change your font-size.
You have 2 Options :
Load your CSS/CSS files before these properties so that your element get the required properties.
You can use !important but it can cause issues in the future if you want to change the properties of these HTML tags again.
resizing the #media needs to be relative to some container. Add rem for line-height may provide container.
In my react app whereever i place h1 tag it just showing a normal font. On inspecting i found that my text is rendering as h1 but style of h1 is
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
I also tried to change this in my global.css
h1{
font-size: large;
font-weight: 900;
}
But it did not work. So how to render h1 as heading 1 text and font size
h1{
font-size: 80px;
font-weight: 900;
}
<h1>Example</h1>
It appears to be the problem of specificity. Your global.css rules are being overridden by more specific rules. And from the available information, I don't know what or where those rules are.
This will help you understand better: MDN CSS Specificity
When I inspect element using Chrome Dev Tools the default font-size property is missing for the h4 tag. All the other tags like h1, h2, h3, h5, h6 are showing the font-size property.
See the screenshot
I have checked the default style sheet for HTML 4, here also the font-size property is missing.
Reference: http://www.w3.org/TR/CSS21/sample.html
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
What might me the valid reason for this behavior?
Thanks in advance.
The reason is that the designer of the browser’s style sheet wanted to make the default font size of h4 equal to 1em, i.e. the font size of its parent. This makes it fit to the scale of heading font sizes. When font-size is not set for an element at all, it inherits the size from its parent, so the result is the same as it would be with h4 { font-size: 1em }. (Not in all circumstances, but in these. The browser’s default style sheet is lowest in the cascade, so a relevant setting in any other style sheet will override it.)
Note that the sample style sheet for HTML 4 in the CSS 2.1 specification is outdated and contain some odd settings that were never implemented in browsers, and many settings have been tuned later. The Rendering section in HTML5 PR contains a much more modern description of typical (and more or less recommended) default settings in browsers. For clarity, it explicitly sets font-size: 1.00em; on h4.
On this page, the heading is shown on a beige background, followed by a section with a grey background.
I would like to eliminate the space underneath the title, such that the bottom of the letters are at the point where the two sections meet. I expected this to be pretty simple, probably just a matter of removing some bottom padding or margin, but I cannot figure out what is causing this space to appear under the title.
try to change this class hero-h1 to this:
.hero-h1 {
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 68px;
}
if you decrease line-height you can delete space underneath
It's your line-height:
CSS:
.hero-h1{
line-height: 62px;
}
This is what looks best in Google Chrome and Firefox on OS X. Browsers and operating systems may vary. Also, people may have different system fonts. Consider using an image instead of you really want it to stay consistent across browsers.
Another thing to note. This is your current font selection:
h1, h2, h3, h4, h5, h6{
font-family: 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
But Arial is a much MUCH more common font. For near pixel perfection and more consistency if you don't want to go with an image, to change it to this:
h1, h2, h3, h4, h5, h6{
font-family: Arial, 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, sans-serif;
}
Which would make your line-height this:
.hero-h1{
line-height: 60px;
}
Or you can add margin-bottom: -18px in hero-h1 class
Additionally to the answers about your line-height you can also simply change the .hero-h1 to a block, and then set it's height to match the line-height
.hero-h1 {
display: inline-block;
width: 100%;
height: 100px;
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 100px;
}
You can follow this method, so you do not have to play with negative margin or mind font-size of H1.
header's height is set from line-height , overflow:hidden to hide text-shadow overflowing..
h1 is set as display:inline-block and vertical-align:bottom. reset margin to 0
For the text inside h1, you need to set line-height down to 0.7-0.8em to swallow gap left for letters like j,q,y.
to size and tune your header, play with header line-height and h1 font-size.
I'm in the process of updating a site for someone, and I'm trying to get rid of a global #font-face and apply it only to specific elements.
It was defined like this:
#font-face {
font-family: "neutra";
src: url( /styles/NeutraDisp-Bold.eot ); /* IE */
src: local("Neutra Display"), url( /styles/NeutraDisp-Bold.ttf ) format("truetype"); /* non-IE */
}
#font-face {
font-family: "futura";
src: url( /styles/FuturaStd-Heavy.eot ); /* IE */
src: local("Futura Std"), url( /styles/FuturaStd-Heavy.ttf ) format("truetype"); /* non-IE */
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: neutra, Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
I only want it on a div that has the class .header and legends (and a few other tags, eventually) so I modified the CSS to look like this instead:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
#font-face {
font-family: "neutra";
src: url('../../styles/NeutraDisp-Bold.eot'); /* IE */
src: local("Neutra Display"), url('../../styles/NeutraDisp-Bold.ttf') format("truetype"); /* non-IE */
}
#font-face {
font-family: "futura";
src: url('../../styles/FuturaStd-Heavy.eot'); /* IE */
src: local("Futura Std"), url('../../styles/FuturaStd-Heavy.ttf') format("truetype"); /* non-IE */
}
legend{
font-family: neutra, Helvetica, Arial, sans-serif;
letter-spacing: .125em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.header{
width: 75em;
height: 12.375em;
background-color: #FFFFFF;
margin: auto;
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
However, the .header font-family is being ignored. All of the other declarations in that rule are used, and Firebug shows the font-family, which indicates to me that it's valid CSS.
In addition, the legend rule works perfectly, and shows the correct font.
Note: I moved the fonts and various other things around when I started working, but I know the new font paths are correct, because the legend rule works. I've also tried "neutra" and 'neutra'.
A pastebin of the entire CSS is here, if you think the problem is somewhere else. I've also created a jsfiddle with a fontface included to see an example of it being ignored.
Old Update
The jsfiddle is doing what it should. I have no idea what is different in my own code.
Update
I've added the offending rule. I think I'm missing something about rule weights, which would be why a lower rule still isn't overriding a higher one.
It's an issue of precedence. Check it out at w3:
http://www.w3.org/TR/CSS2/cascade.html
Your first rule which sets the default as Arial also directly applies the font-face to most html elements. This is unnecessary and causing your problem. Rather you should just set it once, on a top level element like html.
/* this single rule applies the Arial font to the whole document tree under <html> */
html { font-face: Arial, etc; }
/* this would set the font on .header, and everything inside of it */
.header { font-face: neutra, etc; }
In your case, p { font-face: Arial; } and div { font-face: Arial; } and etc beat your your singly nested .header rule. If you cut that long rule back to just a top level element, it will solve your problem.
Small example of the css cascade here, with the original long rule declaration:
<html>
<body>
My text is Arial because I exist under html and there are
no other rules modifying me.
<div class="header">
My text is neutra because I'm a direct child text node of "header"
<p>
my text is Arial because of the rule on "p", which in turn overrides
the rule on "header"
</p>
</div>
</body>
</html>
For a quick check, have you tried :
.header, .header *{
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
Since you're specifying a font-family for a lot of the tags, maybe that first set-up is too "strong".
Is there any chance you are using the html5 <header> element and defining the style for the element in your css as .header {} (a class) instead of header {}?