I am a newbie (very much so), so my question might be dumb, but I couldn't find the answer.
For a contact table on a webpage I have set the height of 30px, but when I look at it in Google Developer tools, the height value is crossed out. I've tried to find out what causes my value to be overriden, but no luck. The developer tools shows that the value is overriden, but it doesn't show where.
So, the question is: How do I find what overrides my values in CSS?
In Chrome, your styles will inherit from any parent styles - either in the same style sheet or, if you have any, in other attached style sheets.
When a style inherits attributes either from parent elements or other classes, its predecessors will be listed in the Style Browser*, listed from nearest styles to most distant. So for example, if you have a paragraph that has a class assigned to it, but that paragraph is contained within a parent div that also has its own styles, your Style Browser will show the class name of that paragraph at the top (including all the class attributes), followed by the div's classes and so on up your DOM.
To discover which style is overriding your height value, scroll down through the Style Browser until you find a height attribute that isn't crossed out. You will also see the style sheet (including the line number) that contains the style that is affecting your page's appearance.
*You can open the style browser by right-clicking within a web page and selecting "Inspect Element".
You have to read the styles from the bottom going up.
You should find your CSS rule for the table in the styles section. Going up from that point you should be able to see which are the modifications that override your rule and display the element as depicted in the "Computed style" section.
If you dont find anything please give a look to your inline styles.
It would be easier to explain if I can look at some sample code...
The applied style is shown in the top and then the overridden ones are shown crossed out as you scroll down. So, the overridden value should be somewhere above the one which has been crossed out.
Related
I would like to know why some CSS properties are not applied as expected to html elements. I am not trying to fix a particular issue but I am looking for a general approach to be followed.
inspector screenshot
As seen in the above screenshot, I have a media query to be applied when the width is equal to or exceeds 40 rem.
But the width that I want to be applied to the plan class is 30% which is not applied but instead a width of 100% defined as a property of the plan class is still applied.
Though the inspector shows the property crossed out, is there any tool to find out the reason it is not applied?
The list of styles is shown in reverse order of how they are applied.
You can see that the top set of styles is the style property, and it is empty.
The next one is .plan and sets width: 100%.
The next one is .plan inside the media query, and is overridden because of the previous one.
You can see a simple view, but focused on specific properties, but looking in the Computed tab and clicking the triangle next to the property you are interested in to expand the list.
See The Cascade in the CSS specification for an explanation about what order properties are applied in.
I know of multiple ways to determine a selector of an element in a browser code inspector:
locate the selector in the HTML pane of the inspector
hover over the selector in the HTML pane, and a tooltip will pop up that will show the selector, but that will be more verbose or different from the selector shown in the HTML pane
locate the selector that is not grayed out in the styles pane of the inspector
right click on the selector in the HTML pane, then click "copy selector", and that will be a selector with a higher specificity
Often all four of these have a different format or specificity.
Here is an example: the bbPress reply box. Selector #1 in the html pane, in the tooltip, if you hover the element:
textarea#bbp_reply_content.bbp-the-content.wp-editor-area
selector #2 copied as "CSS Selector" from the right-click menu of the element in the dev tools html pane:
div.wp-editor-container:nth-child(1) > textarea:nth-child(2)
#3 in the dev tools styles pane:
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content
Three very different formats and with different specificity. Why are these all so different (including different specificity)?
Here is an example, the bbPress reply box. Selector #1 in the html
pane, in the tooltip, if you hover the element:
textarea#bbp_reply_content.bbp-the-content.wp-editor-area
I'm assuming you mean the HTML pane in the browser developer tools. The HTML view here is focused on the element that you are looking at, and will show the element name, any ID, and any Classes that might affect the selection (an ID must be unique, for example, and you can have lots of the same element with the same, similar, or completely different sets of classes applied). So the result you're getting here is contextualized to the view you're in, and what you're actually looking at:
ElementName.ID.ClassName(s)
You're not asking for a full selector to get this element, you're just asking for this exact element. Any ancestors are not important for what you're asking.
However, while this would be a valid selector, it's dangerous to refer to it as a selector for that very reason above; if you're looking for selector to use to target a specific element, this will miss out on all kinds of things in CSS that affect whether styles get applied. Cascading styles/precedence, specificity, and more could cause such a string to fail if used as a selector.
selector #2 copied as "CSS Selector" from the right-click menu of the
element in the dev tools html pane:
div.wp-editor-container:nth-child(1) > textarea:nth-child(2)
This is also a selector, and as you can see it's got more information before you get to the "textarea" element. However, it's still focusing on the "HTML content" context for that specific element... it doesn't care about IDs or classes that might be assigned to the final element. It's just saying "give me a CSS selector that, all else being equal, would select this element".
It's hard to say since it's a different element as the first example, and we can't see the full markup of the page you're using for your example, but I'm guessing this is a top-level div inside the body... either the only one, or the only one with that class. The browser is giving you just enough information to make sure you don't go down a different rabbit hole of elements by mistake.
Number 3 in the dev tools styles pane:
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content
This is a CSS selector that someone wrote in a CSS file. It is showing up because it is a selector that applies to the element you selected. I'm sure there are more, even if they are just the default browser styles. For example, if you look in this location for an element on any Stack Overflow page, you'll probably see a whole host of entries:
While the other two are generated from the browser, this selector is one that a person decided to use and wrote out based on their desire for specificity and other qualifications for the styles they wanted to apply to this element.
I have the same page in two chrome tabs. This page has a configuration that if you change it, some styles are modified.
The problem i have is that a particular style should not be changed but in fact it does. This is a line-height style.
The problem i'm having is that in one page the line-height is 14px and in the other is 18px and the same thing happens with font-size.
I search in the computed section of chrome developer tools but i can't found the source of that change because the line-height and font-size says inherit but all the values bellow are strikethrough. So my question is more in a general way to know where this values are been set?
- Open Chrome Web Inspector.
- Select the "Element" where you want to check the line height.
- On the right hand side, you will find "styles".
- Now scroll on the "styles" to find all the "line-height" styles from different styling files.
You will see Inherited From section there.
Example:
"Inherit" means the element gets its value for line-height from another (parent) element. I guess you modified such a parent element. You can avoid this by giving your element an exact value for line-height with !important.
.your-element{line-height: 14px!important;}
I want to get all style properties of a specific html part(div, form, table, ...) and its children. I know how to search for style of any page element, using any browser(chrome, firefox, etc..). Should I look one by one for its children to obtain all css? Is there a way to get all css at one time related with an element and its children ?
The easiest way to do this is to use the Computed Style tab in the Chrome or Firefox web inspectors as this will allow you to see not only the explicitly defined styles of the element(s) in question but will also show you inherited styles from the cascade.
Otherwise you basically just need to copy ALL relevant style definitions from the element(s) and all of their parent and ancestor elements.
I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.