1. All About StyleSheets David Lash Chapter 4 Cascading Style Sheets

2. David Lash 2 What we are talking about… zWe will look at: yWhat are CSS yAdvantages and disadvantages yTypes of CSS xLook at embedded CSS xLook at external CSS yUsing Selectors yUsing Classes yAll About Properties xA big properties example

3. David Lash 3 What are cascade style sheets? zLong before HTML was something called SGML yA mark-up language that was xOutput format independent – could generate word, pdf, html, etc output xFormat style independent – size, color, font face was controlled separate from actual document (usually centralized). yBottom line – document authors write content NOT style info (the editor decides how it should look). xHTML mixes these 2 – (within HTML you specify content and style stuff.) ySo W3C decided to create cascade style sheets to allow authors to separate display format from document content.W3C Note: Just FYI, this is not part of PHP, but sort of a add-on, built as part of HTML

4. David Lash Cascading Style Sheets! zThe basic idea: Separate style information from text content zWhat do they do? ySpecify a common set of styles and spacing instructions for elements on a page. yE.g., a web site with 5 different pages, might use style sheets to specify things like: xCommon size for headers, xdefault font type, x background images or colors, xmargin sizes and xand other page styles.

5. David Lash 5 CSS – Advantages/disadvantages zSome advantages of using CSS: yControl - Offers greater page layout controls for all pages at a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc. yStyle Separate From Document Structure ySmaller Size? - Can decrease document size - E.g., (reducing the number of FONT tags) yMaintainability - Easier site maintenance zDisadvantages: y Browser Support - Not supported in browsers earlier than I.E. 3.0 or Netscape 4.0. yBrowser Implementation - IE and Netscape implement the standard differently. Netscape and IE implement many elements slightly different so need testing with both browsers.

6. David Lash 6 What we are talking about… zWe will look at: yWhat are CSS yAdvantages and disadvantages yTypes of CSS xLook at embedded CSS xLook at external CSS yUsing Selectors yUsing Classes yAll About Properties xA big properties example

7. David Lash 7 Types of Style Sheets zStyle sheets are typically used as a separate file. yThen every page that wants that “style” links to the sheet. zStill, style sheets can be used in 3 different ways: yExternal Styles - Collect the style information in an external file and link them into all the needed files at your site. xFor example, would provide a file that has all style information (like color of headers) and include or link that file into all pages of your site. xWould specify the style for a particular line of text in the document. yEmbedded Styles - Embed the style sheet on the top of the document. xFor example, would specify the default color for all items in this web page. yInline Styles - Put the style information in-line the text of the document. xWould specify the style for a particular line of text in the document. (highest precedence). Note: Its called cascading style sheets because inline style specs Override, embedded style specs, embedded overrides external.

8. David Lash 8 Basic Embedded example zCould place the following at the top of HTML document: H1 {Color: red; font-size: 24pt; } H2 { Color: green; font-size: 12pt; } This is a sample web Page with emphasis added Notice use of 2 selectors with general syntax: selector:{property:value} Note the “style” tag Selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM. property:value - identifies a stylistic property to be defined with some value. Includes things like color: red, font-site: 12pt, font-face Verdana. http://condor.depaul.edu/~dlash/website/interesting.html

9. David Lash 9 External (or linked) Style Sheets zUse external file with style information yVery powerful can link css file to one or more HTML documents that want that "style" yHere is an example: http://www.depaul.edu/~dlash/website/externalExample.html http://www.depaul.edu/~dlash/website/externalExample.html y The magic line to include the link tag in the... is:  yHere is entire contents of file stylesheet.css H1 { Color: red; font-size: 36pt; } H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; }

10. David Lash 10 What we are talking about… zWe will look at: yWhat are CSS yAdvantages and disadvantages yTypes of CSS xLook at embedded CSS xLook at external CSS yUsing Selectors yUsing Classes yAll About Properties xA big properties example

