XHTML1 Cascading Style Sheets Chapter 8. XHTML2 Objectives In this chapter, you will: Study basic Cascading Style Sheet (CSS) syntax Work with internal.

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

Cascading Style Sheets
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
CSS Digital Media: Communication and design 2007.
Today CSS HTML A project.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 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.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
กระบวนวิชา 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.
Measurement Many CSS properties (values within the declaration) require that you specify a unit of measurement, such as spacing between elements, border.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
Chapter 8 Creating Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
Week 7 Web Typography. 2 Understanding Type Design Principles.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
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,
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Cascading Style Sheet (CSS)
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.
Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Using Cascading Style Sheets Module B: CSS Structure.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
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,
CSS Cascading Style Sheets *referenced from
CSS FOUNDATIONS IN-DEPTH The nitty-gritty of css...
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Using Cascading Style Sheets Module A: CSS Basics.
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.
CSS for Styling By Jinzhu Gao.
CS3220 Web and Internet Programming CSS Basics
Cascading Style Sheets™ (CSS)
CSS: Cascading Style Sheets
Chapter 6 Cascading Style Sheets™ (CSS)
Madam Hazwani binti Rahmat
Using Cascading Style Sheets Module B: CSS Structure
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
IS333: MULTI-TIER APPLICATION DEVELOPMENT
3 Configuring Color & Text With CSS.
CSS – Properties & Values
The Internet 10/13/11 The Box Model
CSS Style Sheets: Intro
Cascading Style Sheets Color and Font Properties
Web Programming– UFCFB Lecture 11
Cascading Style Sheets™ (CSS)
Tutorial 3 Working with Cascading Style Sheets
CS3220 Web and Internet Programming CSS Basics
Chapter 7 Web Typography
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
CS3220 Web and Internet Programming CSS Basics
Cascading Style Sheets
Cascading Style Sheets™ (CSS)
Cascading Style Sheets
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

XHTML1 Cascading Style Sheets Chapter 8

XHTML2 Objectives In this chapter, you will: Study basic Cascading Style Sheet (CSS) syntax Work with internal and external style sheets Learn about CSS values

XHTML3 Objectives Set color and background properties Set text properties Set font properties Validate style sheets

XHTML4 Introduction to Styles and Properties To ensure that future Web page authoring separates the definition of the elements in a document from how they appear, many of the display and formatting extensions that were added to the HTML language, such as the element, were deprecated in HTML 4.0 and in XHTML 1.0 in favor of CSS Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium (W3C) for managing the design and formatting of Web pages in a Web browser

XHTML5 Introduction to Styles and Properties A single piece of CSS formatting information, such as text alignment or font size, is referred to as a style Some of the style capabilities of CSS include the ability to change fonts, backgrounds, and colors, and to modify the layout of elements as they appear in a Web browser CSS information can be added directly to documents or stored in separate documents and shared among multiple Web pages

XHTML6 Introduction to Styles and Properties The term “cascading” refers to the Web pages’ ability to use CSS information from more than one source –External –Internal –Inline

XHTML7 CSS Properties CSS styles are created with two parts separated by a colon: the property, which refers to a specific CSS style, and the value assigned to it, which determines the style’s visual characteristics Together, a CSS property and the value assigned to it are referred to as a declaration or style declaration

XHTML8 CSS Properties

XHTML9 Common CSS Properties

XHTML10 CSS Properties You can find a listing of CSS1 properties in Appendix D The properties available in CSS1 are grouped into the following categories: –Color and background properties –Font properties –Text properties –Box properties –Classification properties

XHTML11 CSS Properties CSS recommendation, Level 2 (CSS2) was released in 1998 CSS2 builds on the properties in CSS1 and includes new features such as table properties and the ability to change the appearance of the mouse pointer At the time of this writing, no Web browser provides complete support for the properties available in CSS2

XHTML12 Inline Styles The most basic method of applying styles is to use inline styles, which allow you to add style information to a single element in a document You use the style attribute to assign inline style information to an element You assign to the style attribute a property declaration enclosed in quotation marks

XHTML13 CSS Values The values you can assign to a CSS property depend on what type of property it is Some properties can be assigned a range of values For instance, you can assign any font name that is available on a user’s system to the font-family property For other properties, you must assign a value from a specific set of values

XHTML14 Length Units Length units refer to the units of measure that you can use in a style declaration to determine the size or positioning of an element Whether a length unit is used for sizing or positioning depends on the property and the element to which it is assigned You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure

XHTML15 CSS Length Units

XHTML16 Length Units CSS length units are either absolute or relative Absolute length units use an exact measurement to specify the size or placement of an element The following CSS length units are absolute: –cm (centimeters) –in (inches) –mm (millimeters) –pc (picas) –pt (points)

XHTML17 Length Units Relative length units are preferred because they adjust properties according to screen size or user preferences The following CSS length units are relative: –em (em space) –ex (x-height) –px (pixels)

XHTML18 Percentage Units An alternative to relative length units is percentage units, which adjust properties relative to other values You assign a percentage unit value to a property by assigning a number that represents the percentage, immediately followed by the percent symbol (%)

XHTML19 Color Units A color unit represents a color value that you can assign to a property You can assign a color unit to a property using any one of 16 color names defined in the CSS1 specification

XHTML20 Color Units Most graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color system Refer to Appendix D for information on assigning colors with the RGB color system

XHTML21 CSS Structure You now understand the basics of working with CSS You will now learn how to structure the CSS used by your documents

XHTML22 Internal Style Sheets You use an internal style sheet to create styles that apply to an entire document You create an internal style sheet within a element placed within the document head The element must include a type attribute, which is assigned a value of “text/cs”

XHTML23 Internal Style Sheets Within the element you create any style instructions for a specific element that are applied to all instances of that element contained in the body of the document The element to which specific style rules in a style sheet apply is called a selector

XHTML24 Internal Style Sheets

XHTML25 Contextual Selectors A contextual selector allows you to specify formatting for an element, but only when it is contained within another element You create a contextual selector by including two or more selectors in a declaration within a element separated by spaces p em{color:red} p{color:blue}

XHTML26 Class Selectors Another method of applying styles is to use class selectors, which allow you to create different groups of styles for the same element You create a class selector within a element by appending a name for the class to a selector with a period –tr.blue {color:white; background-color:blue} You then assign the class name to the standard class attribute of elements in the document that you want to format with the class’s style definitions

XHTML27 Class Selectors

XHTML28 ID Selectors An ID selector is similar to an inline style in that it allows you to create style declarations that are only applied to a single element in the document As with inline styles, you use an ID selector when you want to change the style of a single element on your Web page –#p1 {font-family: verdana; color: blue} The benefit to using ID selectors over inline styles is that they allow you to maintain all of your style declarations in a single location within the element, as opposed to inline style declarations, which you must create within each element

XHTML29 External Style Sheets External style sheets are separate text documents containing style declarations that are used by multiple documents on a Web site You should create an external style sheet whenever you need to use the same styles on multiple Web pages on the same site You create an external style sheet in a text editor, the same as when you create XHTML documents However, you should save the document with an extension of.css

XHTML30 External Style Sheets The most popular way of accessing the styles in an external style sheet is to use the empty element to link a document to a style sheet You place the element in the document head You include three attributes in the element: an href attribute that is assigned the Uniform Resource Locator (URL) of the style sheet, an rel attribute that is assigned a value of “stylesheet” to specify that the referenced file is a style sheet, and the type attribute, which is assigned the same “text/css” value as the type attribute used in the element

XHTML31 The and Elements The element formats a group of block-level and inline elements with styles, whereas the element formats a group of inline elements The only difference between these two elements is that the element can contain block-level elements and also adds a line break after its closing tag

XHTML32 Cascading Order CSS uses an order of precedence to determine which styles to apply when a selector is formatted in different sources The least important style formatting is the browser’s default style settings The cascading order of precedence for styles, starting with the least important to the most important, is as follows: 1.Browser default 2.External style sheets 3.Internal style sheets 4.Inline styles

XHTML33 Setting Color and Background Properties The color property sets the text color of an element Background properties set the background color or image that appears behind an element

XHTML34 Foreground and Background Color The color you apply with the color element is referred to as the foreground color Another type of color you can add to elements is background color, which you create with the background-color property The foreground color that is applied to an element’s text appears on top of an element’s background color

XHTML35 Foreground and Background Color The W3C strongly recommends that whenever you use the color property, you also include the background-color property to ensure that the foreground color text is placed on a suitable background In order to set background properties for the Web page itself, you declare them for the element

