1. Creating Tables in a Web Site Using an External Style Sheet
HTML5 & CSS 7th Edition
Creating Tables in a Web Site Using an External Style Sheet

2. Chapter Objectives Define table elements
Describe the steps used to plan, design, and code a table
Create a borderless table for a horizontal navigation bar with text links
Create an external style sheet to define styles across a Web site
Utilize classes to give you more control over styles
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

3. Chapter Objectives
Link an external style sheet to Web pages where you want its styles applied
Create a table with borders and insert text
Use the box-shadow property to alter the appearance of an image
Alter the spacing between and within cells using the border spacing and padding properties
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

4. Chapter Objectives
Utilize inline styles to alter the style of individual elements on a Web page
Add background color to rows and cells
Insert a caption below a table
Create headings that span rows using the rowspan attribute
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

5. Plan Ahead Complete Web page planning
Analyze the content and organization of the Web page
Choose the content and organization for the Web page
Identify how to format various elements of the Web page
Determine where to save the Web page
Create the Web page and links
Test all Web pages within the Web site
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

6. Obtain all Materials Ensure you have all files for use in Ch. 4
Dining.gif
Dining.html
Golf.gif
Home.gif
Oceansidelogo.jpeg
Tennis.gif
Tennis.html
Open Notepad++ (ensure Word-wrap is enabled)
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

7. Entering Initial HTML Tags to Define the Web Page Structure
Enter the HTML code shown in Table 4-3 pg. HTML 169.
Save file as Oceanside.html
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

8. Using the Box-Shadow Property
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

9. Using the Box-Shadow Property
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

10. Inserting, Centering, and Styling an Image with a Box-Shadow
Use Table 4-5 to enter in Box-Shadow code
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

11. Example of Positive Box-Shadow
<div style="text-align: center">
<img src="oceansidelogo.jpg" width="866" height="259" alt="Oceanside logo" style="box-shadow: 10px 10px 12px #888888" />
</div>
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

12. Creating a Horizontal Menu Bar with Image Links- Table 4.6
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

13. Creating an External Style Sheet
Create a new file in Notepad++ to create the style sheet.
Use Table 4-8, pg. HTML 182 to create the code for the style sheet
When you save the style sheet after entering the styles, the file name extension should be:
stylesch4.css
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

14. Creating an External Style Sheet
Five main elements in a web page that are defined in an external style sheet:
body
paragraphs
links
images
tables
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

15. Validating an External Style Sheet
Visit to validate your .css file
Select “Validate by File Upload” tab and select file
Correct any errors found
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

16. Linking to an External Style Sheet
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

17. Table Properties Tags used to create tables
Further describes how the table will be positioned and where the caption will be placed
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

18. Creating a Table with Borders and Inserting Text
Use Table 4-9 to create the “golf.html” page
If using the same html coding and horizontal information as the oceanside.html page, simply copy and paste the code into a new file and save as “golf.html”
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

19. Adding Border Spacing, Padding, and Row Color to a Table
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

20. Creating a Table with Borders and Text
Open tennis.html file and add a new table style on line 30:
<table style="border-spacing: 5px; padding: 5px">
Add a table row stripe on line 37 and 39:
<tr class="stripe">
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

21. Adding a Table Caption
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

22. Creating the Headings that Span Rows
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

23. Adding the Bolder Class to Data Cells
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

24. Chapter Summary Define table elements
Describe the steps used to plan, design, and code a table
Create a borderless table for a horizontal navigation bar with text links
Create an external style sheet to define styles across a Web site
Utilize classes to give you more control over styles
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

25. Chapter Summary
Link an external style sheet to Web pages where you want its styles applied
Create a table with borders and insert text
Use the box-shadow property to alter the appearance of an image
Alter the spacing between and within cells using the border spacing and padding properties
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

26. Chapter Summary
Utilize inline styles to alter the style of individual elements on a Web page
Add background color to rows and cells
Insert a caption below a table
Create headings that span rows using the rowspan attribute
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

27. HTML 7th Edition
Chapter 4 Complete