xp review 2 new perspectives on javascript, comprehensive1 introducing cascading style sheets...

Review 2 New Perspectives on JavaScript, Comprehensive 1

XP

Review 2

Introducing Cascading Style Sheets

Formatting Web Pages with CSS


XPObjectives

• Understand the history of Cascading Style Sheets

• Study how to apply inline, embedded, and external style sheets

• Understand how style definitions are inherited and cascade through a Web site


XPObjectives

• Learn how to – Work with font and text styles– Understand how to apply image and color styles– Study how to size and position elements on a

page– Learn how to work with ids, classes,

pseudoelements, and pseudoclasses– Understand how to create style sheets for different

media types – Study how to create styles for printed output


XPIntroducing CSS

• Style sheet– Collection of properties that describes how

elements within a document should be rendered – Advantage

• Separates document content from document presentation

• Cascading Style Sheets language– Most commonly used on the Web


XPIntroducing CSS

• Styles introduced by CSS1– Fonts, text, color, backgrounds, – Block-level elements

• Styles introduced by CSS2– Positioning, visual formatting, media types,

interfaces

• Styles introduced by CSS3– User interfaces, accessibility, columnar layout– International features, mobile devices– Scalar vector graphics


XPApplying a Style Sheet

• Techniques for applying style to an HTML or XHTML document– Inline styles– Embedded styles– External styles


XPUsing Inline Styles

• Inline style– Applied to an element by adding the style attribute

to the element’s markup tag

• Syntax of the style attribute<element style="style1: value1; style2: value2; style3: value3; ...">


XPUsing Embedded Styles

• Style element– Syntax

<style>

style declarations

</style>– Supports several attributes that define

• Style sheet language to be used• Type of output media for which the style is designed• Name or id that identifies the style element


XPValues of the Media Attribute


XPUsing an External Style Sheet

• External style sheet – Simple text file that contains only style

declarations– Can be linked to any page in a Web site

• To make all h1 headings in a Web site appear in red font– h1 {color: red}


XPApplying Multiple Style Sheets to a Single Document


XPUnderstanding Style Precedence

• When styles come from several sources, they are weighted as follows– 1. External style sheet– 2. Embedded styles– 3. Inline styles


XPUnderstanding Style Inheritance

• Style inheritance– Causes style declarations to cascade down

through the document hierarchy

• To override style inheritance– Specify alternate style for one of the descendant

elements of the parent


XPWorking with Text Styles

• Specifying fontfont-family: fonts

• Specific font– Font such as Times New Roman, Arial, or

Garamond that is installed on user’s computer

• Generic font – Name for the general description of the font’s

appearance


XPGeneric Fonts


XPSetting the Font Size

• Absolute units – Define font size using mm (millimeter), cm

(centimeter), in (inch), pt (point), or pc (pica)

• Relative units – Express font size relative to size of a standard

character in output device

• em unit – Equal to the width of the capital letter “M”

• ex unit – Equal to the height of a lowercase “x”


XPControlling Spacing and Indentation

• CSS support styles that– Allow you to perform basic typographic tasks, such

as setting the kerning and tracking

• Styles to control an element’s kerning and tracking

letter-spacing: value

word-spacing: value


XPSetting Font Styles, Weights, and Other Decorative Features

• To set a font’s appearancefont-style: type

• To set a font’s weightfont-weight: value

• To decorate texttext-decoration: type


XPValues of the Vertical-alignment Style


XPWorking with Color and Image Styles

• Style to define an element’s foreground color color: color

• Color values are entered in the form rgb (red, green, blue)

• Style to define an element’s background colorbackground-color: color


XPSetting a Background Image

• Properties you can set on a background image– The source of the image file– Where the image is placed in the background of

the element– How the image is repeated across the background

of the element– Whether the image scrolls with the display window


XPControlling Image Placement

• Controlling how browsers tile a background image

background-repeat: type

• Placing a background image in a different location

background-position: horizontal_position vertical_position

