Guide to HTML, CSS and JavsScript (Buffalo State College Version)


Chapter 8: Adding Special Effects to Your Web Page

In an earlier section we introduced Cascading Style Sheets, CSS, for controlling the look of your web pages. You can change the look of any HTML tag using the above mentioned External, Embedded, or Inline Styles. Not only can you control how your web page is rendered by the web browser, you can also control how your web page might look when printed or viewed on a mobile device or via a screen reader or a brail device.

Let’s say you had "Cooking Recipe" web page that used the <header>, <sectio>, and <footer> HTML5 tags to display different sections of your web page (more about these tags later). You want to offer your visitors the ability to print the recipe on a 3x5 card for their recipe collection. You can add a set of styles to your CSS file using the @media print style command that will control how and what is printed.

An HTML snippet of your Cooking Web Page:

  <header id="myHeader">
    <h1>Welcome to Jim's Cooking Page</h1>
  </header>
  <section id="myIntro">
    <p>We hope you find this recipe easy and tasteful</p>
  </section>
  <section id="recipe">
    <ol>
      <li>Add one (1) cup of flour to a large mixing bowl</li>
      <li>Add one (1) egg and mix</li>
      <li>Stir in one (1) cup of milk</li>
    </ol>
  </section>
  <footer id="myFooter">
    <p>For more information contact us!</p>
  </footer>

Figure 8-1: HTML for "Recipe" Page

Then you would have these lines in your External CSS file (*mystyles.css*):

@media print {
  #myHeader, #myFooter, #intro {
    display: none;
  }
  #recipe {
    border: 1px solid #000;
  }
}

Figure 8-2: CSS for Printing "Recipe" Web Page

The above lines tell the web browser that when this page is printed to not render the header identified as *myHeader* or the section identified as *intro* or the footer identified as *myFooter* since you are setting the value of display to none for each of those IDs. So, now when that page is printed, all that prints is the recipe itself.

When this web page is printed it would look like this:

print view of recipie card
Figure 8-3: CSS "Recipe" Image When Printed or Print-Preview

You can (and should) test this using the Print Preview feature of your web browser.

Task - Add Special Effects to Your Web Page Using Cascading Style Sheets

For this task you will copy your Web Page from your first task (*index.html*) to create a new web page (*advcss.html*). Then modify your new *advcss.html* file and your original *mystyles.css* file to add these features to your new *advcss.html* web page:

  1. Use a style to change your graphic to be 50px wide by 50px tall (your picture will look scrunched, but that’s OK)
  2. Change the display font for your introductory paragraph to Verdana, serif
  3. Float your graphic so it is on the right of your introductory paragraph and your introductory paragraph wraps around your image
  4. Change your list of task links to be an ordered list
  5. Add a table similar to your CSS task that displays with no borders around any of the cells
  6. Add appropriate @media print styles so that when your page is printed (you can use the Print Preview feature of your web browser to see the different look):
    • Your home page graphic does not print
    • Your list of task links are green
    • Your list of task links is an unordered list
    • The font for your introductory paragraph is Arial, sans-serif
    • Your table prints with a borders around every cell

This web page should also have a link back to your Home Page task web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your advanced CSS web page.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland