CSS+Exercise

=Start=
 * Visit CSS Desk: []
 * Take a look at the HTML panel and CSS panel.
 * Delete everything there's already there
 * Enter the starer code below in the HTML panel and CSS panel respectively

This is box
 * HTML**

div{ margin: 10px; background: white; }
 * CSS**

=HTML Challenges= =CSS Challenges=
 * How can we create another DIV box below?
 * How can we add two H1 headings to each box that reads "Top News", "Top Videos" and "Bottom News", "Bottom Videos" respectively?
 * How can we add a link to cnn.com in the top box, and a link to abc.com in the bottom box?
 * How can we add a unordered list of three items to the top box (US, World, Sports)?
 * How can we add an outside box that contains these two boxes? Why does the margin between the two boxes disappear?

Basics

 * What is the basic format of a CSS declaration, for example, to declare all H1 elements to have the color red?
 * Where should CSS declarations go in a web page?
 * How can we declare two different classes of H1, making H1's in the top to blue and those in the bottom green?
 * How can we assign a role to each specific box, so that the background color can be set individually?

Styling

 * How can we set the foreground text to white?
 * How can we align the text in the center?
 * How can we make the text blink?
 * How can we set the text to italic?
 * How can we change the font to SanSerif, such as Arial?
 * How can we change all the links to yellow?
 * How can we make all the links to turn red when the mouse cursor hovers over?
 * How can we change bullets to squares?

Box Model

 * How can we set the outside box exactly 400 pixel wide?
 * How can we set the bottom box taking up 70% of the width of the outside box?
 * How can we set the thickness of the box's border to 10 pixel?
 * How can we set the color of the box's border to green?
 * How can we set the style of the box's border to dotted lines?
 * How can we set ONLY the top of the border to a dotted line?
 * How can we set the margin between two boxes to 100 pixel?
 * How can we remove all the internal padding, so the text and borders are really close?
 * How can we increase the padding only in the top of the box?
 * How can we position the outside box exactly 100 pixel from the top of the page?