Debugging the code sometimes takes longer than writing it. The same applies to cascading style sheets.
To find out why CSS does not work, you need to know in advance what to look for.
Link to file
The CSS code can be placed in an HTML document,And in a separate file with the same extension. If CSS is in an external file and does not work, then the first step is to check the link in HTML code.
The reference (href) should be written in a single tagLink. The content of the link in HTML5 should look like this: href = "style.css" rel = "stylesheet". Do not forget that the link itself is located between the pair of key head tags.
After the value of href, the name of theCss-file, which must be attached to the document (this is not necessarily a style). If the file with the styles is in a different folder, it's necessary to specify the path to it via the slash (/).
If the link is OK, and CSS still does not work, you need to check the syntax in the code.
First, check the selector. The selector must match what is written in the html file. That is, if in html the class = "container" is selected, then in CSS on the place of the selector the ".container" is registered. Pay attention to the point before the title. The point is placed just before the classes. If you prescribe a style for h1 headers, then no point is needed.
The block itself, where the style is declared, is written after the name of the selector in curly brackets. Between the name of the property and its value is a colon, followed by a semicolon.
If the browser on which you are checking yourCss-code, is already outdated, then it is not able to correctly display the CSS3 language. Therefore, in case the code does not work, update your browser to the latest version.
Use different browsers for testing: Opera, Google Chrome, Firefox. It is not recommended to rely on Internet Explorer, as its development for Microsoft is not the main task, which leads to its "insolvency" in relation to CSS3.
New versions of browsers for debugging code contain a special module that allows you to edit the code directly in the browser. To do this, click "Show source" in the context menu of the window.
The most difficult thing is to understand CSS with inheritance. While it is often the basis of the non-working code.
CSS works on the same principle as matryoshka dolls. One container is put in another, the third one, etc. To learn all the subtleties of inheritance, you need to spend a considerable amount of time. You can start with an elementary one.
First, logically try to identify whereIt is an error in the css-code. You will easily understand this, because As a result of an error, one of the elements when displayed in the browser will fall out of the picture you submitted.
When you find a container or other element to which the unworked style is applied, carefully look at what the "nested" element is.
Perhaps the parent element contains a property that does not allow another property to work in the child element. More information about inheritance can be found in any CSS reference book.