Exercise 1: CSS Stands For...?

Given the following HTML, what CSS would be necessary to produce the expected output below? (You can download the HTML here) 

              
              <h2>CSS: Corgis, Short &amp; Sweet</h2>

HTML

CSS: Corgis, Short & Sweet

output

Assume that the corgi image (background image of the h2 tag) is located in the directory '../../img/corgi.gif', is positioned 520px from the left edge of the h2, and has a background size of 60px x 60px in the output. The "CSS" text is green and the "Sweet" text is purple. Any text that is not green/purple has a color of #444. The "short" text is all lower-case and has a font-size of 14pt. The word "Sweet" is italicized, and both "Sweet" and "Corgis" have a cursive font type. Note: you may add <span> tags as appropriate to get the desired output.

Exercise 1: Solution

One possible solution is provided below:

              
                

                  CSS: Corgis, Short &amp; 
                  Sweet

HTML

              
h2 {
  /* background: bg-image bg-repeat bg-position/bg-size */
  background: url("../../img/corgi.gif") no-repeat 520px/60px;
  color: #444;
}

#css-abbr { color: green; }

#short, #sweet { font-family: cursive; }

#short {
  font-size: 14pt;
  text-transform: lowercase;
}

#sweet {
  color: purple; 
  font-style: italic;
}

CSS

Exercise 2: Boxes

Given boxes.html, write boxes.css to make the appearance on the slide below.

              
              <!DOCTYPE html>
              <html>
                  <head>
                  <title>Section 2: Boxes Exercise</title>
                  <link type="text/css" href="boxes.css" rel="stylesheet" />
                </head>
                <body>
                  <div id="outer-box">
                    <div id="inner-box"></div>
                  </div>
                </body>
              </html>

HTML

Boxes: Expected Output

output

The outer border of the box is red, the inner border of the box is black, and the inner background color of the box is yellow. Both the outer and inner borders have a width of 50 pixels. The yellow portion of the box has a width and height of 200 pixels. The overall box has a width and height of 400 pixels.

Exercise 2: Solution A

Two possible solutions are provided below (there are more possible):

              
              body {
                margin: 0;
                padding: 0;
              }
              
              #outer-box {
                background-color: red;
                width: 300px;
                height: 300px;
                padding: 40px;
              }
              
              #inner-box {
                background-color: yellow;
                width: 200px;
                height: 200px;
                border: 50px solid black;
              }

CSS

Exercise 2: Solution B

              
              body {
                margin: 0;
                padding: 0;
              }

              #outer-box {
                background-color: black;
                width: 300px;
                height: 300px;
                border: 50px solid red;
              }

              #inner-box {
                background-color: yellow;
                width: 200px;
                height: 200px;
                margin: 50px;
              }

CSS

Exercise 3: GOT Selectors

Directions: Use the given HTML code and CSS selector tool on the slide below to improve your skills in CSS selectors!

<!DOCTYPE html> <html> <head><title>GOT FTW</title></head> <body> <h1>Game of Thrones Page</h1> <div id="intro"> <h2>Introduction</h2> <p>Game of Thrones is the best series ever!</p> </div> <div id="content"> <div class="bordered"> <p>There are five books: A Game of Thrones, A Clash of Kings, a Storm of Swords, a Feast for Crows, and a Dance with Dragons. </p> </div> <h2>Houses</h2> <ul> <li>House Stark</li> <li>House Targaryen</li> <li>House Lannister</li> <li>House Tully</li> </ul> <h2>Plot</h2> <p>It's too long to describe. Just read the books!</p> </div> <div id="footer"> <h2 class="bordered">Thank you!</h2> </div> </body> </html>

Write a CSS selector here for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements, except those inside intro
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

Exercise 3: Solutions

  1. all h2 elementsh2
  2. element with ID intro#intro
  3. h2 elements inside intro#intro h2
  4. h2 elements, except those inside intro#content h2, #footer h2
  5. p elements inside content#content p
  6. p elements directly inside content#content > p
  7. elements with class bordered.bordered
  8. h2 elements with class borderedh2.bordered

Exercise 4: Dogs!

Fix all of the validation errors in dogs.html and also make it match the style guide. 

              
                <!DOCTYPE html>
                <html>
                  <head></head>
                  
Dogs are the best!!!

                  <body>
                    
Why dogs are the best

                      <li>First of all, they are cute.
                      <li>Also, they protect against meanies.
                      <li>Finally, cats SUCK!
                    
Why cats are NOT AS GOOD AS DOGS

                    
They are mean & they scratch.

                    <h2>Dog pictures:
                      
                      
                  </body>
                </html>

Exercise 4: Solutions

              
                <!DOCTYPE html>
                <html>
                  <head>
                    <title>Dogs are the Best!</title>
                  </head>
                  <body>
                    
Dogs are the best!!!

                    
Why dogs are the best

                    
    
                      
  • First of all, they are cute.
    • 
                      
  • Also, they protect against meanies.
    • 
                      
  • Finally, cats SUCK!
    • 
                    

                    
Why cats are NOT AS GOOD AS DOGS

                    
They are mean &amp; they scratch.

                    
Dog pictures:

                    

                      cute pupper
                      moar cute pupper
                    

                  </body>
                </html>

HTML