LBSC 690: Session 6 CSS, XML/XSLT Jimmy Lin College of Information Studies University of Maryland Monday, October 15, 2007.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
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.
Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.
INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Thursday, September 13, 2012 Session 2: HTML and.
ICS-FORTH 1 May 22, 2001 Christos Georgis The extensible markup language: An introduction to XML What is a XML document ? How do we check its validity.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
1 Creating Web Pages Part 3. 2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML.
LBSC 690 Session #6 CSS, XML/XSLT Jimmy Lin The iSchool University of Maryland Wednesday, October 8, 2008 This work is licensed under a Creative Commons.
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Technologies for web publishing Ing. Václav Freylich Lecture 5.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.
INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, February 5, 2014 Session 2: HTML and.
I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.
Doing It With Style Style Sheets: Separating Form from Function.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
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)
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
CEAL 2003 XML for CJK Wooseob Jeong School of Information Studies University of Wisconsin - Milwaukee.
Web Development 101 Presented by John Valance
October 21, Learn about Cascading Style Sheets LACUNY Web Management Roundtable October 21, 2005
Cascading Style Sheets
Cascading Style Sheets CSS. Source W3Schools
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
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.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Intro to CSS Christy. What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control.
CSS Syntax. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value}
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 6.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
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.
Rendering XML Documents ©NIITeXtensible Markup Language/Lesson 5/Slide 1 of 46 Objectives In this session, you will learn to: * Define rendering * Identify.
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…
CSS Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.
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.
S.MD.FAROOQ M.Tech., [Ph.D] Assistant Professor Department of CSE Santhiram Engineering College.
1 Cascading Style Sheets
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Cascading Style Sheets
CSS Cascading Style Sheets
Introduction to web design discussing which languages is used for website designing
Website Design 3
Cascading Style Sheets - Building a stylesheet
Software Engineering for Internet Applications
What are Cascading Stylesheets (CSS)?
Web Design and Development
Cascading Style Sheets - Building a stylesheet
Presentation transcript:

LBSC 690: Session 6 CSS, XML/XSLT Jimmy Lin College of Information Studies University of Maryland Monday, October 15, 2007

What’s a Document? Content Structure Appearance Behavior

CSS Separating content and structure from appearance Rules for defining styles “cascade” from broad to narrow: Browser default External style sheet Internal style sheet Inline style

Basics of CSS Basic syntax: Example: Causes Font to be center-aligned Font to be Arial and black selector {property: value} HTML tag you want to modify… The property you want to change… The value you want the property to take p { text-align: center; color: black; font-family: arial }

Different Ways for Using CSS Inline style: Causes only the tag to have the desired properties Internal stylesheet: Causes all tags to have the desired properties … p { font-family:arial; color:blue} …

Customizing Classes Ability to define customized styles for standard HTML tags: … p.style1 { font-family:arial; color:blue} p.style2 { font-family:serif; color:red} …

External Style Sheets Store formatting metadata in a separate file … … p.style1 { font-family:arial; color:blue} p.style2 { font-family:serif; color:red} mystyle.css

Why Use CSS? What are the advantages of CSS? Why have three separate ways of using styles?

XML and XSLT XML document: contains the content DTD (Document Type Definition): defines a well- formed XML document XSLT (eXtensible Stylesheet Language Transformations): language for converting one XML document into another