Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Here is another unexpected outcome of a CSS rule. (Yesterday I posted this that was not understood here: How to I avoid that the CSS rule * {} trump .a .b {}?)
For historical reasons I have these CSS rules:
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
The last rule shows up in Chrome on a P element. The computed value of --baseFontSize on that element is " 16px". The "Computed Style" shows that the last rule used is the rule above.
But. The value is "20.8px".
What is going on?
If we create a html document with your variables it can be seen that the value is indeed 16px as expected. So there are no 20.8px anywhere.
Maybe you zoomed in on browser? Set a different font-size on your OS?
:root {
--baseFontSize: 16px;
}
html {
font-size: var(--baseFontSize);
}
<p> Here be text </p>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
just so you know, I CAN NOT MODIFY ON JAVASCRIPT, I CAN ONLY ADD CUSTOM CSS
I have this website
https://elt.sa
you can check the last <section> tag
I want to select it in css so I can change the color of it
I can see that it's the last section! but it's not getting selected until I write
nth-last-child(18) and sometimes 19 !
check the images below, and you can inspect the website above and modify on <style> tag inside header , (the second one)
If it is always last then you can use :last-of-type, for more details check this CSS Selectors
section.section:last-of-type {
background: #cc3329;
}
section.section:last-of-type - it selects every section.section element that is the last section.section element of its parent.
you can do it also by javascript or css
for javascript
let section = document.querySelectorAll('section');
section[section.length - 1].style.background = 'red'
or css
section:last-of-type{
background: red;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have this:
a::before {
content: "NEW! ";
color: red;
}
a:visited::before {
content: none;
}
News
I expect visited links to override and remove the "NEW!" pseudo element text, but it won't. From the inspector, it seems as though the property is getting overridden, but the text is still visible.
Edit: this question has been answered. There are strict limitations to styling links with the :visited class
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a problem with a text in a header. I use google fonts (Pinyon Script) and one of the letters is cut off. I don't understand why... I tried with the overflow properties but it doesn't work. The problem is the header in pink on www.x4v1.com/cecile/ when the screen width is between 935 and 970 pixel. The first L of the second word is cut off and I would like to show all the text. Could you help me please ? Thanking you in advance.
On chrome :
You're doing it exactly the wrong way around. The font your using is getting out of it's inherited size (line-height, letter-spacing and so on). Therefore you should give the h1 element a large size, and the span element a smaller size.
To fix this do the following:
<h1 id="myheader">
C<span class="lowerfont">écile</span>
L<span class="lowerfont">astchenko</span>
</h1>
Than add the following CSS
#myheader {
font-size: 6em;
}
.lowerfont {
font-size: .75em;
}
This is what I can see, what is supposed to be missing?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I always have added my wildcard rules *{ } before my html{ } rule but I've seen some people putting html before wildcards, so I was curious what was best practice.
*{} is the lowest level element selector so you should put it in top of your stylesheet so that other elsement css rules could be overridden without using !important easily.
For eg:
*{
color: blue;
}
div{
color: red;/*overridden color*/
}
Since both *{} and html{} element selector is lowest level selector you may put them in any order in top of your stylesheet. But I would prefer to use *{} as first rule as it denotes to all element selector.
Having the html rule after the wildcard is the right way, because the rules are read top-down. The other way would override your html rule.
*{ font-family: Sergio Ui;}
html{ font-family: Tahoma;}
With this html gets Tahoma font.
html{ font-family: Tahoma;}
*{font-family: Sergio Ui;}
With this html gets Sergio Ui font.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is this CSS code valid? If not, how will it affect the rest of the page?
<style type="text/css">
.detpage .fieldarea-row { position: static;!important;}
</style>
You have 1 semicolon too much. But shouldn't impact the rest.
<style type="text/css">
.detpage .fieldarea-row { position: static !important;}
</style>
No, it's not valid. your !important is just dangling there because youv'e "closed" the declaration early:
.detpage .fieldarea-row {
position: static !important;
^---- no ;
}
as for what it'll do. no way to tell. css just gives some rules to change layout/looks when things match, but you've provided nothing to show what this rule would apply to.
I would go like this
.detpage .fieldarea-row { position: static !important; }
and put the style in a separate CSS file, to avoid mixing CSS with HTML codes.
http://jigsaw.w3.org/css-validator/validator says that it's invalid, and that therefore the entire statement is invalid/ignored.
I'm not sure whether it's true though that the whole statement will be ignored (because that contradicts my understanding of CSS error recovery specification).