Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

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 Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
Today CSS HTML A project.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Creating Special Effects with CSS
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.
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.
Tutorial 4 Creating Special Effects with CSS
MORE Cascading Style Sheets (The Positioning Model)
4.01 Cascading Style Sheets
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.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
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.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
New Perspectives on XML, 2nd Edition Tutorial 5 1 TUTORIAL 5 WORKING WITH CASCADING STYLE SHEETS.
XP New Perspectives on XML Tutorial 5 1 TUTORIAL 5 CSS Tutorial – Carey ISBN
CSS Introduction Cascading Style Sheets Provides a great deal of control over the presentation of the document HTML indicates both semantics of a document.
Tutorial 4 Creating Special Effects with CSS
CSS Positioning Creating Special Effects with CSS CS202 Working with Cascading Style Sheets (Chapter 4) CS202 1.
1 Cascading Style Sheets (CSS) Part 2. 2 The Sources of Style Sheets.
Tutorial 3 Working with Cascading Style Sheets (CSS)
Cascading Style Sheets by Pavlovic Nenad by. Presentation Contents  What is CSS?  Why CSS?  Types of Style Sheets  Style Sheets Syntax  Box Formatting.
CSS Netcentric. What is CSS O CSS stands for Cascading Style Sheets O Styles define how to display HTML elements O Styles were added to HTML 4.0 to solve.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 7.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
MySQL and PHP Review CSS. Cascading Style Sheet (CSS) Style sheets are files or forms that describe the layout and appearance of a document. Cascading.
Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition.
 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.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
Introduction to CSS September 20, Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation CSS guide and tutorial.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Positioning and Printing Creating Special Effects with CSS.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.
Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
Maureen Smith Professor Tutorial 4.  Review  Session 4.1  Session 4.2  Session 4.3  Review.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 6.
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.
HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /16.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 8.
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.
CSS.
Working with Cascading Style Sheets
Cascading Style Sheets
Web Systems & Technologies
Tutorial 3 Working with Cascading Style Sheets
Tutorial 4 Creating Special Effects with CSS
Presentation transcript:

Working with Cascading Style Sheets

2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style Sheet Understanding Cascading Order Working with Selectors

3 Objectives Using IDs and Classes Sizing Elements Floating an Element Working with the div Element Setting the Display Style Working with the Box Model Using Pseudo-Classes and Pseudo- Elements Applying a Style to a Web Site

4 Objectives Positioning Objects with CSS Working with Overflow and Clipping Stacking Elements Working with Different Media Hiding Elements Using Print Styles

5 Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document Cascading Style Sheets, or CSS, is a style sheet language used on the Web –CSS specifications are maintained by the World Wide Web Consortium (W3C) –Three versions of CSS exist: CSS1, CSS2, and CSS3

6 Cascading Style Sheets CSS1 introduced styles for the following document features: –Fonts –Text –Color –Backgrounds –Block-level Elements

7 Cascading Style Sheets CSS2 introduced styles for the following document features: –Positioning –Visual Formatting –Media Types –Interfaces

8 Cascading Style Sheets CSS3 (which is still in development) will introduce styles for the following document features: –User Interfaces –Accessibility –Columnar layout –International Features –Mobile Devices –Scalable Vector Graphics

9 Applying a Style Sheet Three ways to apply a style to an HTML or XHTML document: –Inline Styles –Embedded Styles –External Styles

10 Using Inline Styles Inline styles are easy to use and interpret because they are applied directly to the elements they affect. <element style=“style1: value1; style2: value2; style3: value3;…”>

11 Using Embedded Styles You can embed style definitions in a document head using the following form: style declarations Where style declarations are the declarations of the different styles to be applied to the document

12 Using an External Style Sheet Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site An external style sheet is a text file that contains style declarations –It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

13 Using an External Style Sheet You can add style comments as you develop an external style sheet Use the link element to link a Web page to an external style sheet You can import the content of one style sheet into another

14 Understanding Cascading Order You can link a single style sheet to multiple documents in your Web site by using the link element or element You can also link a single document to several style sheets

15 Style Precedence 1.External style sheet 2.Embedded styles 3.Inline styles

16 Style Inheritance If a style is not specified for an element, it inherits the style of its parent element; This is called style inheritance.

17 Working with Selectors CSS allows you to work with a wide variety of selectors to match different combinations of elements Use contextual selectors to apply a style based on the context in which an element is used

18 Simple and contextual selectors

19 Attribute Selectors Create an attribute selector to select an element based on the element’s attributes –See the textbook for a list of attribute selectors

20 Using IDs and Classes Use an id to distinguish something, like a paragraph, from the others in a document –For example, to identify a paragraph as “head”, use the code : …

21 Classes HTML and XHTML require each id be unique– therefore an id value can only be used once in a document You can mark a group of elements with a common identifier using the class attribute …

22 Applying a style to a class

23 Applying a style to a class and element

24 Sizing Elements and Floating an Element You can define the width of columns in a columnar layout using: width: value You can use CSS to set an element’s height using: height: value You can float a paragraph using: float: position

25 Working with the div Element The div element is a generic block-level element content

26 Setting the Display Style Values of the display style

27 Setting the Display Style Values of the display style

28 Working with the Box Model The box model is an element composed of four sections: –Margin –Border –Padding –content

29 The Box Model

30 Working with the Box Model Styles to set padding are similar to styles to set margins: –padding-top: value –padding-right: value –padding-bottom: value –padding-left: value

31 Border Styles

32 Border Style Types

33 Using Pseudo-Classes and Pseudo-Elements A pseudo-class is a classification of an element based on its status, position, or current use in the document

34 Using Pseudo-Classes and Pseudo-Elements Rollover effects can be created using pseudo- classes Pseudo-elements are elements based on information about an element’s content, use or position

35 Positioning Objects with CSS The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value;

36 Working with Overflow and Clipping The overflow property syntax: overflow: type

37 Stacking Elements Specify stacking order with: z-index: value z-index: 3 z-index: 1 z-index: 2

38 Working with Different Media Specify output styles for particular devices in the media attribute of the link and style elements

39 Rule You can also specify the output media within a style sheet type {style declarations} Where media is one of the supported media types and style declarations are the styles associated with that media type

40 Media Groups CSS2 uses media groups to describe basic facets of different media– and to differentiate between different types of media based on the ways they render content –Continuous or paged –Visual, aural, or tactile –Grid (for character grid devices) or bitmap –Interactive or static

41 Media Groups

42 Hiding Elements Two different styles that allow you to hide elements: –Display style –Visibility style

43 Comparing the visibility and display styles Visibility hidden Object is hidden but still is part of the page flow Display: none Object is hidden and is removed from the page flow

44 Using Print Styles You can specify the size of a page, margins, internal padding, etc. of the page box Review the Reference Window on page HTML 420 for working with print styles