My question is very basic but i didn't find its answer on stack overflow. I like to know how to use normalized.css in "CSS" files. I know that normalized.css help you to make CSS files that can be used in any browser.
normalized.css like yahoo's reset.css and a few others (HTML 5 doctor reset, Vanilla unreset, Universal * reset) aim to make all/most browsers by default look as similar as possible so that you can start from there and then only add the CSS you need that deviates from that point.
Every browser have some predefined css for different HTML tags and css is usually different for different browsers. Like some default padding or margin on div or body. Normalize css just reset everything. So the css you added will show exact same effects in every browser.
Normalize.css is an open source .css file that Nicolas Gallagher made on GitHub: https://necolas.github.io/normalize.css/
It allows you to apply a "Reset" to your code in order to let most modern browsers use your CSS. To use it, you need to link to it in your HTML like you would any other CSS, but make sure it's above the main stylesheet so that the "Reset" is applied before your own styles.
http://adamkaplan.me/css-workshop/#normalize
Related
as above mentioned i am not sure if my CSS file for resetting the default browser settings works fine if I add it as a second stylesheet link. Can u help me? Thanks
Normalize.css overwrites lots of things. That's the point of it.
Your rules might be written in such a way that they are more specific that the ones in normalize.css, or they might not.
Normalize.css is a CSS(Cascading Style Sheets) file that provides better cross-browser consistency in the default styling of HTML elements. It corrects different kind of common bugs in browsers.Such as,
common desktop and mobile browser bugs that are out of scope for resets,
display settings for HTML5 elements,
correcting font-size for preformatted text etc..
So as above mentioned, Normalize.css contain styles that apply globally to all native HTML elements. So if you import Normalize.css not as the first stylesheet of your project may override some other importent styles which you have declared in other CSS files which you imported before the Normalize.css file.
I hope that below link will be helpful for you:
https://yuilibrary.com/yui/docs/cssnormalize/
I'm new to web design and I'm realizing that it's possible to use the html just for the page structure and the css for the page design. Is it ok to use inline commands like style="display: block" or style="background-image: url(image.com), in the html file? Or is it considered a bad practice?
Using CSS within a <style> tag or importing in from a .css file provides all of your selectors with a specificity range that will be overridden by any CSS provided through the style attribute.
As a general rule you want to try to keep as much CSS as possible within your .css files or <style> tags.
I try to keep over 90% of all CSS in files and I only put css into the style attribute when I am changing specific values that are difficult to code in a CSS file. Like rotation angle, top and left positions of things that are drug around the screen, etc.
It's best to insert css in the css file, because as a developer, you'll have a lot of code in your html file and if you add inline css then it could get messy. Adding css in the css file is easier to read and easier to edit.
Keeping all your css inside a .css file will give you much cleaner html file and enable you to make changes to your styling much easier as everything is in one place.
There will be times where it is much easier to add an inline style attribute to an element but even this can be avoided with couple extra lines of code on the css side to make your html look as clean as possible.
I think that anyway that helps you achieve your style goal is ok to use as long as it works for you.
That said, I usually try to keep all the styles that affect the site in general in a .css file and link it in globally to the site pages.
In some cases, there may be a page or two that need styles that are not needed by the rest of the site, therefore I add the <style> tag with the style rules in those few pages.
When an inline element in the html needs a special distinction using a style not defined in the locations mentioned above, I added it there inline with the style attribute. In these cases I have to make a note that, those elements will not change when the other css changes throughout the site.
Of course there are other things like the !important directive, etc, that can affect or override the inline style.
As mention by others in this post, there are other considerations to take into account, on where to place your css for individual reasons deemed by the designer.
I believe WordPress does something like this, they use a CSS reset stylesheet, then manually apply a global margin for each HTML element (to increase browser compatibility). I'm looking for something like this, but without the WordPress specific elements.
On a similar note, is there a default stylesheet that WebKit uses that I can access?
You may want to consider using normalize.css as opposed to a reset.css; checking their demo seems to indicate this includes standards for form elements:
http://necolas.github.com/normalize.css/
a quick google search turned up this: http://meyerweb.com/eric/tools/css/reset/ and this: http://html5doctor.com/html-5-reset-stylesheet/ among others
I generally use YUI Reset CSS for this. YUI Base CSS can complement Reset by applying a style foundation for common HTML elements that is consistent across A-grade browsers. YUI is from Yahoo and hence enjoys good support and is presumably more reliable than other similar CSS frameworks.
default Chrome WebKit http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css
here's a butt load more default user agent style sheets
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
There's no standard CSS margin etc. that I know of...
That's one of the reasons why a reset stylesheet is necessary. No one sets the same styles and most browsers have different defaults.
For me, once I reset margin and padding on most elements, I usually make the margin around 1em for p, h1-h5, etc.
I have been tasked with making some updates to an existing web control and placing it on an existing web page. The web control uses a lot of hard coded formatting to make it look "pretty", and the web page uses CSS to override just about every visual element you could imaging. So when the control is placed on the page it looks REALLY bad. Its basically unusable and I'm not sure what the best approach is to fix it.
Is there a way to clear CSS from, for example, all elements which are part of a specified DIV, or some way to prevent the main css from being applied to these components?
You could try a CSS reset stylesheet (just add the class yui3-cssreset to your element).
The only problem, though, is that it only normalizes little nuances between browsers, and isn't made for completely killing all stylesheets.
You could, however, edit in code to reset the background, font, border, etc.
You can use the not pseudo selector like:
:not(#idname) {
Properties... }
But that won't work everywhere without a JS shim.
I use blueprint and browser recognize them first and not mine if they have something.
how i can do something then browser recognize the style-sheet of mine first then they try to use them in page.
i know i can use !important but it's not good that i put !important on every tag. are their any hack to apply my stylesheet first even blueprint have some for them.
It sounds like you may be using stylesheets in the opposite order of what you want. If you want your styles to be in effect instead of the styles from the frameworks you are using, list your stylesheets after the other stylesheets. Ideally, your stylesheets will be listed last. That's the effect of cascading for stylesheet rules.
Stylesheets are applied in order of appearance, just insert your css after those of the framework.
Browsers have specificity rules that determine which style is applied. If you have multiple external stylesheets, the easiest way to ensure that your desired styles are applied is to load your stylesheet after the Blueprint stylesheet. Any style rules defined in your stylesheet will override the Blueprint styles.