Debugging code sometimes takes longer than writing it. The same applies to the Cascading Style Sheets.
To find out, why not work CSS, you need to know in advance what to look for.
Link to file
CSS code can be in an HTML document,and in a separate file with the same extension. If the CSS is in an external file, and does not work, the first step is to check out the link in the HTML code.
Link (href) must be written in a single taglink. Content link in HTML5 should look like this: href = "style.css" rel = "stylesheet". Do not forget that the very link tag is located between the paired key tags head.
After href value indicates the name of thecss-file, which should be attached to the document (it does not necessarily style). If the styles file is in a different folder, make sure a slash (/) must specify the path to it.
If quoting is all right, and CSS still does not work, you need to check the syntax in the code.
First, check the selector. The selector must be the same with what you have written in a html-file. That is, if selected in html class = "container", the prescribed «.container» in the CSS selector on the spot. Note the dot before the name. The point is placed just before classes. If you have to write style for headers h1, then no points are not necessary.
Sam Block, where style is declared, it is written after the name of the selector in braces. In the name of the property and its value is a colon, and after - a semicolon.
If the browser, where you check yourcss-code is outdated, it is unable to correctly display CSS3 language. Therefore, if the code does not work, upgrade your browser to the latest version.
Use for testing different browsers: Opera, Google Chrome, Firefox. Do not rely on Internet Explorer, as his development for Microsoft is not the main goal, which leads to his "failure" in relation to CSS3.
Newer versions of the browser for debugging the code contains a special module that allows you to edit the code directly in the browser. To do this, click the "Show source code" in the window shortcut menu.
The hardest thing to understand CSS inheritance. While it often is the basis of the non-working code.
CSS works on the same principle as the nesting dolls. One container is embedded in the other, it third, etc. To study all the intricacies of inheritance, you must spend a considerable amount of time. Start is possible with elemental.
First, try to logically identify whereit is an error in the css-code. You will easily understand this, since due to an error when one of the items displayed in the browser will fall out of the picture you provided.
When you find a container or other element to which is applied not work style, take a closer look, what "embedded" this element.
Perhaps the parent element contains a property that does not work the other property in the child element. For more information about inheritance can be found in any directory on the CSS.