Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

1 Cascading Style Sheets™ (CSS) Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style.
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Today CSS HTML A project.
Lecture 5 Use Cases and Style Sheets
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
AD Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Cascading Style Sheets.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
Cascading Style Sheets Controlling the Display Of Web Content.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Cascading Style Sheets Controlling the Display Of Web Content.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 09: Cascade Style Sheets - Spring 2011.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
Website Development & Management Working with Style Rules Instructor: John Seydel, Ph.D. CIT Fall
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition.
ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
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.
Introduction to CSS September 20, Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation CSS guide and tutorial.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
CSS: Cascading Style Sheets Part II. Style Syntax.
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
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.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, Third Edition.
HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /16.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
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 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.
Internet & World Wide Web How to Program, 5/e 1. 2.
Working with Cascading Style Sheets
Chapter 6 - Cascading Style Sheets™ (CSS)
Cascading Style Sheets™ (CSS)
CSS: Cascading Style Sheets
Cascading Style Sheets
Chapter 6 Cascading Style Sheets™ (CSS)
IS 360 Declaring CSS Styles
CX Introduction to Web Programming
Using Cascading Style Sheets Module B: CSS Structure
Intro to CSS CS 1150 Fall 2016.
Cascading Style Sheets
Intro to CSS CS 1150 Spring 2017.
Styles and the Box Model
Chapter 6 Introducing Cascading Style Sheets
Cascading Style Sheets™ (CSS)
Presentation transcript:

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets

Objectives Topics covered: – using a style sheet to give all the pages of a Web site the same look and feel. – style sheet types and cascade precedence – CSS syntax for assigning style properties – Class selector and using the class attribute to apply styles. – using style sheets to separate presentation from content.

Introduction Cascading Style Sheets (CSS) – Separation of structure from presentation – Relationship between the style formatting and the structure/content is no longer 1:1 multiple style sheets can be applied to the same Web page Same style sheet can be applied to the multiple Web page

Multiple Levels of Style Definition Cascade Precedence: resolves conflicting style rules – Inline style sheets – Embedded sheets – External style sheets Author vs. User

Inline Styles style information is directly attached to the HTML elements they affect higher cascade precedence than the other specification methods declaring an individual element’s format: – Attribute style – CSS (style) property Followed by a colon and a value

Outline inline.html (1 of 2)

Outline

Embedded Style Sheets this method can only specify style information for the current document: – 1:1 relationship – However, the same document may have other style definitions applied to it 1:M relationship embedded style sheet rule will have higher precedence than external style sheet rule, if there is a conflict between styles embedded style sheet rule will have lower precedence than an inline style sheet rule

Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head section inside a style element – Attribute type Multipurpose Internet Mail Extensions (MIME) type – describes the type of the document’s content – text/css is the type for CSS document – Style properties are defined for: Existing defined elements, such as p (paragraph), h3 (header), li (Iist) or any other Style class that can be applied to either: – Any existing type of element in the body of the document or – One specific element in the document

CSS Syntax for Assigning Style Properties – The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} – A selector can be: the HTML element/tag you wish to define. In this example: – body {color: black}, element body is the selector The class selector, which can be tied to a specific element, such as: – p.right {text-align: right} The class selector applicable to any element, such as: –.loud {font-family: fantasy; font-size: xx-large} – If a class selector is used, it has to be invoked in the body of the XHTML document: – or –

CSS Syntax for Assigning Style Properties: additional issues – Group selectors are possible for a group of HTML elements. For example: – h1,h2,h3,h4,h5,h6 {color: green} will make all header elements text green – When a class selector is defined for a particular element, it can not be invoked on other elements. Using example from the previous slide which of these uses of class styles in the XHTML document is correct? – – Pseudo-class selectors define the style for the parts of a document based on some characteristics other than tag name, attributes or content. They may be defined by a user action such as: – Mouseover ( hover pseudoclass) – Clicking ( active pseudoclass)

CSS syntax: continue Invoking a style class to a block of text not defined by a particular element – span element – div element (block level element)

Style Inheritance and Conflict Resolution Inheritance – An element that is present within another element (child) inherits all style properties from its “parent” element – However, if such child (or descendant) element has properties that conflict with defined properties of its parent element, conflict is resolved in favors of properties of a child element Child element properties have greater specificity than ancestor’s properties

Outline declared.html (1 of 3)  Style Class selector: applicable to any element in this document

Outline declared.html (2 of 3)  Style Class “special” invoked for p element  Style Class “special” invoked for h1 element

Outline  color Conflict resolution between parent element p and child element em

Outline advance.html (1 of 3)  Style Class: applicable only to element a in this document  Pseudoclass: applicable only to element a in this document. (note different syntax)  This is NOT a group selector. It declares that this specific style is applicable to em elements inside an li element

Outline advance.html (2 of 3)

Outline

External Style Sheets External style sheets – Applicable to more than document – Documents can have more than one source for style specification M:M relationship Can provide uniform look and feel to entire site Same CSS syntax rules for assigning and invoking style properties apply

External Style Sheets Location ( href ) and type ( type ) of the external style sheet are specified as attributes of a link element in the head portion of an XHTML document In addition, the rel attribute specifies the nature of the relationship between the stylesheet and the document that is referencing it – Persistent stylesheets must be applied to the document – Preferred style sheet should be applied the unless the user has selected a different alternate – Alternate style sheets may be selected by users depending on their preferences

Linking External Style Sheets – To make a style sheet persistent, set the rel attribute to "stylesheet". – To make a style sheet preferred, set the re l attribute to "stylesheet" and name the style sheet with the additional title attribute. – To specify an alternate style sheet, set the rel attribute to "alternate stylesheet" and name the style sheet with the title attribute.

Outline styles.css (1 of 1)

Outline external.html (1 of 2)

Outline

W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct

6.10 Text Flow and the Box Model Floating – Move an element to one side of the screen Box model – Margins – Padding – Border

Outline floating.html (1 of 3)

Outline floating.html (2 of 3)

Outline

Text Flow and the Box Model

Outline borders.html (1 of 2)

Outline borders.html (2 of 2)

User Style Sheets Format pages based on user preferences User style sheets are not linked in the document – They are set in browser's options

Outline User_absolute.html (1 of 2)

Outline

User Style Sheets Fig. 6.18User style sheet in Internet Explorer 6.

User Style Sheets

Outline User_relative.html (1 of 2)

Outline

User Style Sheets Fig. 6.21User style sheet applied with em measurement.