Steps for Cascading Style Sheets

© Jerry Belch

Overview of Project
  • The objective here is to:
    1. During this second semester project for the IT Department, you will explore in more depth how to work with cascading style sheets to enhance web pages.
    2. To see how quickly web pages can be modified with just a few key strokes.
    3. To create a totally different look to your web pages without changing any HTML code.
    4. The unit is 3 weeks in length.
    5. You will work with HTML templates for a flower shop.
  • Tutorial

  • CSS stands for cascading style sheets. They are used to define how HTML elements are displayed. To be most efficient these style elements should be placed in a separate file.
  • Then when each page of your web site is loaded it will modified by this file.
  • Changes to all pages in a web site can be made quickly.
  • Uniformity can be accomplished throughout the web site by using this method.
  • If you went through the Step By Step lesson on Web page design, you were introduced to CCS.
  • In that lesson you started out with creating a css style file to help you organize the way your site looks: Fonts and colors, the way lists are displayed and how headlines appear was covered.
  • In this lesson we will go beyond the simple style elements to develop very professional looking web sites.
  • If you use other software you can still use this tutorial by just changing the elements in the style sheets.
  • To get a close-up and detailed look at all elements of CSS and HTML I suggest that you use Notepad or Notepad++
  • Notepad programs are on all Windows machines.
  • To create the CSS file, List the part of the HTML tag that is affected, like body.
  • Next type the left curly brace
  • Then type the property, like background
  • Then type a colon
  • Follow this with specifications of this property, like yellow
  • Type a semicolon
  • End with a right curly brace.
  • To change the color of the background of the body of the text type the following

    • To set the color font size, font-family and how you want the text align, type P and the designations that follow.
    • To set the color for a hyperlink type the information following the A
    • The same goes for headlines one, two and three.
  • Save the file with a .css extension in the same folder as the HTML file.
  • In the lesson, you will also learn some HTML and how to code from scratch using a text editor program, Notepad and Notepad++

    Materials to Collect

    1. Check out web sites for florist shops.
    2. Collect digital pictures of flowers:carnations, violets, daffodil, daisy, lily, roses, water lily, gladiolas, morning glory, marigold, chrysanthemum, narcisus.
    3. Also collect arrangements of balloons.
    4. Collect pictures of gift baskets
    5. If you like, you may use the pictures in the tables below.

      Pictures used on Home.html page
      flower1.jpgflower2.jpgflower3.jpg
      flower4.jpgflower5.jpgflower6.jpg
      balloon1.jpgballoon2.jpgballoon3.jpg
      balloon4.jpgballoon5.jpgballoon6.jpg
      gift1.jpggift2.jpggift3.jpg
      gift4.jpggift5.jpgballoon6.jpg

      balloons.jpg
      Picture for footer

    6. Drag the mouse pointer over the picture. The name of the file to save it under will appear. Use these file names when saving you pictures.
    7. Right-click the pictures and use "save picture as" command to put the pictures in your work folder.

    Pictures used on Facts.html page
    carnations.jpgviolet.jpgdaffodil.jpgdaisy.jpg
    lily.jpgrose.jpgwaterlily.jpggladiola.jpg
    morningglory.jpgcalendula.jpgchrysanthemum.jpgnarcissus.jpg

    Teacher's Responsibility

  • At beginning of each week of this lesson, handout Progress Logs to help in the evaluation of the project by your IT students.
  • Print out Cathy's Department Template From Janet's Web Site Helpful Forms-Forms, Templates and Letters

  • Printout VE Progress Logs from Janet's Web Site Helpful Forms-Forms, Templates and Letters
  • Fill out the Department Template for IT Department. -What do you want them to accomplish each week. These Department Templates appear on the right-hand side of your screen if you choose to use these plans.

  • Make a copy of the Department Template for the IT manager and give the Department Templates to the CEO.

  • CEO gives out Department Template to department head.

  • Department head gives out Progress Logs to each employee and from the Department Template and the workflow assigns each employee the tasks for the week.

  • Employee accomplishes the work assigned and fills in information on the Progress Log.

  • Completed Progress Logs for each employee are given to the department VP at end of week.

  • Department heads turn progress logs over to CEO.

  • CEO turns over progress logs to teacher.

  • Collect student work at the end of each week.
  • Record students test score at the completion of the unit. Tests are located under Step By Step Tests.

    Here is what the home page should look like when completed.

    Here is what the flower facts page should look like when completed.

  • Step-By-Step Instructions

    Cascading Style Sheets Week 1



    Printer Friendly Version Week 1

    Day 1:

    Understanding CSS and HTML Files

    1. Html stands for Hyper Text Markup Language
    2. Tags usually come in pairs 〈Body〉 and 〈/Body〉
    3. A beginning tag and an ending tag.
    4. Notice the the tags are identical with the exception of the "/" as part of the ending tag
    5. These tags tell the browser how to format the text and pictures headlines and lists of items
    6. The tags listed above are common to all web pages.
    7. Let's begin to work with this HTML code
    8. Put the HTML code on the clipboard.
    9. Highlight all the text, type CTRL C to put it on the clipboard
    10. Now open Notepad++ or Notepad. They are found in the accessories folder in Windows.
    11. Now click in the text area of Notepad, then type CTRL V to paste the code into Notepad.
    12. Now this code as it stands will do nothing until we add some information between the tags.
    13. The first and last tags 〈Html〉 and 〈/Html〉 tell the browser that this is web page document.
    14. The file extension".html" also tells the browser that this is a hyper text markup language document.
    15. When you save this document that we are working on, you must add the .html extension when saving it.
    16. Go ahead and save the file now. Call it Home.html
    17. The HEAD tags are used to define information about an HTML document, including its title, and search engine information.
    18. The 〈Title〉 and 〈/Title〉 are place holders for the title of your document. When search engines look for matches,the title is one of the lines considered.
    19. Also inside the head tags, just below the ending title tag, is a link to the style file
    20. This web page is for a flower shop called Winchester Canyon Florists. Type this information between the title tags and save your document.
    21. Inside the Head tags we need to type in the code to load the Cascading Style Sheet File.
    22. 〈LINK REL = STYLESHEET TYPE ="text/css" HREF="style.css"〉
    23. Now we are going to put inside the body tags the name of our company. This text, unlike the text in the title shows on the web page.
    24. We want it to really stand out in large letters so we will use the Headline tag. There are three of them. Text in Headline 1 is the biggest, Headline 2 is in the middle and Headline 3 is the smallest headline.
    25. Let's use headline 2. Later in the style sheet file, we will specify color and font-family, background color.
    26. Let's also center the name of our company using the Center Tags.
    27. Save your file. Call it Home.html

    28. Now let's look at part of the style file.

    29. Remember this is a separate file with a .css extension.
    30. The file is also keyed into Notepad or Notepad++
    31. You may also put this file information on the clipboard and paste it into Notepador Notepad++
    32. Inside the body tags, a series of fonts have been specified. If the first font is not available on the users machine, then the second font will be used, etc.
    33. There is also a default font if none of the three are available.
    34. We will examine fonts in more detail later in the lesson.
    35. Save the file under a name you will recognize, like style.css. Remember the .css extension
    36. The file name must match the file in the link to it in the HTML document.
    37. We will be adding to both files as we go through the lesson.
    38. When the HTML file sees the tag, 〈body〉 , for example, it knows to make the background color of the HTML page a dimgray.
    39. All colors are made from the primary colors of red, green and blue.
    40. To represent red in hexdecimal the number is FF 00 00
    41. Green is 00 80 00
    42. Blue is 00 00 FF
    43. Secondary colors are made by mixing equal amounts of primary colors.
    44. Tertiary colors are made by mixing primary colors with secondary colors.
    45. Complementry colors are opposite each other on a color wheel.
    46. Let's look at some color schemes for our web page for a florist  Color schemes
    47. Here is how the colorspire web page works.
      • Choose a base color. A color that helps convey the appropriate mood for our florist shop.
      • With a color wheel it is easy to find colors that work with the base color.
      • Click on a color that you think will work with the base color
      • See the color scheme in the box to the right.
      • Write down the numbers of the colors for use in the web site,
      • Experiment with red, green and blue numbers to tweek the color.
      • Play with the hue setting to refine the color even more.
    48. Here is another list containing colors. Use can use the hexdecimal or the name of the color if you wish. Color Chart
    Day 2:

    Changes to the Style File

    1. Now lets modify your style file by changing the body background colors in the current file.
    2. Open up your existing style.css file in Notepad or Notepad++
    3. Change the background color to F1EBE4. This is a much lighter gray for the background of the body.
    4. Change the color of heading 2, 〈H2〉 to CF6FBC.
    5. Save the style file.
    6. Now let's see how the style file has formatted the Home.html file.
    7. If you are using Notepad++ it is very easy.
    8. With the Home.html file in memory, click on the tab for the Home.Html file. Click RUN on the menu bar and select :Launch in (IE),Internet Explorer to see how the color and headline appear.
    9. If you are using Notepad, save your file
    10. Minimize the Notepad application with the style file.
    11. Double click on Home.html to see your work.
    12. Let's add some more headlines to the the.html file.
    13. Load the file/files into Notepad or Notepad++ if it is not already in memory.
    14. Notepad++ allows multiple files to be loaded at the same time. Each file is accessed by clicking the tab with its name on it.
    15. We want to create an 〈H3〉 for our web page.
    16. The text should say, "Our Flowers Color Your World"
    17. Remember to put the beginning and ending tags around the text and center the text using the Center Tags, 〈Center〉 and 〈/Center〉.
    18. Add the following lines to the style file.
    19. The P is for paragraph formatting. Each time the HTML file see the 〈P〉 tag it will display the text that follows the tag in Arial font, 12 pixels in size the color will be navy, the font-style will be normal instead of Italic. The weight will be normal instead if bold and the text will be left aligned.
    20. When the HTML file sees the 〈H1〉 tag you can see properties that follow in the style file will be displayed in the HTML file
    21. The 〈H2〉 and 〈H3〉 tag will produce the characteristics that follow in the style file.
    22. the 〈A〉 is the is used to display, in red, links to other pages.
    23. Save the style file and run or launch the florist file to see how it looks.
    24. if you did it properly, the headline three will be centered and have the color specified in the style file.
    25. Save Home.html file and test.
    26. The coding of your Home.html file should look like this at this point.

    27. Now add the header and footer information to your style file
    28. Your style file should look like the one below at this point.
    29. We are going to use the 〈DIV〉 and 〈/DIV〉 ,beginniing and ending tags for the header and footer in the HTML file.
    30. In the style file we identify the properties to be used: background color, margins, width, height and padding.
    31. In the Home.html file we use 〈div id="header"〉 tag to begin the header

  • We will deal with the colors of links, Headline 1 and footer and header colors at a later time.

      Day 3:

      How to layout the page

    1. We need to look at how the page is laid out.
    2. Our main function is to present information on how to purchase these items and to showcase our flower and balloon arrangements.
    3. We should have a header that tells the customer the name of our company phone number and products carried.
    4. We need the body tag section to showcase our monthly specials on our flowers, balloons and gift baskets.
    5. We need a footer at the bottom of the page. We will use a picture for the footer.
    6. We need to open up the Home.html page if it is not open already.
    7. Key in the following tag 〈Strong〉 〈div id ="header"〉 〈/Strong〉 just after the the line about Our flowers coloring the world and the center and paragraph tag.
    8. Draw out a sketch on how our page should look. Below is a drawing that represents this.

    9. You see the header on top. It tells the customer the name of the company, phone number and that they sell flowers, balloons and gifts.
    10. Check out the properties for the header. The border is a dotted line in red
    11. The navigation bar helps the user to navigate to other pages on our site.
    12. The body will contain monthly specials on flower arrangements, balloons, and gift baskets.
    13. The footer is an image of a balloon repeated several times.
    14. Make the style file look like the one below. You will notice that we added two lines telling the HTML file how to format ordered and unordered lists. -->
      • px stands for pixels
      • The style elements for a border around the body and the color the border black.
      • Make your file match the one just above this text.
      • Your Home.html file should look like the one below.
      • We have made a division called header. Here we can customize how the header looks. It does not have to have the same properties as the entire page.
      • The style.css file contains the properties we wish to have displayed in the Home.html file.

      The Home.html File

      1. To organize the way the text is displayed, we created a table inside the division tag.
      2. Tables are an excellent way to organize information on a web page. We start first with the 〈Table〉 tag.
      3. Next we layout how the table should look. We do want a border of 3 pixels for this table so we set the border equal to 3.
      4. We want some space between the sides of a cell and its contents. That property is called cellpadding. We set it equal to 5
      5. The next table property sets the amount of space in pixels between the frame of the table and the cells in the table, as well as the space between the cells themselves. This is called Cellspacing.
      6. Next we tell the browser that we want to create a table row, 〈TR〉
      7. Next we begin with the tag that tells the browser we want to make a table data cell, 〈TD〉
      8. Now type in the information we want to appear in the first cell: the phone number of the florist. Notice that inside the table cell is the formatting command to have the text appear as headline 2.
      9. Now turn off the headline 2 tag with the headline two ending tag and ending table data tag.
      10. Type〈TD〉 〈H2〉We offer same day delivery 〈/H2〉 〈/TD〉
      11. Type〈TD〉 〈H2〉Flowers- Balloons- Gifts 〈/H2〉 〈/TD〉
      12. Turn off centering with the 〈/Center〉 tag
      13. Now key in the ending 〈TR/〉 table row tag.
      14. Now key in the ending table tag, 〈/Table〉.
      15. Now we end the division tag with 〈/Div〉.
    Day 4:

    Navigation Bar and Main Part of the Body

    1. Here is where we put the navigation bar and the part of the page that showcases our products.
    2. We will use a 6 column table here and incorporate the navigation bar as part of it
    3. First create the table with the table tag〈Table Border=3 Cellpadding =3 cellspacing=3 〉
    4. Table row tag 〈TR〉 is next
    5. Look at the illustration below for the Home.html code.
    6. Add these lines to your Home web page just after the ending division tag.
    7. Save the file and test it to see that the navigation bar looks right.
    8. The links to these pages is in red.
    9. If you check the style.css page you can see that the links are supposed to be in Red. Change this color if you wish.
    10. When you click on the links you will not get to that page until that page is created, We only created the the begining of the Flower Facts page in this lesson.

    1. We now need to put pictures of the products in the table data cells.
    2. The first row contains flowers, the second balloons and third gift baskets.
    3. File names are flower1.jpg, flower2.jpg, etc
    4. File name for balloons are balloon1.jpg, balloon2.jpg, etc
    5. File names for gift baskets are gift1.jpg, gift.jpg, etc.
    6. Each cell in the table contains a separate picture.
    7. Make your Home.html file look like the one listed below.
    8. The Alt tag is what is seen after the user passes the cursor over the picture.
    9. We will make a link to flower1 with more information about that product.
    10. Notice that the tags for flower one are different from all of the others.
    11. We have made a link to a page called flowers1.Html. There we will have a information about this monthly special as well as its price and info about it.
    12. We could ,of course, and probably would make links to all items featured on this page, but that is not the objective of the lesson.

    1. Now it is time to put in a footer at the bottom of our page.
    2. We will use a picture of some balloons as our footer.
    3. In the footer section of the style file, make the section look like the 8 lines below.
      • #footer{
      • margin: 0 auto;
      • width: 775px;
      • height: 75px;
      • background: url(balloons.jpg);
      • background: repeat-x;
      • padding: 0 20px;
      • }
    4. In the Home.html file after the ending table tag,〈/Table〉, put in the following tags.
      • 〈div id="footer"〉
      • 〈/div〉
      • Your files should look like the examples below.

        The Home.html file

        The style.css file

    Day 5:

    Fonts, Testing and Debugging the Files

    1. Fonts can vastly change the looks of a web page. Today we will experiment with different fonts.
    2. Fonts have a number of properties: font-family, font-size, font-style,font-weight and color.
    3. If you examine the style.css file carefully you can see that all of these properties are addressed.
    4. Sans-serif fonts have straight edges and do not have decorative elements. They are easier to read.
    5. Examples of Sans-serif fonts include Time New Roman, Georgia, Garamond and Bookman.
    6. Serif fonts have decorative elements like tails curlicues at the edges of the letters.
    7. Examples of these include Verdana, Arial, Tahoma and Trebucht MS.
    8. Mono space fonts have letters that are all the same size and width. Progammers use these.
    9. Font size can be measured in Pixels, px:. For example, 12px is larger than 8px.
    10. Font size can be calculated with the point measurement, pt:
    11. Font size can also be calculated as a percentage, 50% is equal to 8 pixels. 100% equals 16 pixels.
    12. Change the fonts in the style file to the following
    13. Leave the ordered and unordered properties the same.
    14. Change the body color to f0f8ff
    15. Change border size of the body to 4
    16. Change the color of the body border from black to 8a2be2
    17. Change the border style of the header to solid instead of dotted and make it 3 pixels instead of 1
    18. Change the Link color to blue instead of red.
    19. Save your file, make sure that you use the .css extension
    20. Show your instructor the changes.

    Tag

    Font-family

    Font-size

    Color

    font-style

    font-weight

    BodyGeorgia8 px8a2be2NormalBold
    〈P〉Garamond18pxa52a2aitalicNormal
    〈H1〉Comic Sans24 pxf592a0normalBold
    〈H2〉Times New Roman20 pxf592a0normalBold
    〈H3〉Arial15 pxf592a0NormalBold

    Cascading Style Sheets Week 2


    Printer Friendly Version Week 2

    Day 1:

    Flower Facts.Html Page

    1. Layout the page - Day 1
    2. See Drawing below for layout options
    3. We want to make a page that has facts about flowers
    4. We want to put the title on the page
    5. You can use the example below for layout purposes or design your own.
      • We want the layout to include the header.
      • The navigation bar.
      • A table header called Birth Month flowers.
      • A table with all twelve months of the year
      • We will put two months per row separated by a blank table data cell, ie January and February; March and April, etc
      • Each row will contain the month and holidays in that month, facts about the month's flower and a picture of the birth month flower.
      • After the birth month flower table, we have a ordered list of flower facts
      • The end of the page, like the previous Home page, includes the footer composed of a series of balloon pictures.

    6. Our style file will not change at this point, so we are going to concentrate on the HTML file.
    7. On the first day of this week create the Html file for flower facts. Call the file Facts.html
    8. Your Html file should look similar to the one below.
    9. The goal on day two is to Link the html file to the style file.
    10. Make certain to match the css file name with the one on your Html page.

    Day 2:

    1. Today we will put in the header and navigation bar.
    2. The example below gives an example what this might look like in the Html file

    3. Make certain that the links to the other page works. Remember we called the file Home.html.
    4. We have not created any of the other pages, so those links are not expected to work yet.

    Day 3:
    1. Today we will create a table with birthmonth flowers: name of Month, flower, flower facts and a picture.
    2. We will work on January through June.
    3. There is a table header at the top of our table 〈TH〉 that spans 8 columns and the text is justified.
    4. Each table data cell is a different color: One for the month, one for the facts and one for the picture of the flower.
    5. The color arrangement was chosen to make each month more distinguishable.
    6. There is also a blank table data cell between each month to make it more readable.
    7. Change the colors if you wish, however, remember the color scheme for the web pages.
    8. See below for this part of the assignment. You may research the flower facts and change that information if you wish, The holidays are in an unordered list. See the style file as to how these lists will be formatted.
    9. You will notice that each month has Html tags around it, 〈!-Month--〉
    10. These tags are ignored by the browser. They are notes to the programmer as to what is to follow.
    11. These remark tags are helpful in many situations
    12. You can block off certain sections temporarily to see how your code executes.

    Day 4:

    1. Today we will complete the birth month table - July to December.

    Day 5:

    Printer Friendly Version Week 3

    1. On day five of week two we will finish the facts page completing a table of interesting flower facts and the footer.
    2. We will also conclude the page with the ending HTML tags for the body and end of document.
    3. Look below for the last part of this flower facts web page.