Scribd Logo
Upload

Welcome to Scribd!

  • 3 5+Restaurant+Reviews+CSS

    Uploaded by

    Christy Hailu
    8 views3 pages

    Original Title

    3.5+Restaurant+Reviews+CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    3 5+Restaurant+Reviews+CSS

    Uploaded by

    Christy Hailu

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Activity 3.

    5: Restaurant Reviews Page CSS

    Now that you’re familiar with CSS, let’s make the previous activity a bit more visually appealing.
    We’ll start where we left off with the restaurant document.

    1. Open your text editor and use the open command to open the HTML you created in
    activity 2.6.

    2. Immediately save that document as activity3.5.html. Make sure you save it somewhere
    easy to find so you don’t have to search for the file later. We don’t want to accidently
    save over your previous work.

    3. Display the HTML code in a browser so you can see how it’s rendered before adding
    any CSS code.
    4. In the <head> element of the document add a style element. Your document head
    should appear like this when done:

    5. Let’s style the <h1> tag so that the content within it appears in the Arial font and
    centered. Add the following CSS to your style element:

    h1 {
    font-family: Arial;
    text-align: center;
    }

    6. Save your HTML document and refresh your browser to review the result. If you did
    everything correct the text “My Restaurant Reviews” now appears centered in the middle
    of the screen.
    7. Next style the h2 and h3 tags so they appear as you would like. You can try adjusting
    font sizes, colors, or other aspects of the text until you are pleased with how they look.

    8. Adjust the unordered list so they appear with a custom bullet graphic. You can search
    Google and find a bullet that you like, or design your own in a program like Photoshop.
    Again refresh your document in the browser so you can see the custom bullet.

    Since this is a restaurant review, I made my bullets out of tiny cheeseburgers, which
    makes me hungry. You may download the burger bullet at https://s3-us-west-
    2.amazonaws.com/labcontent/burgerbullet.jpg.

    9. Using CSS make any other changes to the page appearance that you wish. Be creative
    and experiment. Notice that you are altering the appearance of the page, but the
    content— and HTML code— is remaining the same.

    You might also like