Here's a chance for you to practice some of the concepts covered in week one.
- Given the following style declarations, what is the width (from the outside
edge of the left margin to the outside of the right margin) of the <div> in standards/strict mode?
And what is the width of the <div>'s content area?
div {
height: 200px;
width: 400px;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px;
border: 1px solid red;
}
- the width (from the outside edge of the left margin to the outside of the right margin)
should be 502 px = 400px (the content area width) + 20px (right margin) + 40 (left margin) + 20 (right
padding) + 20 (left padding, replicated right) + 1 (right border) + 1 (left border)
- How will IE6/Win render/handle the text in the following paragraph element (a) in
standards mode and (b) in quirks mode? State the color and background-color that will be rendered
in both modes.
body { color: blue; background: yellow; }
p { color: ff0000; background: white; }
- Using DOCTYPE XHTML Strict (which uses standards mode) and Internet
Explorer 7, the paragraph had a white background and a blue font (not red because
of the missing #). Using DOCTYPE HTML 3.2 (which uses quirks mode) and Internet
Explorer 7, the paragraph had a white background and a red font.
- Tell what - if anything - is wrong with the following styles:
p { font: arial, verdana, sans-serif; }
div { font-size: 12px; line-height: 1.5; }
em { font-style: italics; }
body { color: #000; background: #ffffff; }
body { color: transparent; background-color: pink; }
body { color: brown; background-color: transparent; }
p { font: 1em/1.5em Times New Roman, Times; }
span { border-width: 3 px; }
p:first-child span { font-weight: 600; }
p:first-line span { font-weight: bolder; }
-
p { font: arial, verdana, sans-serif; } --- should be font-family not just font
div { font-size: 12px; line-height: 1.5; } --- there is no unit after the line-height value
em { font-style: italics; } --- it's "italic" not "italics" (no s)
body { color: #000; background: #ffffff; } --- OK, though I usually specify background-color
body { color: transparent; background-color: pink; } --- color cannot be transparent and "pink" is not understood as a named color
body { color: brown; background-color: transparent; } --- "brown" is not understood as a named color, also have color but no background-color other than transparent
p { font: 1em/1.5em Times New Roman, Times; } --- 'Times New Roman' needs to be in single quotes, should include generic font family (serif) at end
span { border-width: 3 px; } --- there should be no space between the 3 and the px
p:first-child span { font-weight: 600; } --- seems OK
p:first-line span { font-weight: bolder; } --- Take out the word "span"
- I'm having a problem with
this document. It doesn't seem to
want to validate for CSS. What's wrong? Fix it so that it does validate.
- The hardest problem for me to find was that type attribute of the style tag was
set to css/text when it should have been set to text/css. The next problem
was that the contents of the style block was contained in an HTML comment which should start off
<!-- but started off <!- (only one hyphen). The paragraph style margin
had the value separated by semicolons when they should have only been separated by spaces. The font
style was getting confused; it was "thinking" that "bold arial" was a font family instead of bold the
font weight and arial the font family. I separated out the various aspects of the font style. I also switched
the DOCTYPE to xhtml transitional, added the xmlns="http://www.w3.org/1999/xhtml" attribute to
the html tag (because Visual Studio 2005 seems to insist on it), and closed the meta tag with
a />.
Here's is my fixed version.
- The '#' symbol is commonly called the 'hash symbol,' the 'pound sign' or
the '_ _ _ _ _ _ _ _ _ _' What's the word?
- octothorpe