XHTML36 Background Images To set an image to appear as the document background, you use the background- image property and assign to it a URL using the format url (url)

XHTML37 Background Images

XHTML38 The background Shorthand Property Several of the property categories include a special property called a shorthand property that allows you to set all of the properties in a category using one declaration The shorthand property for the background properties category is the background property Many of the properties for each category have unique values that are assigned to them

XHTML39 The background Shorthand Property The background-attachment property can be assigned the values “scroll” or “fixed”; neither of these values can be assigned to any other background property

XHTML40 Setting Text Properties You use text properties to specify the placement and appearance of text The difference between text properties and font properties is that text properties do not change the appearance of an element’s font Text properties adjust visual aspects such as word and letter spacing, text alignment, indentation, and so on

XHTML41 CSS1 Text Properties

XHTML42 Word and Letter Spacing Word spacing refers to the amount of space between words, whereas letter spacing refers to the amount of space between letters You set word spacing with the word- spacing property and letter spacing with the letter-spacing property

XHTML43 Text Decorations The text-decoration property modifies the appearance of text by adding the following “decorations” to the text: none, underline, overline, line-through, and blink An underline value underlines the text, an overline value places a line over the text, and a line-through value places a line through the text, the same as the element

XHTML44 Text Decorations One of the more common uses of the text- decoration property is to turn off the underline that appears beneath links for design purposes

XHTML45 Line Height By default, the line height in a document is set to single-space You use the line-height property to change the default line of an element from single-spacing to something else The line-height property can accept a length unit or percentage unit value If you use a length unit, be sure to use a relative unit such as ems or a percentage unit

XHTML46 Indenting The text-indent property indents the first line of a paragraph according to the value you specify You may be tempted to use an absolute measurement such as inches or centimeters with the text-indent property Be sure to use a relative length unit or a percentage unit in order to allow the indent to scale according to the element’s font

XHTML47 Text Alignment You have seen how to align text horizontally using the text-align property Although the examples you have seen have been with inline styles, you can also use the text-align property with selectors The vertical-align property is a little more complicated in that it changes the vertical alignment of an element in relation to its parent element

XHTML48 Text Alignment One common use of the vertical-align property is to adjust the position of images, such as toolbar buttons, that are placed inside a line of text

XHTML49 Setting Font Properties

XHTML50 Font Name The font-family property is a critical font property because it sets the font that an element displays When you select a font for an element, be sure to use a font that you know is installed on a user’s computer Your best bet is to assign a list of font names to the font-family property, separated by commas Generic font families represent the five major font families available in typography: serif, sans serif, cursive, fantasy, and monospace

XHTML51 Font Size You have seen examples of how to specify font size using the font-size property When specifying font size, be sure to use a relative length unit such as ems or a percentage unit Alternately, you can use one of the following predefined values to set font size: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger

XHTML52 Font Size

XHTML53 Font Appearance In addition to the font family and the font size, you can change the appearance of a font using the font-style, font-variant, and font- weight properties The font-style property allows you to make text italicized or oblique, which is a slanted font, similar to an italicized font

XHTML54 The font Shorthand Property Using the font shorthand property, you can set values for all of the font properties in a single declaration The values for the font property must be set in the following order: –font-style (optional) –font-weight (optional) –font-variant (optional) –font-size (required) –line-height (optional) –font-family (required)

XHTML55 Validating Style Sheets The W3C offers a utility, the W3C CSS Validation Service, for validating CSS code The W3C CSS Validation Service upload is primarily used for external style sheets You can download a copy of the utility or validate your CSS code online, the same as you validate XHTML code with the W3C Markup Validation Service

XHTML56 Summary Cascading Style Sheets (CSS) are a standard set by the W3C for managing the design and format of Web pages in a Web browser The term cascading refers to the Web pages’ ability to use CSS information from more than one source A CSS property and the value assigned to it are referred to as a declaration or style declaration

XHTML57 Summary Inline styles allow you to add style information to a single element in a document Percentage units adjust properties relative to other values External style sheets are separate text documents containing style declarations that can be used by multiple documents on a Web site Background properties set the background color or image that appears behind an element

XHTML58 Summary Several of the property categories include a special property called a shorthand property that allows you to set all of the properties in a category using one declaration You use font properties to specify the typeface, size, and style of an element’s text