Exercise - CSS Intro

Exercise

Time to incorporate some of what we have covered into an actual webpage.  Soo...et's begin by indulging our right brain and get in touch with our inner artist.

Gradients

  1. Create a new webpage and save it as boxModel.html.
  2. Create a CRAZY linear gradient for the body of your document. Did you like that? Now create one or more of the other type of gradients, such as radial or stacked, stripes, etc. Feel free to copy and paste from the examples but spend a bit of time playing around and exploring variations.

Pseudo Element Practice

  1. Start your document with the words Pseudo Elements surrounded by <h1> tags as in (<h1>Pseudo Elements</h1>)
  2. Use an element selector to set the h1 font size to 50px.
  3. Underneath add <header> </header> tags and paste the following phrase between them:  It was the best of times, <br> it was the worst of times. (make sure you get the <br> tag. 
  4. Find the appropriate pseudo ELEMENT (not pseudo class) and use it to set the font of the first letter of this phrase to a font-size of 44px.
  5. Use another pseudo element to set the font color of the first line to red.
    1. Use hexadecimal notation to set the color.
    2. Set the color again using rgba.

Rotation!

Add <h2>Rotation example</h2> heading to your document. Now use a css function with an element selector to rotate the heading 10 degrees. Hint: Googling css rotate function may give you just what you need.

Take the challenge!

The image that appears just below was pasted in from a webpage and basically displays two boxes with text inside.  Your job is to use everything you have learned (or at least read about)  such as padding, background color, margins, alignment, etc. to create those two boxes on your current webpage. Some hints:
a. The font is from Google Fonts.
b. One of the boxes uses the padding-clip property to achieve an effect.
c. The cheesy 3d text effect in the bottom box was created with text-shadow.
Have fun!

Xtra

Did you zoom through the previous exercise and still have lots of time left?  In that case, see if you can figure out how to use javascript to rotate one of those boxes!