 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.

Slides:

Advertisements

Similar presentations

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.

Advertisements

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

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.

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Objectives –To take control of the appearance of a Web site by.

1 Dynamic HTML: Cascading Style Sheets™ (CSS). 2 Introduction Cascading Style Sheets (CSS) –Specify the style of your page elements –Spacing, margins,

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2

Tutorial 4: Creating page layout with css

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.

Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.

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

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

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 –

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 CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.

Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.

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.

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 14 – Dynamic HTML: Cascading Style Sheets (CSS) Outline 14.1Introduction 14.2Inline Styles.

CSS Dvijesh Bhatt.

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. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:

Tutorial 3 Working with Cascading Style Sheets (CSS)

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.

>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.

 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) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.

CHAPTER 2 CSS (Cascading Style Sheet). Topics Introduction Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets Positioning.

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

Introduction to CSS September 20, Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation CSS guide and tutorial.

1 Introduction to Web Application Introduction to Cascading Style Sheet.

1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.

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.

5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.

Tutorial 4 Creating Page Layouts with CSS

Cascading Style Sheets (CSS)

CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.

CSS Box Model. What is the Box Model? Each XHTML element appearing on our page takes up a "box" or "container" of space. Each box size is affected not.

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.

Instructor: Sergey Goldman Based on Based on Internet & World Wide Web How To Program Multiple Editions.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

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.

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)

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.

Chapter 6 - Cascading Style Sheets™ (CSS)

Cascading Style Sheets™ (CSS)

CSS: Cascading Style Sheets

Chapter 6 Cascading Style Sheets™ (CSS)

CX Introduction to Web Programming

Cascading Style Sheets™ (CSS)

Presentation transcript:

 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 Sheets 6.4 Conflicting Styles 6.5 Linking External Style Sheets 6.6W3C CSS Validation Service 6.7 Positioning Elements 6.8 Backgrounds 6.9 Element Dimensions 6.10 Text Flow and the Box Model 6.11 User Style Sheets 6.12 Web Resources

 2003 Prentice Hall, Inc. All rights reserved. Objectives In this lesson, you will learn: –To control the appearance of a Web site by creating style sheets. –To use a style sheet to give all the pages of a Web site the same look and feel. –To use the class attribute to apply styles. –To specify the precise font, size, color and other properties of displayed text. –To specify element backgrounds and colors. –To understand the box model and how to control the margins, borders and padding. –To use style sheets to separate presentation from content.

 2003 Prentice Hall, Inc. All rights reserved. 6.1 Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation

 2003 Prentice Hall, Inc. All rights reserved. 6.2 Inline Styles Declare an individual element’s format –Attribute style –CSS property Followed by a colon and a value

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline inline.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline inline.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved. 6.3 Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head section –Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content –Property background-color Specifies the background color –Property font-family Specifies the name of the font to use –Property font-size Specifies a font size (e.g., 14-point font)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (1 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (2 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (3 of 3)

 2003 Prentice Hall, Inc. All rights reserved. 6.4 Conflicting Styles Inheritance –Descendant’s properties have greater specificity than ancestor’s properties

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (1 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (2 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (3 of 3)

 2003 Prentice Hall, Inc. All rights reserved. 6.5 Linking External Style Sheets External style sheets –Can provide uniform look and feel to entire site

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline styles.css (1 of 1)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline external.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline external.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct

 2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.6Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)

 2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.7CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

 2003 Prentice Hall, Inc. All rights reserved. 6.7 Positioning Elements Absolute positioning –z-index attribute Layer overlapping elements properly Relative positioning –Elements are positioned relative to other elements

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning.html (1 of 1)

 2003 Prentice Hall, Inc. All rights reserved.

Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning2.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning2.html 2 of 2

 2003 Prentice Hall, Inc. All rights reserved.

6.8 Backgrounds background-image –Specifies the image URL background-position –Places the image on the page background-repeat –Controls the tiling of the background image background-attachment –fixed –scroll font-weight –Specify the “boldness” of text

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline background.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline background.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved.

6.9 Element Dimensions CSS rules can specify the actual dimensions of each page element

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline width.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline width.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved Text Flow and the Box Model Floating –Move an element to one side of the screen Box model –Margins margin-top, margin-right, margin-left, margin-bottom –Padding padding-top, padding-right, padding-left, and padding-bottom –Border border-width –thin, medium, thick border-color –Sets the color border-style –none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

 2003 Prentice Hall, Inc. All rights reserved Text Flow and the Box Model Fig. 6.13Box model for block-level elements.

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (1 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (2 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (3 of 3)

 2003 Prentice Hall, Inc. All rights reserved. Border Example Border properties: –border-width Any valid CSS length or thin, medium, thick –border-color sets the color –border-style border-top-style, border-bottom-style, border-left-style, border- right-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved.

Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders2.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders2.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved User Style Sheets Format pages based on preferences

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_absolute.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_absolute.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline userstyles.css 1 of 1

 2003 Prentice Hall, Inc. All rights reserved User Style Sheets Fig. 6.18User style sheet in Internet Explorer 6.

 2003 Prentice Hall, Inc. All rights reserved User Style Sheets Fig. 6.19User style sheet applied with pt measurement.

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_relative.html (1 of 2)

 2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_relative.html (2 of 2)

 2003 Prentice Hall, Inc. All rights reserved User Style Sheets Fig. 6.21User style sheet applied with em measurement.

 2003 Prentice Hall, Inc. All rights reserved Web Resources tech.irt.org/articles/css.htm ink.html