Formatting with CSS Trivia Quiz

Answer: Cascading

The term "cascading" refers to an interesting quality of CSS: inheritance. It's a way of style rules overriding other rules, and can be very useful to anyone using the language. More general rules will "cascade" into anything they are designed to affect unless a more specific or important rule overrides it.

Answer: In an HTML comment before the target HTML element

To properly link a CSS file, you need a "link" tag in the head of the document with the attribute "href" and preferably a "type" attribute as well. A "style" attribute is the only way to add a style rule in the body of the document, and will only affect its one tag.

In the head of the document you need to place all your CSS rules (formatted exactly as you would a CSS file) in a "style" tag.

Answer: /* to open and */ to close

This commenting syntax is shared with many popular programming languages, including Java and C#. Of course, it only works with rules declared in the document head or an external style sheet, not in-line.

Answer: !important

Using this keyword can be useful for preventing the natural flow of cascading inheritance. Normally in-line styles override conflicting styles in the head of the document, which override conflicting styles in an external style sheet. The "!important" keyword can be added to, for instance, an external style rule, which will keep its importance over a conflicting in-line style that it affects.

Answer: font-color:#000088;

CSS separates multiple words in rules always with a hyphen as shown in the answer. Colours, when represented as hexadecimal codes, should have a hash sign (#) before them. Some browsers will accept a colour without it, but not always. Semicolons at the end of a line are needed to separate multiple style rules, but it's good practice to put them at the end of all rules anyway.

Answer: border:solid 1px #000000;

This particular example, using the "border" property, is a short-hand which combines the properties of "border-style", "border-width", and "border-color", to save time.

My apologies to everyone who tried this quiz before I changed this question: the previous version included curled braces, which for some reason didn't show up in the HTML version of the quiz. Even if you selected the right answer, it would have somehow said you were wrong. The problem should be fixed now. Sorry.

Answer: z-index

Using strict HTML and no positioning, layers can never overlap. But with the addition of CSS absolute positioning, elements can be positioned independently of one another, anywhere you want on the page. This makes overlapping possible, so the "z-index" property allows an order to be determined. Overlapping can be very useful especially when used with transparent images for example, but elements like Flash or embedded video will cut out when placed over or under another layer.

Answer: text-align:center;

In the Internet Explorer browser, when "text-align" is set to a block element, it will not only align text within that element, but other elements within it as well. This makes it very easy to use CSS to align an entire page to the center. In Firefox and other browsers, however, "text-align" only applies to text. To make sure your page centers in most browsers, the best way is to set the "text-align" property of the body (for Internet Explorer), and to encase the entire page in a wrapper with its margins set to "auto" (for Firefox and others).

Answer: HTML borders apply to all cells, CSS only to the outside

Though setting a table border with HTML is considered deprecated now, it is still possible. Setting a border with HTML, in the table tag, will apply a border around the outside of the whole table, as well as separating all cells. In CSS, however, since the same border rules can apply to all block elements, they don't automatically apply to the cells within a table, just the outside edges.

In fact, it takes a lot more work to make CSS borders in a table to behave like HTML ones.

Answer: overflow:scroll;

In HTML the equivalent of "font-family:Arial;" is the "face" attribute within a "font" tag. The equivalent of "font-weight:bold;" is a "b" or "strong" tag. A "u" tag is the equivalent of "text-decoration:underline;". On the other hand, "overflow" is a CSS property with no equivalent in HTML.

It determines what will happen to content within an element of definite size. Setting it to "scroll" means that scroll bars will appear both vertically and horizontally whether they are actually necessary or not.