1. A Simple Website using Cascading Style Sheets (CSS) IST2101

2. A Simple Example http://my.up.ist.psu.edu/zuz22/website/main.php IST2102 main.php owner.php styles.css

3. Run the Sample Code: Step 1 Download website.zip from course website Unzip it, copy and paste the website folder to your webspace 3IST210

4. Run the Sample Code: Step 2 Make sure you have the following two tables in your database – OWNER – PROPERTY If not, you need to download and execute Assign-3-Create-Tables.sql from ANGEL- >Lessons->Solutions->Homework Assignment 3 Solution

5. Run the Sample Code: Step 3 Add your database information in the authentication.inc file 5IST210 Input your own information Visit http://my.up.ist.psu.edu/yourPSUID/website/main.php http://my.up.ist.psu.edu/yourPSUID/website/main.php

6. What’s New Here? A CSS file styles.css to define the look and formatting of your website – Make your website look much nicer! A separate navbar.php file to create a standard navigation bar for all the webpages – Included in almost all the webpages – Save a lot of work!

7. What is Cascading Style Sheets (CSS)? A set of rules for displaying markup content Styles Sheet: – Contains a series of rules. These rules tell HTML how to display Cascading: – Display rules “cascade” down – The most specific rule is used

8. Why Using CSS? Separate the content (HTML) from layout and design (CSS) More flexible and advanced formatting Greater consistency in your website Easily modified code Greater functionality

9. Attaching a CSS to your webpage You can attach a style sheet to a page by adding the code to the section of the HTML page. main.php

10. CSS Rule Structure A CSS rule is made up of a selector and several declarations. A declaration consists of property and value: – A selector is often an element of HTML. – Properties and values tell an HTML element how to display. selector{ property: value; …… } body{ background: purple; font-size:0.75em; }

11. CSS Selectors http://www.w3schools.com/css/css_selectors. asp http://www.w3schools.com/css/css_selectors. asp

12. How to Understand CSS files main.php styles.css

13. Tips on using CSS in your project Google “CSS templates” to find the template that suits your website design – A basic template is often sufficient for many websites – Over-complicated ones often cause more troubles You do not need to know how to create a.css file (or modify it substantially) – If the current.css file does not fits your need, find another one online – But you need to understand the content in an existing.css file in order to use it

14. A Separate File for the Navigation Bar navbar.php IST21014 Create your navbar using CSS: Here, “haut” and “menuhaut” are CSS id/class selectors specified in styles.css

15. Using navbar.php main.php This is very similar to including the authentication file in the login example: IST21015

16. Using navbar.php include and require are identical, except upon failure: require will produce a fatal error (E_COMPILE_ERROR) and stop the script include will only produce a warning (E_WARNING) and the script will continue