Lab 6: CSS: Text, Colors, & Backgrounds

Goals

Learn about...

  • How to apply CSS to HTML documents
  • About font and text-related CSS properties
  • How colors are defined and applied
  • Applying background images and patterns

Key Concept

Cascading Style Sheets (CSS) can be used define almost every aspect of an HTML document's visual presentation. The beauty of CSS is that all the pages of a logical website can share the same stylesheet, which allows a designer to change the appearance of many web pages by changing the code in one file.

Pre-lab

Pre-lab Reading

  • Textbook pp 207-222

Pre-lab Activity

  1. Textbook exercise 11-1
  2. Textbook exercise 11-2

Use reading and activity to answer the Pre-lab Questions. Be sure to complete the activity and answer the pre-lab questions in Blackboard before the start of the lab period.

In-lab

Info

Note that these instructions are not always detailed. You must figure out some of the detail by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Working with others

You can work together with a partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session.

You should not collaborate with anyone outside of the designated two-hour lab session.

Preparation

  • Always make sure you save your lab file in the appropriate folder, i.e., lab6.
  • For file names, only use lowercase letter and never use spaces.

Activity

You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

Formatting Menus

  • Download menu.html and save it to your lab6 folder.
  • Use the menu.htmlfile and complete exercise 12-1 through 12-7 using Notepad++. Refer to pages 225-258 for help.
  • It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
  • Make sure menu.html validates at http://validator.w3.org/#validate_by_upload
  • Show your instructor that menu.html is finished and validates.

Font & Text Questions

  • In Notepad++, create a webpage called lab6.html
  • Remember to include the basic HTML document structure shown on page 56 (Figure 4-7).
  • Answer the following questions and use HTML and CSS to appropriately markup and style your answers according to the instructions in the questions below. Use the HTML span tag with class="answer" to markup your answers below. The style will be the same for all four questions.

  • Font & Text:

    1. What is the name of the CSS property for changing the font type. Use embedded CSS so that .answer uses the Georgia font.
    2. What is the name of the CSS property to make the font italic. Use embedded CSS so that .answer will be italic.
    3. What is the name of the CSS property to change the text color. Use embedded CSS so that .answer will have red text.
    4. What is the name of the CSS property to make text bold. Use embedded CSS so that .answer will have bold text.
  • In the end, the answers in your final document should look like this: answer.
  • Save your lab6.html file. We will answer more questions at the end of the lab.

Adding Color

Color & Background Questions

  • Continue to answer the following questions in yourlab6.htmlfile.

  • Color & Background:

    1. What is the HTML color code (#hexcode) for yellow? Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have a background color of yellow.
    2. What is the CSS property for specifying a background image. You do not have to use this property, just name it.
    3. What is the CSS code to position a background image so that it does not repeat and is centered horizontally at the top. You do not have to use this property, just write the code.
  • In the end, the answers in your final document should look like this: answer.
  • Save your lab6.html file.

Deliverables

Upload lab6.html to Blackboard.