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

2. Administration stuff Project report 4 grade is up Report 5 due 4/15 Final presentation on 4/21 Put everything on the Team web space

3. 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!

4. 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

5. 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

6. 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; }

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

8. CSS Selectors http://www.w3schools.com/cssref/css_selecto rs.asp http://www.w3schools.com/cssref/css_selecto rs.asp

9. A Simple Example https://my.up.ist.psu.edu/zul17/website/main.php IST2109 main.php project.php styles.css

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

11. Run the Sample Code: Step 2 Change the following variable values in the authentication.php file $databaseName $sqlusername $sqlpassword 11IST210 Visit http://my.up.ist.psu.edu/yourPSUID/website/main.php http://my.up.ist.psu.edu/yourPSUID/website/main.php

12. 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

13. 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

14. A Big Picture Model-view-controller architecture (Design) – Extremely popular for web/mobile application PHP Database CSS

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

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

17. 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