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 7 years ago.
Improve this question
Occasionally, css adds dynamic to pure html pages. For example, changing the background colour on hover. I want to understand, how does the css work?
CSS:
div {
position: absolute;
width: 100px;
height: 100px;
background: black;
}
div:hover {
background: red;
}
HTML:
<html>
<body>
<div></div>
</body>
</html>
plnkr code
When mouse enters "div" does browser just override background to black (i.e browser leaves height: 100px, width: 100px and position: absolute) or recalculates it ?
In usual case, when some event happens and changes css of an element, does it just override properties which are present in css style ? In other words, after some several events, does style of an element might end up arbitrary?
In usual case, when some event happens and changes css of an element, does it just override properties which are present in css style ?
The element begins to match a new selector. A new rule-set is applied to the element. The properties of the element are recalculated according to the standard rules for the cascade.
In other words, after some several events, does style of an element might end up arbitrary?
No. The rules for the cascade (which defines which order rules are applied in) are (very) clearly defined in the specification. There is nothing arbitrary about them.
In a nutshell: When you hover over an element, the element goes into the :hover state. It now matches two selectors in the CSS file: div and div:hover. All the properties of both rule sets are applied to the element. Where there are conflicts, e.g. background defined on both, the more specific selector wins (*read the spec, the rules aren't easily summarised).
When you leave the element, it goes out of its :hover state. The div:hover selector does not apply anymore, only one rule set applies now. All the element's style properties are recalculated from scratch, resulting in the background turning black again (because it's the only rule that applies).
Everything is in a very defined state at all times, the changes are not incremental and will never result in weird states because something didn't get unset or such.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a bit of html the object of interest here being an h2 element.
#top-warning{
justify-content: center !important;
display: flex;
width: 100%;
margin-top: 5vw;
letter-spacing: 3px;
font-family: "Penguin Regular";
color: rgb(255, 255, 255);
}
I have this css for an h2 element but whenever the window size is changed, the h2 elements position changes (vertically) until its hidden under other elements. I was wondering how to make every element auto resize to stay scaled properly.
You primarily should be researching CSS properties such as the display property. Since you're new I recommend learning the difference between block and inline so you don't end up making block elements children of inline elements though it is valid to change an inline element inside of another inline element to be displayed as block.
Go to the developer tools in your browser (E.g. Control + Shift + C in Waterfox) and pick an element, set a background-color to something with contrast (e.g. #000) and then set a display property and press the down arrow to cycle through all of the available values that your browser supports to visually see what happens. That being said what you should really learn is about the context of when and where to use any given HTML5 element.
Tip: keep your CSS properties (in the code you posted) alphabetical, it'll help you stay better organized.
Good luck!
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
Given the following CSS and HTML, why does it produce a blue background?
div div { background-color: blue }
.myClass { background-color: green }
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
If I understand selector calculation correctly, the first rule should evaluate to 0:0:2, while the second should evaluate to 0:1:0. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity mentions inherited styles being overridden, but this is a direct application of class on the div, not an inherited style. What am I missing here?
UPDATE
I am working in Angular 8, and here's a screenshot of the thing that's been confounding me. So...since this works outside of Angular, is this somehow an Angular issue?
Here's the devtools console, showing the override and the css rules...
After looking closely at the CSS style calculations in the second image, I think I realize now what's going on. If someone can confirm this, I'd appreciate it. The generated CSS
div[_ngcontent-xpy-c52] div[_ngcontent-xpy-c52] {
appears to have attributes attached. Those attributes ratchet up the class score of the div div rule, making it override the .myClass rule. Even though the original CSS does NOT contain those attributes, what basically every browser sees is what I have quoted here, and so the outcome at runtime is quite different from what one would otherwise expect.
enter image description here
Your code worked correct. Here my code.
<style>
div div { background-color: blue }
.myClass { background-color: green }
</style>
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
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 6 years ago.
Improve this question
I'm trying to change the background color multiple times within one page. Is there a way to put CSS in an HTML body?
There are two primary ways to do this:
1. Inline (Styles)
<div style="background-color: blue;"></div>
2. In-Page Block (Styles)
These are typically defined in the <head> section of the page.
<style>
.bg-blue {
background-color: blue;
}
</style>
If you are going to write your styles within a single page, I strongly advise going with "Option #2: In-Page Block" since it allows for reusability and is easier to maintain.
Does that help to answer your question?
You can use <style></style> tags and put styling inside them, too. Best put into the <head> section.
<style>
body p {
font-size: 18px;
}
</style>
If you mean "Can I write inline css within the html body" then yes, you can! (See below). But having a separate CSS stylesheet is generally considered the better option.
<div id="myDiv" style="background-color:red;">
<!-- content -->
</div>
Just add style="add your attribute here" to an element and then separate attributes by adding ; between attributes;
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p style="color:red;margin-left:30px;">This is a paragraph.</p>
</body>
By default css is always inside an html body. One way is to create custom styling classes with simple names, and insert the class name inside the li or p tag around your text. If it is the background color of certain entries that you want to change, do so on an entry-by-entry basis.
.p (or .li, or p style="background-color:#c0c0c0;")
{
background-color:#c0c0c0; would give you a silver-gray BG color
}
This can be put into a single line with the open and closing style tags.You will need to do this for each line or paragraph that has an original or unique BG color. The color chosen stays in effect until you change it.
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
In my sass I'm keen for it not to get out of hand, i've a simple question/example what I'd like to know is what'd be the most efficient way to target the button in the example below?
Personally I like option 2 but have i done it correctly?
Call it picky but my problems are as listed below,
I'm not a fan of adding class/id to everything through html
Using Sass's ability to nest/target child elements within a parent is too overly specific
Option 1:
Give button class name in html making it easy to target in css
<div id = "box">
<!-- Give button class/id -->
<button class = "button1"></button>
</div>
Option 2:
Have _buttons.scss partial containing a .button1 class
On my main.scss target the parent container #box without button a class name in html, and then target nested button
buttons.scss
.button1 {
width: 100px;
height: 100px;
background-color: grey;
}
main.scss
#import 'components/buttons.scss';
#box {
button {
// Extend class from buttons.scss
#extend .button1;
}
}
I think it depends on how often you are going to use the styling for different buttons. Having an id of 'box' seems very specific to me though. Are you not going to have any other boxes? If so, this needs to be a class and not an id.
Instead of targeting a parent and styling the child (what happens when u want to style an element without that parent), I would just style the class on the button itself.
1st option - only one class needed in the HTML
.button1{
/* button css */
}
2nd option - id attribute needed, specific HTML hierarchy, more CSS output
#box button, .button1{
/* button css */
}
A lot of the answer as to what's "most efficient" when it comes to SASS and partials depends on what your complete SASS configuration will look like, so it's hard to say based on a specific example.
Are you going to need to use the style for this button in multiple stylesheets?
For instance, if you only have one style sheet (main.scss), I'd say there's no reason to use a partial at all. Partials should be used when you need to include the items in the partial in multiple stylesheets. Many people, for example, will write all variables and mixins in a partial and include them in every stylesheet.
Given this one specific example, the more efficient thing to do is not use a partial.
Adding a class to the button and targeting that class in the css, or targeting the container and child element (without class) is equally efficient:
#box button {}
button.button1 {}
Also, there's no reason to nest here if you don't have other rules inside of the #box parent:
#box {
button {
}
}
Just do this:
#box button {}
(And be careful with extends. If used in areas where they're not really needed, you can end up with a TON of unnecessary style rules. See this great article.)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?
What is the reason for this? You can always override using an "!important" declaration. For example:
.style { font-size: 12px !important;}
Also, refer to this guide here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade (Specificity Calculations, Inheritance, The Cascade)
There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.
If that doesn't work, my next suggestion would be is to try inline styling.
<div id="blabla" style="whatyouwantforthisinparticular">
You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:
body{ background-color:black; width: 500px;
}
body{ background-color:white; height: 300px;
}
In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.
Yes you can do it using the !important attribute.
.your-class{
property: value !important;
}
Also you can do that being more specific in your class