By this point in the semester, you already know how to set up a background because you’ve had to use backgrounds in multiple projects and pages. What you may not know how to do is manipulate the size and placement of that background. For example, what if you want a background image to start a little bit below the top or a little bit right of the border? As you move into the lesson, this may be the most challenging design project you’ll ever do in this class.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• Like any other color style, background-color can be written with color names (140 choices), hex values (#ffffff), or RGB values ( rgb(0,100,255) ).
• Even though there are lots of background properties to choose from (background-image, background-color, etc), just using background alone (background:…) is a simpler shorthand for most of those other properties, especially the background-image property.
• By default, if you use the background-origin property, the background will begin within the padding-box (just inside the border), but you can use this property to adjust the starting point.
• The background-origin and background-clip properties are almost identical. The only main difference is that background-clip is typically used with color backgrounds (like painting).
• For a quick review of color gradients, refer to the summary from Lesson 6.9.
• When using the list-style-image property, it’s best to use a small png icon since the list is just a series of bullet points.
• Anchor links can be far more interesting than the basic HTML structure you learned in LG#5. With CSS, you can add selector states (:hover, :active, etc) to your anchor links so that when you hover over, click on, or go to a link, the color or design will change.
• Table styles are perfect for organizing content in a creative way on your webpage, but remember from LG#5 that your entire webpage should NOT be built with tables.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.

27. background-color
28. background-image
29. background-repeat
30. background-attachment
31. Styling the Lists
32. Styling the Tables
33. Styling the Links
34. Customizing the Mouse Cursor
35. Module 3 Quiz

Assignment #2 (2 Points): Design Project
Looking at the picture on the right (click to enlarge), you might think this will be a really easy design. It won’t. You are being asked to combine a number of skills that you’ve learned from the last several lessons all at once. The purpose of this design is not to trick you, but to push you toward your absolute best. It won’t work for you to cut corners or look for an easy way around. Decide that you can get this done before you start and don’t give up until you actually get it done. Are you ready? Give it a go…

• STEP 1: Take about 20-30 minutes and study ALL of the information in the overview. All the style tips. All the link states. All the properties. All the values. All the resources. Don’t rush it. If you think this is a step you can just skip because you don’t need it, you’re absolutely wrong. Study EVERYTHING in that overview so that when you reach a later step in the design, you’ll be fully prepared to handle it.
• STEP 2: Go into your CSS subfolder and create a new folder called 6.5_sunrisechallenge.
• STEP 3: Inside of your new 6.5_sunrisechallenge folder, create three HTML documents (day1.html, day2.html, and day3.html) and one CSS document (style.css).
• STEP 4: Choose three consecutive dates in 2016 and find out when the sun rises on those three days. This will be the information you need for day1.html, day2.html, and day3.html.
• STEP 5: Go to Google and get 3-4 sunset images that are LARGE enough to be a background for your screen resolution. And while you’re at Google Images, go ahead and find a sunset icon to use for your favicon.
• STEP 6: Copy/paste the source code from this page into your three HTML files, then change the areas in ALL CAPS (like DATE, TIME, FAVICON). Make sure the date and time information is based on consecutive days (such as June 1, June 2, June 3).
• STEP 7: Now comes your biggest challenge of the semester. Build a style.css that makes your website look something like this.
• You MUST use background-position, background-size, background-color, and of course, plain old background ( url() ). You MUST push the BODY background down and to the right (using body-position).

  Here is a list of the 10 things your style.css SHOULD and SHOULD NOT have:

  1. Your background SHOULD have an image and a sunset color, but the image should start several pixels/percentages below the top (enough room for the H1 heading) and several pixels/percentages to the right (enough room for the circular anchor links).
  2. You SHOULD NOT use buttons. Turn the anchors into their own circular buttons with a border-radius, a background-color, and a background image.
  3. Your anchor links SHOULD be circular and large enough so that the background images inside of them is easy to see.
  4. The background for your three anchor links SHOULD all be different, but it should also match the background for that specific page. For example, if you’re on a page for 04/05/16, the body background image for 04/05/16 should be the same as the anchor background image for that page. TIP: To make each anchor link background and each body background different, use ID and/or CLASS attributes.
  5. Your heading SHOULD have a text-shadow.
  6. The background image in each of your anchor links SHOULD start about halfway down the circle and the text for the date SHOULD be above the image like this (try using line-height and some other text styles to adjust the position of text.
  7. Your h1 heading SHOULD have a text-shadow.
  8. Your anchor links SHOULD have a hover feature that changes the background color and text of the page links.
  9. Your h2 time SHOULD be placed at the bottom of the page, but the font-size should be large enough to stand out.
  10. Your cursor should be changed into a crosshair on all styles, all sections, and all pages of your website.
• STEP 8: When you have finished designing the style for your three pages, check to see that all three pages work, that all three pages have different background images, and that all three pages are based on consecutive dates.
• STEP 9: Take a deep breath. You just overcame the most difficult challenge of the semester. The next lesson won’t be quite so tough.

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): Review and Quiz
Look over the 6.5 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 6.5, and take it. This is a way for you to show the teacher that you have finished this lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.6. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.