Investigate CSS Troubleshooting and Validation

When you have styling or layout problems, you need to check for valid HTML and valid CSS.

When HTML and CSS fail, the web browser does not provide any error messages.

Styling errors may not appear the same in every web browser. They may not even be evident in one web browser by show up in another.

So you need tools to help unravel styling problems. Here are tools you will use in the course.

  • Visual inspection of the source files.

    By looking at the source files you may spot an obvious typing error. When you are learning, often you might compare a course instruction or a completed version to your own work.

    You likely will use your code editor for visual inspection of the source.

    You also can use the web browser developer tools to show you the source it received. Sometimes the error is that the wrong source is being used by the web browser.

  • Online validation tools.

    No matter how much experience that you have with HTML and CSS, you will have syntax errors. So even the most experienced users of HTML and CSS rely on validation tools to help.

    You have separate validation tools for HTML and for CSS avaliable for free at the W3C.

  • Web browser developer tools

    The web browsers contain developer tools to show you how it interpreted your HTML and applied CSS from your source documents. For example in the Chrome web browser the key tool that you use is called Elements.

    For most web browsers there is a short cut menu choice named Inspect that opens the tool for seeing how CSS was applied.

    We use these throughout this course to learn CSS. More importantly is that you use them when you write and test CSS and is considered one of the skills you need.

Tips:

  1. Validate your HTML before you validate your CSS. Sometimes your CSS will pass the validation tests but you will still have problems with your styles being applied because of malformed HTML.

  2. Keep all your CSS in external CSS documents, then you only need to validate your HTML once or after you make changes to it. Then you only have to validate CSS documents to work on styling.

  3. Always validate your HTML and CSS before publishing your documents. It should be part of your pre-release steps.

Activity 1:

Objective: Learn the direct input copy and paste steps to validate CSS using the online CSS Validation Service provided by the W3C.

Steps:

  1. In your web browser visit CSS Validation Service at the W3C.

  2. Select By direct input tab.

  3. Paste in the following CSS …

    h1{
	backgroundcolor:black;
	color:white;
	text-align:center;
}

  4. Click the Check button.

  5. You should get one error message about a missing title element. The error message may have been:

    "Property backgroundcolor doesn't exist : black"

    It is early in the course to start fixing CSS, but make an effort to provide solution to correct the error.

    This line …

    	backgroundcolor:black;

    … is changed to this …

    	background-color:black;

    … because the dash was missing in the property name.

  6. Repeat the test by using the following CSS …

    h1{
	background-color:black;
	color:white;
	text-align:center;
}

    Your CSS should pass.

    Congratulations! No Error Found.

Activity 2:

Objective: Evaluate your experience using the W3C CSS validation service.

Steps:

  1. Describe the three methods at W3C Validation Service that you can used to test an CSS file for valid markup.

    1. By URI. This is includes the URL that you can place in the address bar of a web browser that starts with http or https.

    2. By file upload. This is to load an HTML file from the any storage unit connected to your computer.

    3. By direct input. This requires a copy and paste or hands on typing.

  2. How can you validate the CSS from any web page on the internet?

    Yes. First go the web site and copy the URL from the address bar. Then you use the address feature at Validation Service and paste the URL.

    You can also open the web browser developer tools and review the CSS source and how the CSS was applied to the elements. This includes using the short cut menu over the web page and selecting the Inspect menu choice.

    Depending on the complexity of the web page, you can learn how others applied CSS to achieve a style that you may want to adopt.

  3. Describe how the CSS validator helps you identify errors.

    1. It provides the CSS it considered valid.

    2. It provides the line number and selector of the error.

  4. Why can CSS validate correctly but there are still styling errors? Explain your answer.

    Yes because you could have HTML validation errors. You also can be applying the CSS incorrectly or using CSS properties or selectors not supported by a particular web browser.

CSS Validator Tips:

Do not panic if you have a lot of CSS validation errors.

Fix one or two of what appear to be real errors from the top of the error list. Then retest. It is possible other errors messages may also disappear.

Some CSS validation errors may be real errors and some may be false errors due to the validator stumbling on the real errors.

Validate often. This avoids too many CSS errors from building up and makes correcting them easier.

Use an external CSS document. This avoids having to assure every HTML document CSS being tested and synchonized when errors are discovered.

Complete and Continue