div {
height: 400px;
cursor: pointer;
font-family: sans-serif;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>but code element doesn't have sans-serif font but pointer.</code>
</div>
p element has cursor text and serif as font-family as default. Both are being overridden.
code element has cursor text and monospace as font-family as default. Only cursor has been overridden.
Why does this happen? In code element, the font-family isn't overridden. Why? How can I set default html styles in certain chosen elements? (p and code elements here)
Apparently, even all: revert doesn't work!
div {
height: 400px;
cursor: pointer;
font-family: sans-serif;
}
p {
all: revert;
}
code {
all: revert;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>but code element doesn't have sans-serif font but pointer.</code>
</div>
all: initial works, but I don't want original CSS implementation applied. I want the user agent stylesheet rules applied. I used revert but to no avail.
According to MDN:
By default, the content text is displayed using the user agent's
default monospace font.
and:
A CSS rule can be defined for the code selector to override the
browser's default font face. Preferences set by the user might take
precedence over the specified CSS.
So you do need to specify the font required specifically. If there is worry that the correct setting is not carried forward/may be changed in the future you could define it as a CSS variable so it only needs to have its value changed in one place.
div {
height: 400px;
cursor: pointer;
--font: sans-serif;
font-family: --font;
}
p {
all: revert;
}
code {
all: revert;
font-family: --font;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>and the code element also has sans-serif</code>
</div>
Related
here I have HTML elements stacked like this,
.center-badge p {
font-size: 12px;
}
<div class="center-badge">
<div>
<p>Get a</p>
<p><strong>2% rate reduction</strong></p>
<p>with a</p>
<p>co-applicant</p>
</div>
</div>
and I have added the font size as 12px for the center-badge CSS. In this, we need to exclude the strong tag with p. Only the 12px styling has to apply all the p tags but a strong tag.
We have added a global styling for the p as 16px. How to exclude a particular element to not apply the parent CSS.
Is any way to solve this. can we can use the :not() for this scenario.
If an element has font-size: inherit or font-size: someUnitRelativeToTheParent — and it doesn't matter if that is set explicitly or by the browser stylesheet — then you can't make it not base the font-size on that of the parent element.
Likewise there is no way to write a selector with a condition "Unless the element's children include X" to avoid applying the font-size in that particular p in the first place.
You can either:
Explicitly style the strong element with a font-size that uses absolute units or
Change the DOM in such a way that you can exclude the p (e.g. by adding a class to it and adding :not(.that_class) to the stylesheet.
you have applied the global css like this I think.
p {
font-size: 16px;
}
but once you apply css using the parent class like this way
.center-badge p {
font-size: 12px;
}
it overrides your global css for <p> tag.
now <strong> has no browser default font size as <p> tag for the font-size property.
so you have to define it globally like this way
strong {
font-size: 16px;
}
or using parent class also you can apply the css like this way.
.center-badge strong {
font-size: 16px;
}
or you can apply it by giving the font-size: initial to the <strong> tag like this way.
.center-badge strong {
font-size: initial;
}
* {
font-family: sans-serif;
}
.sample {
font-family: monospace !important;
}
.sample>* {
font-family: monospace !important;
}
<div class="sample" contenteditable>
This is not inside span. <span>Go to the next line and append some text to see inconsistent effects.</span>
</div>
Playing around doing more editing only exposes more inconsistencies. How to fix it? How to set monospace font to all the text inside the div? I tried removing !important, but to no avail.
Removing <span> is an option, but I can't do that in the original project I'm working on because those elements have certain formatting. Neither can I remove the * rule declaration, because I want sans-serif font outside of the div. Quite annoyingly, both solve the problem. Any other way?
> selects immediate children. When you create a new line, you'll notice that the span tags are wrapped in a div.
Instead, you can try selecting all span elements that are children of .sample:
* {
font-family: sans-serif;
}
.sample {
font-family: monospace !important;
}
.sample span {
font-family: monospace !important;
}
<div class="sample" contenteditable>
This is not inside span. <span>Go to the next line and append some text to see inconsistent effects.</span>
</div>
The problem is that, by defining .sample>* the font will only be applied to the immediate child, excluding all others. If you check the result of jumping to a new line and writing something, you will see that it creates a new div and a new span layer, that's why your CSS is not applied. If you simply change .sample>* to .sample * it will work as expected.
* {
font-family: sans-serif;
}
.sample {
font-family: monospace !important;
}
.sample * {
font-family: monospace !important;
}
<div class="sample" contenteditable>
This is not inside span. <span>Go to the next line and append some text to see inconsistent effects.</span>
</div>
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
I have a HTML page which includes some text and formatting. I want to make it have the same font-family and the same text-size ignoring all inner formatting of text.
I want to set a global font format for the HTML page.
How can I achieve this?
You should be able to utilize the asterisk and !important elements within CSS.
html *
{
font-size: 1em !important;
color: #000 !important;
font-family: Arial !important;
}
The asterisk matches everything (you could probably get away without the html too).
The !important ensures that nothing can override what you've set in this style (unless it is also important). (this is to help with your requirement that it should "ignore inner formatting of text" - which I took to mean that other styles could not overwrite these)
The rest of the style within the braces is just like any other styling and you can do whatever you'd like to in there. I chose to change the font size, color and family as an example.
Best practice I think is to set the font to the body:
body {
font: normal 10px Verdana, Arial, sans-serif;
}
and if you decide to change it for some element it could be easily overwrited:
h2, h3 {
font-size: 14px;
}
Set it in the body selector of your css. E.g.
body {
font: 16px Arial, sans-serif;
}
Use the following css:
* {
font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}
The *-selector means any/all elements, but will obviously be on the bottom of the food chain when it comes to overriding more specific selectors.
Note that the !important-flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).
Try this:
body
{
font-family:your font;
font-size:your value;
font-weight:your value;
}
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden