Cascading Style Sheets

Citation preview

---

BarCharts, Inc.®

WORLD’S #1 QUICK REFERENCE SOFTWARE GUIDE

TYPES OF CSS RULES

INTRODUCTION

HTML SELECTOR

The HTML tag contains the selector;

contains the selector “table”; CSS may use the selector to redefine the default style of a selector; table { font: bold 12pt Arial; }; this definition forces all tables to have the same font attributes CLASS

A Class is a means for you to define your own tag and apply it to any HTML tag .myContent { font: bold 12pt Arial; }

ID An ID is used to define an element as an object; this object will now be accessible to JavaScript functions #myObject { position: absolute; top: 10px; }

HTML is a markup language that defines the structure of a web page, and CSS tells the HTML tags how to behave; CSS can be used to redefine HTML tags or define custom tags; styles encompass many font attributes that may be predefined as a group, and then applied to similar elements within a document or an entire website; CSS allows the designer to apply a set of styles to a custom tag; “content” for example, and then all document elements defined as “content” will look the same; this tag may be defined in one central location and therefore any changes can be made in one place and affect all occurrences of “content”; CSS is a separate code that works with HTML to enhance the appearance of a document which can also be applied across an entire website; CSS has evolved into a standard that has improved

with each new version; each new version also provides more cross-browser capability; in other words, the styles defined would appear the same in different web browsers: Opera, Netscape, Mozilla, Safari, Internet Explorer—while these are not the only web browsers on the market, they are the most commonly used

PARTS OF CSS RULES selector { property: value; }

All rules have the same structure; SELECTOR -HTML TAGS, CLASS, OR AN ID PROPERTY -what is being defined; font, font size, etc. VALUE -each property has different types of values: Boolean, numeric, percentages, and others

For this tutorial, the code editor used is TextPad 4; this powerful code editor can be downloaded from their website for free; this program is available in several different languages and is compatible with all versions of Windows, including NT: http://www.textpad.com The Code for this tutorial was tested using Internet Explorer 6 on Windows XP

This is only the general syntax for rule selectors; rule selectors may have multiple properties

TEXT PAD

TextPad is a text editor that allows you to edit any text-based file extension (.bat, .c, .java, etc.); it also has compiling power for C# and Java Programmers; it can also edit HTML files as well as CSS files; the appealing feature to most web programmers is that it uses line numbers as well as color-coded display of most document classes; line numbers can be helpful when troubleshooting code, as most browsers will return the line number where an error has occurred The document will render any imported or linked styles; then any embedded styles (defined in the HEAD section) will override any overlapping styles, as well any inline styles (defined in the HTML Tag in the document) will override any overlapping styles; Inline Styles will always have the last word

1. New File, Open File, Save File - standard features on most menu bars; TextPad allows you to customize the default document type 2. Manage Files, Print, Print Preview, Full Screen View – Manage Files dialog allows you to perform multiple functions on the active document 3. Cut, Copy, Paste 4. Undo, Redo – the redo amount can be customized 5. Text Indent, Text Outdent – a useful feature when looking at hundreds of lines of code 6. Word Wrap, Visible Line Breaks – useful when files have to have predetermined columns or widths

1

2

4

7. Preview in Web Browser, Spell Check, Sort Ascending, Compare Files – you can customize which browser is the default browser for TextPad if you have more than one installed; Spell Check Dictionary can be customized; Sort Dialog is feature-rich; users can customize what to use as the sort key and many other features; Compare Files is very useful to ensure document changes were applied

SELECTORS CLOSE UP 1. HTML SELECTORS a. This type of selector allows you to alter the default styles of HTML tags b. There are some HTML tags which cannot have their default properties overridden; , for example, will always create a BOLD font-weight; however, you may customize other properties available for this tag; as such, some properties are not available in all HTML tags even if you define them in your rules; the tag for example, in Internet 1

3

5

6

7

8

9

10

8. Find, Replace, Find in Files – a. Find will search the entire document or all open documents b. Replace will find and replace code or text c. Find in Files allows searching for words or code in documents by file extension or by user choice 9. Macro Toolbar a. Record b. Pause c. Run Macro 10. Help Menu

Explorer, does not allow any position properties to have any affect 2. CLASS SELECTORS a. This type of selector allows web designers to customize selectors to suit different needs; the only names that you cannot use to name your selectors are reserved JavaScript words; Class Selectors may be applied to any HTML tag or only to specific HTML tags

Selectors Close Up (continued) b. CSS also allows you to create dependent 3. ID SELECTORS classes a. ID Selectors, like Class Selectors, These classes are only applied if their parent or allow web designers to customize dependent tag is applied; any selector and selectors to suit different needs; the dependent class separated by a period creates a only names that you cannot use to dependent class; this definition of customStyle name your selectors are reserved will only be applied if a

Tag is used JavaScript words; Class Selectors p.customStyle { font: bold italic Verdana; may be applied to any HTML Tag color: #FFFFFF; or only to specific HTML Tags padding: 8px; b. ID Selectors allow JavaScript func} tions to access and identify unique c.

content

objects in the document; for this In an HTML document, any text between the reason, best practice dictates that an

Tags defined with the class custom Style ID should only be used once per will be affected by the rules defined in the cuspage tom style class; this class can be defined in an c. DEFINE AN ID SELECTOR embedded style or an external stylesheet, and i. #customID { color: red; margin-left: combined with inline style or ID Selectors 9em; position: relative; } HTML TAG - “inline rule,” used to affect a single tag within the document;

d. APPLY A SELECTOR i.

.....

* Note: Even though the # sign is used in the definition, it is not used in the identifier; ID Selectors do not require a definition to be used in a document to identify an object

RULE LOCATIONS ADDING STYLES TO HTML TAG

ADDING STYLES TO A WEB SITE

< p style = “font: small-caps bold ‘Arial’, sans-serif; color: blue” >

(Inline styles)

HEAD - “embedded rule,” used in the head section of a web page, and defined using

CONTENT

EXTERNAL DOCUMENT - “external rule,” used by importing or linking to from an HTML document in your website

4. Repeat with as many selectors as needed 5. Close the style tag []

The syntax is defined as follows; the style attribute allows you to customize the appearance of the HTML tag

(Paragraph); the definition is in quotes; the property font: value; property color: value blue

The previous style rules were applied to a document from within a document; external CSS files, which are text files with a list of properties and values, are available to any document that can import or link to it from within a website; the file, which is available globally, is a text file saved with an extension of .css

ADDING STYLES TO A WEB PAGE or

(Embedded styles) Using Embedded styles, CSS allows you to define the style rules for a document in the Head section

1. Define the style type; [< style type=”text/css”...]

2. Define the selector or selectors being defined, followed by open curly braces: [ .myContent (class selector) { ]

a. HTML TAGS ( p, h1, table, etc.) b. CLASS SELECTOR (.myContent, .moreContent, etc.) c. ID SELECTOR (#content, #category, #titles, etc. ) d. GROUPS OF SELECTORS, SEPARATED BY COMMAS; defining styles with the same rules e. A GROUP OF SELECTORS SEPARATED BY SPACES; defining styles in context 3. Begin to define the properties and the associated values i. font: bold 12pt Arial; ii. color: #EE0000; iii. margin-right: -5px; iv. }- Close the Rule with the close curly brace 2

1. Create a new file using Notepad or similar text editor, and save within the web directory as “any_name”.css; add Selectors to your style sheet to create custom rules using the syntax mentioned earlier for different types of selectors; HTML Tags, CLASS Tags, ID Tags, and groups of tags separated by spaces or commas a. P { font: normal Arial, sans_serif; Color: #000000; Margin-right: 5px; }-HTML Definition .customStyle { font: bold italic Verdana; color: #FF7789; padding: 3px; }- CLASS Definition #customID { font: bold italic Trebuchet MS; color: #FF7789; padding: 3px; }- ID Definition p, customStyle, customID { font: bold italic Verdana; color: #FF7789; padding: 3px; }- GROUP definition using

commas; defining styles with the same rules p customStyle customID { font: bold italic Verdana; color: #FF7789; padding: 3px;

Rule Locations (continued) }- GROUP definition using spaces; defining styles in context b. Notice that the tag is not used in the CSS file; the first line of a stylesheet begins with a selector, open curly braces, a list of properties and their values separated by semicolons;

then the selector is closed with a close curly brace; repeat this syntax for each type of selector c. Common practice when naming CSS files is to use a name associated with the area or areas that the

1. Styles with the Same Rules a. CSS allows you to create classes with the same rules by separating the names of the styles with commas: h1, h2, h3, p {fontcolor: black;}; the individual attributes can still be defined; the individual attributes should be defined inline after the grouping to allow individual rules to override group rules as needed b. [SAMERULES.JPG] 2. Styles in Context a. If a rule is applied within a rule, the tags are said to be nested; the initial tag is called the parent tag; i.e.;

blah blah blah

i. In the code example above, “rule1” is the parent and “customID” is the child; you are allowed to “nest” your tags as deeply as needed, however, the last tag has the last say; in other words, the last child tag will be the ultimate selector for the rules that are applied to the desired content ii. To create a Contextual Selector, use the following format; • p a: link {color: red;} • div.customClass a: link {color: blue;}

3. Pseudo-Classes contain unique attributes that can be defined separately; one example of this is the Anchor Tag ( ); the attributes associated with a link are considered unique attributes and as such may be defined using CSS; the attributes are supported across the most common browsers

These pseudo-classes may also be defined using inline styles; color, text-decoration, cursor are some available elements a. A: link - the appearance of a link in the document b. A: visited - the appearance of link that has already been visited c. A: hover - the appearance of a link when the mouse is over the link d. A: active - the appearance of a link that gets a click e. There are other pseudo-classes that are available, however, not all are supported across all browser platforms 4. Cascade? Not for your dishwasher; the preferred strategy to applying CSS to your website is to use External Style Sheets; this allows the designer to update style changes for the entire site in one place; the cascading ability of CSS allows you to define a global.css file for elements that will remain the same throughout the site; designers will typically then define a sectional Style Sheet that will have elements that are not defined globally but by section

FONT CONTROLS The most basic element in any document is the Font, or letterforms; this most basic element, when used incorrectly, can disrupt the delivery of content to the user; CSS allows designers to extend the limitations of simple HTML tags; Type Style or Font Family is divided into five basic categories 1. Serif: This font family has decorations at the tips of the letters; best for large text 2. Sans Serif: This font family does not have decoration at the tips of the letters; commonly used for content or smaller text 3. Monospace: This font family may or may not have serifs; this family forces upper and lower case letters to occupy the same amount of space 4. Cursive: As the name states, this family mimics handwriting and is primarily for decorative use 5. Fantasy: This family contains fonts that do not fit into the other four categories; typically, this family will have decorative fonts and dingbats (i.e.; Wing Dings) THE FONT

A.In the rule for DEFINING THE FONT FAMILY, for the class “title_text,” the primary font choice is Arial; if the client does not have Arial, then use Trebuchet MS (quotes because font name has two words); if Trebuchet is not available, then use sans-serif as the font; the list can be as long as you like, as long as commas separate the values and two-word font names are in single quotes; all 5 categories of families are available across the most popular browsers; the client’s browser will always try to default to the same family if the fonts specified are not available http://www.developer.apple.com/fonts http://www.microsoft.com/typography/fonts B. FONT SIZE HTML only allows for 7 variations of size. CSS gives developers access to sizing their font by pixels (px), points (pt), percentages (%), font size (em), or size relative to surrounding text Defining the font size in a rule: Rule syntax: font-size: 12pt; • Expressions allowed: xx-small, x-small, small, medium, large, x-large, xx-large • Smaller and larger may be used to reference the relation to the parent element

title_text { font-family: Arial, ‘Trebuchet MS’, sans-serif; }

C. FONT_STYLE There are three available styles i. Normal ii. Italic—uses the italic version of the font when present, otherwise oblique iii.Oblique—the computer slants the font to the right iv. Defining the font style in a rule: Rule syntax: font-style: italic; 3

D. FONT_WEIGHT CSS extends the limited options of HTML (bold or not) with respect to the variety of settings available for this font property i. BOLD—just as the name says, bold face font ii. Bolder or Lighter—with respect to the font weight of the parent element iii.100 to 900 in 100 increments increases the weight of the font iv. NORMAL—overrides all weight settings • Rule syntax: font-weight: bolder; • font-variant: values: normal or smallcaps SETTING MULTIPLE FONT VALUES

CSS allows the designer the flexibility to define multiple font properties at once Rule syntax: font: bolder italic 12pt Arial, sans-serif; + font: ‘font-style’ ‘font-variant’ ‘fontweight’ ‘font-size’ ‘line-height’ ‘fontfamily’

•

Rules that you do not define will use the default setting

Did You Know? CSS’ most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL; the CSS specifications are maintained by the World Wide Web Consortium (W3C)

These controls when used effectively, can enhance legibility in a document:

TEXT CONTROLS

b. Rule syntax: text-align: justify; 1. text spacing c. Possible Values: a. The amount of space between letters in a i. + left: left margin aligned word, kerning ii. + right: right margin aligned b. Rule syntax: letter-spacing: 2em; iii.+ center: centered text c. Using normal will override parent element iv. + justify: right and left margin settings aligned 2. word spacing 6. vertical text alignment a. The amount of space between words a. The vertical alignment of an eleb. Rule syntax: word-spacing: 8px; ment in relation to elements around c. Using normal will override parent element it settings b. Rule syntax: vertical-align:baseline; 3. line spacing c. Possible Values: a. Line spacing adds space from the baseline i. + super: above the baseline of the text to a predetermined or default ii. + sub: below the baseline height iii.+ baseline: on the baseline (norb. Rule syntax: line-height: 2; mal state) c. Possible Values: iv. + text-top: aligns the tops of adjai. Number - this value is multiplied by the cent elements font size v. + text-bottom: aligns the bottoms ii. Length value - in pixels (px) or exact of the adjacent elements space (em) vi.+ percentages: positive for above iii.Percentage - proportional to the font size and negative for below the baseiv. Using normal will override parent eleline ment settings 7. indenting paragraphs 4. text case a. Due to the fact that browsers coma. Allows the designer ultimate control over press multiple spaces into one, text case most designers opt to use a line b. Rule syntax: text-transform: uppercase; break for new paragraphs rather c. Possible Values: than the traditional indentation of i. + capitalize; capitalizes the first letter only five spaces; CSS allows designers ii. + uppercase: capitalizes all letters to specify indentation using the foliii.+ lowercase: forces lowercase on all letlowing rule ters b. Rule syntax: text-indent: 2em; iv. + none: overrides parent element settings c. Possible Values: d. This property is typically applied to d. Length value - any units used by fontdynamic content size ( px, em, pt ) 5. horizontal text alignment i. Percentage - proportional to the a. CSS control rules for alignment and justification of text paragraph width Elements are identified by HTML container tags (

ELEMENT

); elements may also be nested; the first element is said to be the parent and then all subsequent elements are children of each other in succession;

nested elements

ELEMENT COMPONENTS

Each element has four sides (top, bottom, left and right), and CSS affords designers access to five different properties of each side that can be defined in CSS rules: 1. Height and width apply to the length of the sides of the element a. Height is the length of the left and right sides i. Rule syntax: height: 100px; ii. Possible Values: • Length values • Percentages (proportional to the parent element) • Auto - maximum height needed to display all the content b. Width is the length of the top and bottom sides i. Rule syntax: width: 75px; ii. Possible Values: • Length values • Percentages • Auto - the maximum space to the right before hitting the parent element 2. Margin defines the distance from the element border and other elements a. CSS allows the developer to access all four sides independently or together

• This rule is typically applied to media for print 8. color a. The color property controls various elements in addition to font; Horizontal Rules and form elements are affected by the color property b. Rule syntax: color: red; c Possible Values: i. Color Names [ red, white, etc. ]; ii. Hexadecimal Color Codes [#FFE000]; iii.RGB color codes [rgb(r, g, b): rgb (203,0,255) or rgb (80%, 50%, 30%)]; • RGB values can be percentages or whole numbers between 0 and 255 • Check for Browser Safe Values when designing for the screen 9. decorating text a. This control is used typically to identify or differentiate important text b. Rule syntax: text-decoration: underline; c. Possible Values: i. Underline ii. Overline iii.Line-through iv. Blink v. None

ELEMENT CONTROLS b. Rule syntax: margin: 7px; Rule syntax: margin: 7px 2em 25% 7px; c. CSS allows the designer to set from one to four values for top, bottom, left, right sides of the element respectively: i. 1 value: sets all four sides to the same value ii. 2 values: sets the top/bottom value, and the left/right value iii.3 values: sets the top, left/right, and bottom values iv. 4 values: sets each individually: top, bottom, left and right

4

d. To access one side margin, you can specify using the following rule syntax: i. Rule syntax: margin-top: 10px; ii. Rule syntax: margin-bottom: 7px; iii.Rule syntax: margin-left: 4px; iv. Rule syntax: margin-right: 7px; 3. Border, as the name states, is the perimeter of the element and has its own properties that can be defined; the designer may define the width, style and color for all four sides simultaneously: a. Rule syntax: border: double 7px #FFF999; b. Rule syntax: border: [style] [width] [color];

ELEMENTS CONTROLS (continued)

Border Styles Border Colors Dotted Dashed Solid Double Groove Ridge Inset Outset None Inherit

Border Width

[ color ] - hexadecimal Thin Medium Transparent Thick Inherit [ length value ] Inherit

a. Rule syntax: padding: 7% 8cm 7px 1em; b. Possible Values: i. Length values ii. Percentages - proportional to the parent element iii. Inherit • 1 value: sets all four sides to the same value • 2 values: sets the top/bottom value, and the left/right value • 3 values: sets the top, left/right, and bottom values • 4 values: sets each individually: top, bottom, left and right 5. The Center of the Element contains Content and Background a. Background property allows designers to use images or colors to decorate the background of an element b. Rule syntax: background: white; i. Possible Values; color names, hexadecimal, rgb, or transparent c. Rule syntax: background: url(bg.gif); i. Acceptable image files are jpg, gif, or png, using a complete url to the image file ii. When using image for your background, CSS affords designers more control over how the background image is displayed • Additional rules: background-repeat: no-repeat; a. + no-repeat b. + repeat-x c. + repeat-y d. + repeat - horizontally and vertically • Add background-attachment: fixed; a. + fixed - content scrolls over a fixed background b. + scroll - background scrolls with the content • Add background-position: 8px 9px; a. Length values may be positive or negative and is in relation to the top-left corner of the element; left position first, then top position b. Percentages (horizontal position first, then vertical position) ELEMENT DISPLAY

* Supported across Internet Explorer 4, Netscape 6, Safari1, Opera 3.5, CSS1

Rule syntax: display: inline;

c. Each border attribute can also be controlled independently: i. Rule syntax: border-style: dashed; ii. Rule syntax: border-color: #FFFFFF; iii.Rule syntax: border-width: 7px; iv. Rule syntax: border-top: [width] [style] [color];

1. 2. 3. 4. 5.

v.

+ + +

border-bottom: [width] [style] [color]; border-left: [width] [style] [color]; border-right: [width] [style] [color];

+ + +

border-style: [top] [bottom] [left] [right]; border-width: [top] [bottom] [left] [right]; border-color: [top] [bottom] [left] [right];

• • • •

inline - stops line breaks after an element block - forces line breaks before and after the element none - makes the content invisible list-item - displays a bullet and a line break before and after, with or without the list tag there are other items available but they are not widely supported by IE for Windows

1 value: sets all four sides to the same value 2 values: sets the top/bottom value, and the left/right value 3 values: sets the top, left/right, and bottom values 4 values: sets each individually: top, bottom, left and right

4. Padding defines the distance between the element border and the contents of the element

Positioning Types

1. Rule syntax: position: absolute; 2. Possible Values a. Static: flows content using default layout and cannot be moved b. Relative: inline display, position in relation to its natural position, using the top, left, right, and bottom attributes i. Add top: 7px; c. Absolute: defines the actual position using the top, left, right, and bottom attributes i. Add left: 22px; d. Fixed: (not supported by IE for Windows) the position on the screen remains the same even when the document scrolls e. Add top: 250px; i. Length values - distance between element’s top edge and top edge of the window or parent element ii. Percentages - proportional to the height of the window or parent element

ELEMENT POSITIONING CONTROLS iii.Auto - *if used with absolute, lets the browser control the position; otherwise, the value is zero f. Add left: 38px; i. Length values - the distance between the element’s left edge, and the window or parent element; ii. Percentages - left position relative to the window or parent element’s width; iii.Auto - *if used with absolute, lets the browser control the position; otherwise, the value is zero CSS flexibility allows designers to use both left and top or either one by itself; another feature available in element positioning is to use the bottom and right sides as the determining factors for an element’s position; the elements may be combined with each other, top/right, or bottom/left 5

a. Add right: 22px; i. Length values - the distance between the element’s right edge, and the right edge of the window or parent element ii. Percentages - right position relative to the window or parent element’s width iii.Auto - *if used with absolute, lets the browser control the position; otherwise, the value is zero b. Add bottom: 52px; i. Length values - the distance between the element’s bottom edge, and the bottom edge of the window or parent element ii. Percentages - bottom position relative to the window or parent element’s height iii.Auto - *if used with absolute, lets the browser control the position; otherwise, the value is zero

STACKING OBJECTS

Another property available when using the position rule is the z-index; the z-index can be used to layer or stack elements; the stacking order is a non-decimal value or zero; when elements overlap, the higher z-index will take the top position See images List & Interface Controls

1. + list-style - the rule that grants access to the following attributes a. Attributes: i. Line-style-image ii. List-style-type (image, bullet)* see bullet table iii.List-style-position b. Rule syntax: li{ List-style: url(one.gif) circle inside; } The list-style properties may be defined together or individually 1. + list-style-image url ( one.gif ) - allows developers to use a custom image (jpg, gif, or png) for list item bullets Rule syntax: liststyle-image: url(one.gif);

List-Style_Type Values Dotted Dashed Solid Double Groove Ridge Inset Outset None Inherit

2. + list-style-type - circle - see the table above for possible values Rule syntax: list-style-type; square; 3. +list-stlyle-position - inside - following lines will line up with the bullet a. outside - following lines will line up with the first line of text first letter Rule syntax list-style-position: inside;

BROWSER STANDARDS

CHANGING THE CURSORS

Browser standards were created in an effort to have a common language across multiple browser platforms; while this is true for most, not all features are supported across all browser platforms; below is a list of browsers and the extent of their adherence to CSS Standards:

The image used for the cursor is determined by the browser and as such is accessible using CSS

IE4 - CSS1 IE5+6 - CSS1 (most), CSS2 (most) IE5 - Mac Version CSS1 (all), CSS2 (most) N4 - CSS1 (most) N6 - CSS1, CSS2 Mozilla, Firebird, Camino - CSS1, CSS2 Safari - Mac- CSS1, CSS2 (most) Opera - CSS1, CSS2

Did You Know? The first commercial browser to support CSS was Microsoft's Internet Explorer 3, which was released in August 1996

BROWSER SAFE FONTS Name

Weight-Styles

Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Verdana Webdings

Bold, italic, bold italic Sans-serif Sans-serif Cursive Bold Bold, italic, bold italic Monospace Bold, italic, bold italic Serif Bold, italic, bold italic Sans-serif Bold, italic, bold italic Serif Bold, italic, bold italic Sans-serif Fantasy

Family

Rule syntax: cursor: help; Possible values: Auto: browser’s choice None: no cursor displayed url: location of a graphic to use* not supported across all browsers Name: cursor type name • crosshair • e-resize • hand • help • move • ne-resize • n-resize • nw-resize • pointer • se-resize • s-resize • sw-resize • text • wait • w-resize

Customer Hotline # 1.800.230.9522

PRICE U.S. $5.95 CAN $8.95 All rights reserved. No part of this publication may be reproduced or transmitted in any form, or by any means, electronic or mechanical, including photocopy, recording, or any information storage and retrieval system, without written permission from the publisher. © 2006 BarCharts, Inc. Boca Raton, FL 1008

http://www.developer.apple.com/fonts http://www.microsoft.com/typography/fonts 6

DEBUGGING CODE 1. Make sure the property you are trying to define is supported by the browser you are using to test 2. Check for typing errors; CSS is not forgiving with spelling errors 3. Not all properties are available to all elements; verify that the property is available 4. CSS definitions can be neutralized by incorrect curly braces ( { ) 5. Always check to make sure that HTML container tags are properly closed 6. Check for conflicting, overriding, and inheritance for elements 7. Delete the definition and try typing the definition again 8. Validate your code using W3C: http://www.jigsaw.W3.org/css-validator/

Did You Know? CSS started in 1994; it was developed to help create a newspaper-like layout for a Web page

free downloads &

hundreds of titles at

quickstudy.com ISBN-13: 978-142320805-1 ISBN-10: 142320805-6