Appling CSS Specificity exercises with Nora McDougall-Collins: The Computer Gal

The Computer Gal on Facebook
Watch this page for ongoing web development tips

This exercise is a series of questions. The answers require experimentation

If the body tag is rewritten in an external style sheet, can the style be overridden internally?

Create a new CSS file named BodyTagTest.
Add a comment at the top of the file that notes that this file contains a body style for testing purposes only.
Define the body tag with a font size and a color.
Create a new HTML file, save the file as TestFiles/Precedence1.html, and attach the new style sheet.
Type some words in the file. The font should be formatted the way you set the style.
Now rewrite (dffierent size and color) the body tag in the <head> of the file.
Did the font formatting change? Which has precedence, externally rewriting the body or internally rewriting the body? Where should you look first to see what is controlling the formatting?
Sample

If the body tag is rewritten externally, can the style be overridden with an internal style?

Add a new class style to your BodyTagTest file that has different font formatting.
Create a new HTML file, save the file as TestFiles/Precedence2.html, and attach the new style sheet.
Type some words in the file. The font should be formatted the way you set the style.
Now rewrite (dffierent size and color) the body tag in the <head> of the file.
Did the font formatting change? Which has precedence, externally rewriting the body or internally rewriting the body?

What happens if someone decides to format text in the <body> with the other styles in existence?

Save the TestFiles/Precedence2.html file as TestFiles/Precedence3.html, and attach the new style sheet.
Add inline text formatting to the <body>, using the same properties as the previous styles.
Did this override the previously defined styles?
How can all these scenarios lead to sloppy code? What might be one way that these levels could be used appropriately?