1 Web Developer Foundations: Using XHTML Chapter 9 Cascading Style Sheet Concepts.

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

Web Development & Design Foundations with XHTML Chapter 3 Key Concepts.
CSS Cascading Style Sheets Cascading Style Sheets 1.
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 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
กระบวนวิชา 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.
Chapter 8 Creating Style Sheets.
Web Development & Design Foundations with XHTML Chapter 3 Key Concepts.
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.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
4.01 Cascading Style Sheets
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
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 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
Review: Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS In this chapter we will focus on introducing and examining the mechanics.
Cascading style sheets (CSS)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML & CSS.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed url(File);  CSS.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Doman’s Sections Information in this presentation includes text and images from
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Cascading Style Sheets by Pavlovic Nenad by. Presentation Contents  What is CSS?  Why CSS?  Types of Style Sheets  Style Sheets Syntax  Box Formatting.
Cascading Style Sheets
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Cascading Style Sheets CSS by Pavlovic Nenad by. 2Cascading Style Sheets Presentation Contents What are CSS? What are CSS? History of CSS History of CSS.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.
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.
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.
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,
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
DIV, Span, CSS.
Cascading Style Sheets
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Lesson 15: Cascading Style Sheets. Objectives Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1 and CSS2) using various methods.
Jozef Goetz, © 2009 Pearson Education Copyright (c) 2007 Prentice-Hall. All rights reserved. expanded by J. Goetz, 2010.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
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 Development & Design Foundations with XHTML Chapter 6 Key Concepts.
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.
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.
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.
Cascading Style Sheets Part 1 1 IT 130 – Internet and the Web.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
Web Development & Design Foundations with XHTML
CSS Cascading Style Sheets.
Web Development & Design Foundations with HTML5 8th Edition
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Web Development & Design Foundations with HTML5
Web Developer & Design Foundations with XHTML
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Web Development & Design Foundations with HTML5
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2016 Terry Ann Morris, Ed.D.
Presentation transcript:

1 Web Developer Foundations: Using XHTML Chapter 9 Cascading Style Sheet Concepts

2 Learning Outcomes In this chapter, you will learn how to: Describe the evolution of style sheets from print media to the web List advantages of using cascading style sheets Create style sheets that configure common page and text properties Use inline styles Use embedded style sheets Use external style sheets

3 Overview of Cascading Style Sheets Style Sheets have been used for years in Desktop Publishing to apply typographical styles and spacing to printed media Cascading Style Sheets (CSS) provides this functionality (and much more) for web developers. CSS is a flexible, cross-platform, standards- based language developed by the W3C. This text concentrates on using CSS for formatting – a feature that is well-supported by browsers.

4 CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate document and linked to from the web page Potentially smaller documents No need for tags Easier site maintenance

5 CSS Disadvantages There is one large disadvantage -- Cascading Style Sheet technology is not yet uniformly supported by browsers. This text will focus on features that are well supported by popular browsers. This current disadvantage will be less of an issue in the future as the browsers comply with standards.

6 Types of Cascading Style Sheets Inline Styles Inline styles are coded in the body of the web page as an attribute of an XHTML tag. The style only applies to the specific element that contains it as an attribute (example: inline.htm)inline.htm Embedded Styles Embedded styles are defined in the header of a web page. These style instructions apply to the entire web page document. (example: embedded.htm)embedded.htm External Styles External Styles are coded in a separate text file. This text file is linked to the web page by using a tag in the header section. (example: page1.htm and page1A.htm and site.css)page1.htmpage1A.htmsite.css Imported Styles Imported Styles are similar to External Styles in that they are coded in a separate text file. They are not widely supported by browsers at this time.

7 CSS Syntax Style sheets are composed of "Rules" that describe the styling to be applied. Each Rule contains a Selector and a Declaration

8 CSS Syntax Sample body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; }

9 Common Formatting CSS Properties background-color color font-family font-size font-weight font-style text-decoration line-height text-align background-image

10 Using Inline Styles Inline Styles are coded as attributes on XHTML tags. The following code will set the text color of a tag to a shade of red: This is displayed as a red heading The following code sets the text in the heading to red and italic. This is displayed as a red heading in italic style

11 XHTML tag The tag A container tag Used to create a specially formatted division or area of a web page. It can be used to format that area and places a line break before and after the division. Use the tag when you need to format an area that is separated from the rest of the web page by line breaks. The tag is also useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it.

12 XHTML tag The tag A container tag The tag will format an area on the page that is NOT physically separated from others by line breaks. Use the tag if you need to format an area that is contained within another, such as within a paragraph. Example: spanexp.htmspanexp.htm

13 Embedded Styles Apply to an entire web page. Placed within a tag located in the header section of a web page. The opening tag begins the embedded style rules. The closing tag ends the area containing embedded style rules. When using the tag, there is no need for the style attribute. The tag does use a type attribute that should have the value of "text/css". body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif; }

14 Using CSS with “class” class Selector Use to apply a CSS rule to a certain "class" of elements on a web page and not necessarily tie the style to a particular XHTML tag. A CSS class is indicated by.classname The sample above creates a class called “new” with red italic text. To use the class, code the following XHTML: This is text is red and in italics.new { text: #FF0000; font-style:italic; }

15 Using CSS with “id” id Selector Use to apply a CSS rule to a certain type of element on a web page and not necessarily tie the style to a particular XHTML tag. A CSS id is indicated by #classname The sample above creates an id called “new” with red italic text. To use the id, code the following XHTML: This is text is red and in italics #new { text: #FF0000; font-style:italic; }

16 External Style Sheets External Style Sheets are contained in a text file separate from the XHTML documents. The tag is a self-contained tag used in the header section of an XHTML document to "link" the style sheet with the web page. Multiple web pages can link to the same external style sheet file. The External Style Sheet text file is saved with the file extension ".css" and contains only style rules. It does not contain any XHTML tags.

17 Using an External Style Sheet To link to the external style sheet called color.css, the XHTML code placed in the header section is: body { background-color: #0000FF; color: #FFFFFF; } External Style Sheet color.css

The Cascade This “cascade” applies the styles in order from outermost (External Styles) to innermost (actual XHTML coded on the page). This way site-wide styles can be configured but overridden when needed by more granular (or page specific) styles.

19 CSS Pseudo-classes Pseudo-classes and the anchor tag Link – default state for a link (anchor tag) Visited – state of a link that has been visited Hover – state of a link that the mouse is currently over Active – state of a link that is being clicked Example: page2.htmpage2.htm a:link {color:#FF0000 } a:hover {text-decoration:none; color:# }

20 CSS Strategies(1) Always include end tags (even though browsers usually display the page, anyway) for all XHTML container tags. Design and code the page to look "OK" or "Acceptable" -- then use style sheets for extra- special effects and formatting. Use style sheet components that will degrade gracefully. Check the compatibility charts and test, test, test, test, test....

21 CSS Strategies(2) Use and tags to create logical page sections. Be aware that Netscape 4.x handles the tag better than the tag. Use style sheets in Intranet environments -- you know exactly what browsers your visitors will be using. Consider using a browser detection script (discussed in Chapter 12) to test for a specific browser and link to the style sheet coded specifically for that browser.

22 Summary This chapter introduced you to Cascading Style Sheet Rules associated with color and text on web pages. There is much more that you can do with CSS – positioning, hiding and showing page areas, formatting margins, formatting borders, etc. As you continue your study of web development in future courses you will study these additional uses. To learn more now about CSS check out the tutorials at or the W3C site for official specifications.