• Defining the position of a background imagebackground-position: 50% 50%


XPSizing Elements

• Size of each element – Determined either by its content or – By the size of its containing element

• Setting the width of an elementwidth: value

• Setting an element’s heightheight: value


XPWorking with Borders, Margins, and Padding

• Box model– Identifies the different parts of the element

• Elements described by box model– Margin between the box and other elements– Border of the box– Padding between element’s content and border– Element’s content


XPWorking with Margins

• Styles that can be used to control the size of the margin of a page element

margin-top: value

margin-right: value

margin-bottom: value

margin-left: value


XPWorking with Borders

• To set width of an element’s borderborder-width: top right bottom left

• To set the border colorborder-color: top right bottom left

• To set the border styleborder-style: top right bottom left

• To format the entire borderborder: width style color


XPPositioning Elements

• Style to set position of an element position: type; top:value; right:value; bottom:value; left:value

• Position style has five possible values– static, absolute, relative, fixed, and inherit


XPAbsolute Positioning

• Places an element at defined coordinates within its parent element

• In most cases– Parent element is the document window itself


XPAbsolute Positioning


XPRelative Positioning


XPFixed and Static Positioning

• Fixed position– Places element at a fixed location in display

window

• Static position– Places object in its natural position in the flow of

the document as determined by the browser


XPFloating an Element

• Places element alongside the left or right margin of the page or the containing element

• Style to float an elementfloat: margin


XPThe Float Style


XPStacking Elements

• By default– Elements defined later in a document are placed

on top of earlier elements

• To specify a different stacking orderz-index: value

• Elements are stacked based on – z-index values


XPUsing the z-index Style


XPSetting the Element Display Style

• Most page elements – Classified as either inline elements or block-level

elements

• CSS– Can be used to change the display style applied to

any element– Syntax

display: type


XPSetting the Display Style


XPHiding Elements

• Two ways of hiding an element– Set the value of the display style to “none”

address {display: none}

– Use the visibility stylevisibility: type


XPWorking with Selectors

• Contextual selectors– Used to apply a style based on the context in

which an element is used– Can also be grouped with selectors

li b, h2 {color: blue}


XPSimple and Contextual Selectors


XPAttribute Selectors


XPApplying Styles to IDs and Classes

• To apply a style to an element based on the value of its id attribute

#id {styles}

• Class attribute– Used to identify a group of elements

• To apply a style to a group of elements based on value of class attribute

.class {styles}


XPApplying a Style to a Class


XPApplying Styles to Pseudoclasses and Pseudoelements

• Pseudoclass – Classification of an element based on its status,

position, or current use in a document– Used to create rollover effects

• To create a style for a pseudoclassselector:pseudoclass {styles}


XPWorking with Different Media

• To specify output media within a style sheet @media type {style declarations}

• @media rule – Allows you to consolidate your styles within a

single style sheet– Consolidation can result in larger and complicated

files


XPUsing Print Styles

• CSS2 defines printed pages by – Extending box model to incorporate the entire

page in a page box

• Rule to create and define a page box @page {styles}

• Pseudoclasses or page names– Allow you to define multiple page styles within the

same document


XPSetting the Page Size

• Size style– Used to define size of the output page– Syntax

size: width height orientation


XP Working with Page Breaks

• Page-break-before and page-break-after styles – Used to place page breaks before or after a given

element– Syntax

page-break-before: type

page-break-after: type


XPWorking with Page Breaks

• Widow– Final few lines of an element’s text when they

appear at the top of a page

• Orphan – First few lines of an element’s text when they

appear at the bottom of a page


XPWorking with Page Breaks

• Browsers attempt to use page breaks that obey these guidelines – Avoid inserting page breaks where indicated in

style sheet– Break pages as few times as possible– Avoid breaking inside of a table– Avoid breaking inside of a floating element

xp review 2 new perspectives on javascript, comprehensive1 introducing cascading style sheets...

Documents