CSS Debugging Joan Boone jpboone@email.unc.edu Slide 1 Some common - - PowerPoint PPT Presentation

Slide 1

CSS Debugging

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

Slide 2

Some common problems

Changed the document, but it looks the same in the browser

• Did you save your changes first?
• Is the page you are viewing the same as the one you changed?

Added a graphic, but the broken image icon appears

• Is the image file name spelled correctly?
• If the image is in a different folder than your HTML or CSS, then you need to

include the folder name so the browser can find it. For example,

• If your HTML references an image in an images folder, you might

reference it as “/images/cool-photo.jpg”.

• If your CSS is in a folder and it references an image in an images folder,

then you might reference it as “../images/cool-photo.jpg”

• It all depends on where the resources are located in your website folder

structure.

Style rules are not being applied (or only some of them)

• Typos (peachpuff is a valid color name, peechpuff is not)
• Invalid syntax: missing } : ; </div>

Slide 3

Some common problems

Links to pages are no longer valid

• Over time, external and internal links may no longer point to valid web pages,

resulting in “link rot”

• If you have links to external websites, then you should periodically verify that

they are still valid. The website may still exist, but if it has been reorganized or perhaps dated material is removed, then you may have a broken link.

• Similarly, with your own website – if you reorganize, rename, or remove

resources, then some of your links may break

• If a visitor to your site enters the wrong URL, or clicks a broken link, the result

is an HTTP response code of 404 – Page not found. Most web hosting services provide a default 404 page for you, but you can create your own

• Some creative 404 pages: Blizzard, AListApart, Medium
• Awwwards: Collection of 404 Error Pages
• Smashing: The 101 Course on Crafting 404 Pages

Validation tool: W3C Link Checker

Slide 4

Debugging HTML and CSS

HTML

• Browsers parse HTML permissively – this means that even if syntax errors

are found, the page will still be displayed. Browsers have built-in rules that define how to interpret incorrectly written markup.

• Some common problems: missing closing tags, misspelled tag names, no

closing quotes, improper nesting of elements.

• Debugging tools: W3C Markup Validation Service, W3C Link Checker,

Chrome DevTools and Firefox Developer Tools

CSS

Browsers also parse CSS permissively

• If a declaration has a syntax error, or the feature is not supported, then it will

ignore the declaration and move on to the next one.

• If a selector is invalid, then it doesn't select anything, and the whole rule does
• nothing. Again, the browser moves on to the next rule.
• Debugging tools: W3C CSS Validation Service, Chrome DevTools and

Firefox Developer Tools Source: MDN web docs: Debugging CSS

Slide 5

Exercise: HTML and CSS debugging

nc-national-parks-debug.html

Should look like this