A Simple Website using Cascading Style Sheets (CSS) IST2101

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

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!

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

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

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

How to Understand CSS files main.php styles.css

CSS Selectors rs.asp rs.asp

A Simple Example IST2109 main.php project.php styles.css

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

Run the Sample Code: Step 2 Change the following variable values in the authentication.php file $databaseName $sqlusername $sqlpassword 11IST210 Visit

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

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

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

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

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

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