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

2. A Simple Example https://my.up.ist.psu.edu/zul17/website/main.php IST2102 main.php project.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 Change the following variable values in the authentication.php file $databaseName $sqlusername $sqlpassword 4IST210 Visit http://my.up.ist.psu.edu/yourPSUID/website/main.php http://my.up.ist.psu.edu/yourPSUID/website/main.php

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

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

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

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

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

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

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

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. A Separate File for the Navigation Bar navbar.php IST21013 Create your navbar using CSS: Here, “haut” and “menuhaut” are CSS id/class selectors specified in styles.css

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

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