Validation refers to checking the CSS code against the CSS2.1 or CSS3 specification. Accordingly, a correct code that does not contain errors is called valid, and one that does not satisfy the specification is called invalid. The most convenient way to check the code is through the site http://jigsaw.w3.org/css-validator/ , using this service you can specify the address of the document, upload a file or check the typed text. A big plus of the service is the support of the Russian and Ukrainian languages.
Check URI
This tab allows you to specify the address of a page hosted on the Internet. The http:// protocol can be omitted, it will be added automatically (Fig. 20.1).
Rice. 20.1. Document verification by address
After entering the address, click on the “Check” button and one of two inscriptions will appear: “Congratulations! No errors found" if successful, or "Unfortunately, we found the following errors» for invalid code. Error or warning messages contain a line number, a selector, and a description of the error.
Check uploaded file
This tab allows you to load an HTML or CSS file and check it for errors (Figure 20.2).
Rice. 20.2. Checking a file when uploading it
The service automatically recognizes the file type and, if an HTML document is specified, extracts the style from it for validation.
Check typed text
The last tab is for directly entering HTML or CSS code, and only the style will be validated (Figure 20-3).
Rice. 20.3. Checking the entered code
This option seems to be the most convenient for conducting various experiments on the code or quick check small fragments.
CSS version selection
CSS3 has many new styling properties compared to previous version, so you should check the code taking into account the version. By default, CSS3 is specified in the service, so if you want to check the code for compliance with CSS2.1, you must specify this explicitly. To do this, click on the text Additional features"and in the block that opens, from the "Profile" list, select CSS2.1 (Fig. 20.4).
Rice. 20.4. Specifying the CSS Version to Check
After creating the site and filling it with everything necessary, the site needs to be checked for errors. To find spelling errors in html and css, the W3 validator will help you - World Wide Web Consortium, which in translation: World Wide Web Consortium. It finds all errors and indicates where they are, as well as offers options for their elimination.
Why fix code with the W3C Validator
In fact, there are not many advantages from this and they are all conditional, but unfortunately each site should have a minimum number of errors, ideally none. What would you decide whether you need it, here are its advantages:
- The page load speed will increase, but a little, it will not even be noticeable.
- The site will display the same in every browser.
- When adding a site to the directory, pay attention to the literacy of writing html and css.
Not a lot of pros, but fix html and css errors using the W3C validator is worth it!
How to fix errors with Validator
The principle of correcting errors with a validator is not complicated and everyone can handle it! We follow the links to, if it is difficult to understand English, I advise you to use a translator, or use this, which will show the type of errors in Russian. Consider an example of a fix by a validator:
1. Type in the name of your site in full. 
2. In the list, we begin to look where and what kind of error and what is needed to fix it. 
As you can see in the pictures, my mistake is in the link, I found this problem in the share buttons plugin. Often you have to dig through all the files to find an error.
3. Add an element to the line where the error was found and check with the validator again.
If the bug is fixed, then that's good. If not, then you'll have to look further.
Checking web code for validity is checking it against W3C standards and certifications.
W3C (Consortium world wide web) are the technical legislators of the Web who develop standards and rules for writing code. W3C certifications and standards are mandatory for everyone who works on the Web. Uniform standards in code spelling are needed so that all Network applications communicate in a single language space, in standard languages, and understand each other while working with web documents.
W3C not only creates Web standards, but also actively promotes their implementation.
The W3C has online services for validating HTML/XHTML and CSS code.
Checking the code against W3C standards using W3C validators is the best way out.
Free online services from the W3C to check the code for validity.
W3C validators have an intuitive clear interface. Working with them is easy and simple.
The services make it possible to check in three modes and, accordingly, have only three buttons:
Check URL
(for verification, you need to specify the address of any page of the site available on the Web)
Check uploaded file
(for verification, you need to specify the path to the file being checked)
Check typed text
(to check, you need to copy and paste the code to be checked into the validator window)
The last two methods are especially useful when checking web documents or texts located on local computers. These can be web pages, or already downloaded from the Web to local computer, or generated by engines located on local servers, like "Denver". In the case of Denver, you need to save the page through the browser as a file with the .html extension and then check it as a separate file, or copy source web pages directly from the browser and check how typed text.
How to use W3C online validators.
contact the validator at:
(http://validator.w3.org/ - to validate HTML or XHTML
http://jigsaw.w3.org/css-validator/ - for CSS validation)
in the validator window that opens, select one of the three verification methods
(web page url, local file or typed text)
go to the appropriate tab
specify the object of verification
(enter the url-address of the checked web page,
or the path to the file on the local computer,
or paste the code to be checked, respectively)
click the "Check" button and look at the result of the check
Services from the W3C check the code for validity and immediately point out errors, if any. Each error will be commented. Comments, unfortunately, in English. So, Google-translate is here to help. It remains only, if necessary, to correct the code and check it again for compliance.
W3C validators are completely free and automated. Therefore, you can hammer them with your work on mistakes for a long time and with impunity. For this, these services are created.
A normal alternative to W3C validators.
In addition to the W3C online servers for checking web code, very good result gives the HTML Validator extension to the browser Mozilla Firefox. The presence of such an add-on in the browser facilitates the work of the webmaster and once again proves that Mozilla Firefox is a "rudder" browser.
You can download the mazilka extension here: http://users.skynet.be/mgueury/mozilla/
You can install the extension like this:
- Launch Firefox.
Next: Menu - Tools - Add-ons - Extensions.
And, simply drag and drop the downloaded file (xpi extension) into the window that opens.
After that, the extension will be installed automatically.
or (second way):
- Launch Firefox.
Next: Menu - File - Open file - specify the path to the downloaded file.
After that, the extension, again, will be installed automatically.
After the installation is complete, you will need to restart your browser.
When restarting, a window will appear with a choice of a way to check web pages:
"HTML Tidy" or "SGML Parser" or "Serial"
We choose the "SGML Parser" method as the most convenient and acceptable option. We press the corresponding button. Now, in the browser window, the shortcut icon of the add-on will be displayed, and next to it - the button for the add-on settings menu.
I have - above and on the right:
HTML Validator for Mozilla browser Firefox runs entirely in automatic mode. He does not need to be shown what to check. It checks all documents that will be opened in Mozilla Firefox. It is very comfortable. It is enough to look at the color of the program's shortcut to understand whether or not there is a problem in the open document.
Depending on the results of the check, the color of the icon can be green, yellow or red, which means the following:
green - "no errors", everything is "OK"
yellow - "no errors, but there are warnings"
red - "there are errors"
When you click on the shortcut, a window will open containing the source code of the page you are viewing, with explanations and comments on errors and warnings, if any.
Approximately like this.
This collection contains an amazing collection. online services for working with CSS codes. All these services make the life of a web developer much easier. With their help, you can generate a CSS grid for the site, check the code for errors, adapt the code to various browsers, generate CSS styles based on Photoshop layer styles, get pattern codes for backgrounds and gradients, compress CSS to increase site loading speed. There are many services that specialize in working with fonts and their visual representation.
The 1Kb CSS Grid
By setting just three parameters, a CSS grid is also generated. It also specifies the width in pixels. 
Grid Designer
more complex service. The CSS grid is configured in several ways. The second block generates the text that will be displayed in the columns. At the output, we have a ready-made CSS and HTML template. 
CSS Lint
A service for checking your website code for errors. 
Primer CSS
By pasting the HTML code into the dialog box, you can get a list of all the mentioned classes and IDs that are mentioned in the CSS. 
PrefixMyCSS
If you enter source css code, and at the output you can get a code adapted for different browsers. 
Modernizr
This service offers to download and install JavaScript library open source that will somehow help you when creating a site. I can't say for sure because I haven't tried it myself. 
Layer Styles
Highly useful service. Based on the settings in the Layer Styles dialog box, Photoshop generates CSS code. 
Ultimate CSS Gradient Generator by ColorZilla
There are a large number of gradients to choose from and their CSS codes adapted for different browsers. 
spritebox
Allows you to quickly and easily create classes and ids from a single image 
automatic css inliner
Automatically converts all local styles to inline CSS for use in mailing lists. 
type tester
Allows you to compare the spelling of different fonts and get the CSS code of the selected writing style. 
The Web Font Combinator
The service allows you to visually see how different combinations of fonts will look in headings, subheadings and in the main text.
Lately I've been getting a few questions from users regarding the validity of my themes and validation in general. In this post I want to answer them.
What is validity?
It is believed that the validity of the code is a single, universal characteristic of any code.
In fact, validity is conformity html code document to a certain set of rules specified in the doctype or implied in HTML5 .
That is, validity is a relative concept, since the rules are different, and their requirements too.
To make it clearer, I will give an example that I found on the site css-live.ru:
Different SNiPs (building codes and rules) apply to the construction of residential buildings and nuclear power plants, so a document that is valid according to one set of rules may not be valid according to another (a nuclear power plant built according to the standards of a residential building would be good!).
The doctype usually points to the document against which html validation is planned, but may be chosen for pragmatic reasons to select the optimal mode of browsers.
XHTML5 may not have a doctype at all, but be valid.
Validation - what is it?
In simple terms, validation is the process of checking code and making it conform to the chosen doctype (DTD).
How is validity checked?
The validity of HTML code is checked by a tool called a validator.
The most famous w3c validator is https://www.w3.org.
The w3c validator performs several code checks.
The main ones:
- Check for syntax errors:
Example from habrahabr.ru/post/101985 :is the correct syntax, even though is an invalid HTML tag
So syntax checking is minimally useful for writing good HTML code. - Tag nesting check:
AT HTML document tags must be closed in the reverse order of their opening. This check detects unclosed or incorrectly closed tags. - HTML validation according to DTD:
Checking how the code corresponds to the specified DTD - Document Type Definition (doctype). It includes checking tag names, attributes, and "embedding" tags (tags of one type inside tags of another type). - Checking for Foreign Elements:
It will find everything that is in the code but not in the doctype.
For example, custom tags and attributes.
To check the validity of CSS code, there is a css validator - http://jigsaw.w3.org/css-validator.
Code Validity- this is the result of a mechanical check for the absence of formal OB, according to the specified set of rules.
You need to understand that validation is a tool, not a value in itself.
Experienced layout designers usually know where it is possible to violate HTML or CSS validation rules, and where not, and what threatens (or does not threaten) this or that validation error.
Examples of when not valid code makes the site:
- more convenient and faster - custom attributes for Javascript/AJAX or
- SEO optimized - ARIA markup.
It is clear that there is no point in validity for the sake of validity.
As a rule, experienced layout designers adhere to the following rules:
- There should be no gross errors in the code.
- Minor ones can be tolerated, but only for justified reasons.
Regarding html/CSS validation errors:
Validation errors (VFs) can be divided into groups:
- OV in template files:
They are not hard to find and fix.
If any of the small errors help make the site more functional or faster, they can be left. - OV in third-party scripts connected on the site:
For example, a Vkontakte widget, a Twitter script or YouTube video files.
There is no way to fix them, because these files and scripts are located on other sites and we do not have access to them. - CSS rules that the validator doesn't understand:
The validator checks that the site code matches a certain HTML versions or CSS.
If you used CSS version 3 rules in the template, and the validator checks against version 2.1, then it will consider all CSS3 rules to be errors, although they are not. - OV, which involuntarily have to be left on the site in order to get the desired result. For example:
- noindex tags. They are not valid, but they are very necessary and we have to put up with it.
- khaki. To get the correct display of the site in some browsers, sometimes you have to use hacks - code that only a certain browser understands.
- Validator errors.
Often he does not see any tags (for example, closing ones) and reports about the OB where it does not exist.
It turns out that on a working site there will almost always be some kind of OV.
Moreover, there can be a lot of them.
For example, the main pages of Google, Yandex and mail.ru each contain several dozen errors.
But, they do not break the display of sites in browsers and do not interfere with their work.
Everything written above applies to my topics.
Complex topics include:
- WordPress features (ex. the_category()), which give an invalid code.
- Video output from video hosting sites, for example, from YouTube, and there are a lot of OBs in the YouTube code, which neither you nor I can influence.
- Buttons social networks, which are connected using scripts of these networks and contain OB.
- CSS3 and HTML5 rules considered bugs by older version validators.
At the same time, validators of CSS3 and HTML5 versions consider the old rules as errors :). - Sometimes, in order to achieve correct display in Internet browser Explorer or older versions of other browsers have to use so-called hacks - code that only a specific browser understands in order to write site display rules for that particular browser.
As a result, you can get a completely valid code only when laying out very simple topics, i.e. those that contain the minimum amount of functionality.
After finishing the layout of any of my topics, I always check it with a validator and fix all the OBs that can be fixed without losing the functionality of the topic.
That is, if there is a choice between a working functionality and validity, I choose the functionality.
If you make up your own themes, I advise you to do the same.
From my point of view (and also from the point of view of the majority of layout designers), the attitude to html/CSS validation as the ultimate truth is wrong. It is mandatory to correct only those OBs that:
- prevent the browser from correctly displaying the page (unclosed and incorrectly nested tags).
- slow down page loading (incorrectly connected scripts).
- can be fixed without breaking the functionality of the theme.
I hope I answered all your questions about validation.