11. David Lash 11 Using CSS Selectors zType Selectors – Can use lots of different HTML elements: zFor example, H1 { Color: red; font-size: 36pt; } H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; } EM, I { color: green; } B { color: red; font-size: 18pt; } H1 {Color: red; font-size: 24pt; H2 { Color: green; font-size: 12pt; } EM { Color: red; } http://condor.depaul.edu/~dlash/website/externalExample2.html

12. David Lash 12 Classes In CSS zWe already have a way to create a style for HTML elements yHandles situations like all H1 is big and green, or italic items are blue zHow do you override these for some items? yCan defined special classes xFor example can occasionally make some elements look different than others? zE.g., suppose this is in a file called stylesheet3.css EM, I { color: green; } B { color: red; font-size: 18pt } H1.important {font: 36pt "Comic Sans"; Color: Blue} H1.normal {font: 24pt "Arial"; Color: red} The first part denotes the HTML element. The second part denotes the “name” or label for the element. Defines the element and property to set.

13. David Lash 13 Using the class ….  Once linked to this style sheet. Have to different ways to create H1 elements: Check It Out! This is an important header …  See example at http://condor.depaul.edu/~dlash/website/ext ernalExample3.html http://condor.depaul.edu/~dlash/website/ext ernalExample3.html

14. David Lash 14 Another way to use style classes zCan also create a generalize class that can be included anywhere and is not tag specific.  Use the DIV command. E.g., inside the stylesheet: DIV.smallprint { font-size: 8pt; color: teal } zThen inside HTML document could do: zFor example http://condor.depaul.edu/~dlash/website/externalExample4.html http://condor.depaul.edu/~dlash/website/externalExample4.html

15. David Lash 15 Selectors - Special Built-in Classes zThere is a set of classes that are special built- in. One set is used within the tag.  For example here is a style sheet: A:link { color: red } A:visited { color: maroon } A:active { color: lime } zHere is an example http://condor.depaul.edu/~dlash/website/externalExample5.html. http://condor.depaul.edu/~dlash/website/externalExample5.html.

16. David Lash 16 What we are talking about… zWe will look at: yWhat are CSS yAdvantages and disadvantages yTypes of CSS xLook at embedded CSS xLook at external CSS yUsing Selectors yUsing Classes yAll About Properties xA big properties example

17. David Lash 17 Properties - font-family zfont-family - specifies a family of fonts to use zValues: list of fonts to use zApplies to: all elements zExample: P { font-family: Veranda, sans-serif } zNotes: y There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list 1.sans-serif (e.g., halvetica or arial) 2.monospaces (e.g., courier or new courier) 3.cursive (e.g., Zapf-chancery) 4.serif (e.g., Times) 5.fantasy (e.g., western, impact, or some other display oriented font)

18. David Lash 18 Properties - font-style zfont-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.) yValues: normal | italic | oblique yApplies to: all elements yExample: H1 { font-style: italic } yNotes: Bold is part of the font-weight not font- style.

19. David Lash 19 Properties - font-weight zfont-weight - specifies the weight or boldness of the font to use. zValues: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 zApplies to: all elements zExample: STRONG { font-weight: 700 } zNotes: Allows either a descriptive tag (normal, bold, bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature

20. David Lash 20 Properties - font-size zfont-size - specifies a size of font to use zValues: absolute size | relative size | length percentage zApplies to: all elements yAs can be seen from above can be specified 3 different ways: xAbsolute size Values: xx-small | x-small | small | medium | large | x-large | xx-large Example: H1 { font-size: x-large } Notes: These are descriptive terms that reference a table of sizes kept in the browser. xRelative Sizes Values: larger | smaller Example: H1 { font-size: larger } Notes: specifies size relative to the parent object. xLength Sizes Values: number + em | ex | px | pc | mm | cm | in Example: H1 { font-size: 24pt}

21. David Lash 21 Font-size cont - Length sizes can be specified differently … CodeUnitDescription pxPixelNumber of pixels relative to the monitor resolution ptPointA unit of measuring type (from publishing) equal to 72 pts = 1 inch pcPicaA unit of measurement from publishing. 1 = pts or 1/6 inch emEmA relative measurement equal the with of the capital M in the current font exExA relative measurement for the height of the width of the letter X in the current font. inInchesMeasures in inches mmMillimeterMeasures in millimeters cmCentimeterMeasures in centimeter

22. David Lash 22 Properties - font-color zcolor - specifies the color of the element. yValues: color_name | RGB Hex Value | RGB New Values yApplies to: all element yNotes: As can be seen from above, specify 1 or 3 ways xcolor_name: Use 1 of the 16 color names. values - aqua, gray, navy, silver,... Example: –STRONG { font-style: italic; color: purple } xRGB values: Use hex value that fill in the RGB values. values - 000000,..., FFFFFF Example: –STRONG { font-style: italic; color: #FF00FF } xRGB New Values values - rgb(255,0, 255) or rgb(100%, 0%, 100%) Example: –STRONG { font-style: italic; color: rgb(255, 0, 255) } –STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }

23. David Lash 23 Properties – line-height zline-height - sets height of lines. zValues: normal | number | length | percentage zApplies to: all element zNotes: As can be seen from above, specify 1 or 3 ways zExamples: P ( line-height: 1.2 } P { line-height: 1.2em } P { line-height: 120% }

24. David Lash 24 Properties – text-indent ztext-indent - specifies the amount of indentation from the far left. zValues: length | percentage zApplies to: block level elements zNotes: As can be seen from above, specify length or percent of normal text yExamples: P.first { text-indent: 3em }

25. David Lash 25 Properties – background color zbackground-color - specify the color or RGB value for background color. zValues: color name | RGB value zApplies to: all element zNotes: Sets the background color of the element. yExamples: P.warning { background-color: red } STRONG { font-weight: 900; background-color: silver }

26. David Lash 26 Properties – background color zbackground-image - specify the background image for an element. zValues: URL zApplies to: body tag zNotes: Sets the background image for element. yExamples: BODY { background-image: URL(back.gif) } Clearly this means with a CSS with this one tag, I can link into all my HTML documents and get common background.

27. David Lash 27 A large example zSuppose you placed the following in a file called stylesheet6.css P.first { text-indent: 12pt } H1.title { text-transform: uppercase } H2 { font-size: 33pt } H1 { color: red } EM { font-size: 18pt; font-style: Times, serif; color: FF00FF } STRONG { font-weight: 900; background-color: silver } BODY { background-color: yellow } http://condor.depaul.edu/~dlash/website/externalExample6.html

28. David Lash 28 Summary … zWe will look at: yWhat are CSS yAdvantages and disadvantages yTypes of CSS xLook at embedded CSS xLook at external CSS yUsing Selectors yUsing Classes yAll About Properties xA big properties example