Styles were created in the correct order. Also tried pseudo-classes, which have always worked for me before. Tried differnt locations in the css list. Tried all link CSS in a separate file.
I don't have a problem creating the styles. Just not working correctly. Have stripped it down and rebuit a number of times. The All Links color change happened with all set of pseudo-classes as well as CSS base links. A click on a 'normal' link of changed all the links on the page. Sorry if I'm rambling -- 21 hours straight trying to fix it. Alternating with more fun stuff, of course.
I would suggest using Firebug or Google Chrome's dev tools to view the css styles applied to your anchor tags. This will indicate where you are getting the unexpected style. If you have never done this before download Google Chrome using the link below. After you install, Click the Wrench icon -> Tools -> Developer Tools. This will pop up the tools at the bottom of the window. I'd suggest using the magnifying glass (left of the "html" tag at bottom left corner) and just look at each anchor tag, before and after you click to see how the styles change. This can then lead you to determining where or how your unexpected styles are coming from.
http://www.google.com/chrome/intl/en/landing_chrome.html?hl=en
Good luck!
Matti
Related
I am modifying an existing template to adapt some basic parameters such as colors etc.
I use Google Chrome development extension so I can right click on a particular element use Inspect option to see what CSS rules are being applied to that element.
Then I can override specific rules in my custom CSS file.
So far so good.
My question comes for certain rules, for example if I click on an input element, the border of that element changes color but I can not right click and inspect as the focus is lost and hence I can not see in Google Developer tools what rules are being applied to that element when the focus is in that element.
Which is the strategy to debug such cases?
You can right click on the element in the Chrome Inspector and there is a 'Force state...' context menu item.
Here is a video clip demonstrating how to do it. https://developers.google.com/web/updates/2015/05/triggering-of-pseudo-classes
I have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).
Here's an example of how it helped me successfully change the color for an active jQuery UI Tab:
http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)
I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.
Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?
Thanks!
Using Chrome developer tools, you can force the element to be in the hovered state.
Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
Maybe I'm just a Firebug newbie, or maybe there is some other better tool? But I'm trying to easily find which of several linked css files, defines a specific element's style.
For instance in a production environment I can pinpoint that a style named left-tab is being applied to a specific element, and it renders properly. In the development environment the same style is applied within the HTML, but is not being rendered the same way as in production.
The production and development environments each include 9 css files. I want to easily find which one defines the style left-tab. Using the CSS tab I can open and even (temporarily) edit each of these, but how do I search through these? Ctrl-F searches the HTML document itself, as opposed to the CSS contained within the Firebug pane.
Activate the style tab in the right panel "Style | Computed | Layout | DOM ". For every CSS rule, there will be a blue link "mystyles.css (line 22). You can quickly jump to a rule by activating Element Inspector (The box w/ mouse on the far left hand, hotkey is Ctrl + Shift + C. Highlighting over your element with Element Inspector (you can also click on it) will show you all the CSS rules that apply (or were overwritten).
When you right click an element and click 'inspect element' the box in the bottom right will display CSS styles for that element, just above each one it tells you which CSS file it came from and what line.