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

Slides:



Advertisements
Similar presentations
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
Cascading Style Sheets
Cascading Style Sheets
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Project 8 Creating Style Sheets.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
Chapter 8 Creating Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
4.01 Cascading Style Sheets
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Technologies for web publishing Ing. Václav Freylich Lecture 5.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
Julien Thibault  HTML is the basic building-blocks of webpages  It is not a language!! (despite its name)  Structure text/media.
HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Robert Vitolo CS430.  CSS (Cascading Style Sheets)  Purpose: To provide a consistent look and feel for a set of web pages To make it easy to update.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
CHAPTER 3 Working with Templates and Styles. CHAPTER OBJECTIVES  Create an Expression Web site from a template  Rename a page  Rename a folder  Add.
Website Development with Dreamweaver
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
CSS Basic (cascading style sheets)
Cascading Style Sheets. What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed.
Creating Webpage Using HTML
Copyright © Eric Liria Web Site Builder This application allows you to build and manage web sites. It provides the following functionnalities: use.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
HTML & CSS BasicsHTMLCSSQuizAnswers  The logo In this website(made of html and css Codes), you will learn some basics of How to use HTML and CSS codes.
A Simple Website using Cascading Style Sheets (CSS) IST2101.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
Database Access Control IST2101. Why Implementing User Authentication? Remove a lot of redundancies in duplicate inputs of database information – Your.
 Look especially at › File Tips and Shortcuts › Student video.
CHAPTER 4 CREATING STYLES AND LAYOUTS WITH CSS. CHAPTER OBJECTIVES Create ID-based styles Position content with CSS Format text with CSS Identify CSS.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
DATABASE ACCESS CONTROL IST Question Almost every PHP page needs to interact with database, does that mean sqlUsername and sqlPassword need to be.
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
A Simple Website using Cascading Style Sheets (CSS) IST2101.
CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Getting Started with CSS
CSS HTML and website development.
>> Introduction to CSS
HTML and Website Development
Cascading Style Sheets (CSS)
Introduction to web design discussing which languages is used for website designing
CASCADING STYLE SHEET CSS.
Website Design 3
CIS 273 Possible Is Everything/snaptutorial.com
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Presentation transcript:

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