1 Introduction to Web Application Introduction to Cascading Style Sheet

2 Topics Introduction Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets Positioning Elements Element Dimensions Text Flow and the Box Model User Style Sheets

3 Objectives In this lesson, you will learn: –To control the appearance of a Web site by creating style sheets. –To use a style sheet to give all the pages of a Web site the same look and feel. –To use the class attribute to apply styles. –To specify the precise font, size, color and other properties of displayed text. –To specify element backgrounds and colors. –To understand the box model and how to control the margins, borders and padding. –To use style sheets to separate presentation from content.

4 Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation Relationship with HTML

5 Different between HTML tags and CSS Hello

6 Ways to Change HTML Default Presentation Presentation Elements or Properties –Font, bgcolor, etc. Using some Elements to control the page layout –Table, img, etc. Cascading style Sheets (CSS) !!

7 Why CSS? HTML is primarily concerned with content, rather than style Power, Flexibility, Rendering, Accessibility … dreamweaver/articles/why_css.html

8 Evolution of CSS 1996 W3C Bert Bos&Hakon Lie CSS Level CSS CSS Mobile Profile Now CSS2.1 CSS3

9 CSS Grammar p {font-size: 12pt; font-style: italic; color: green} Selector Property list separated by semicolons PropertyProperty value Colon

10 Relative units: –emheight of letter m –enheight of letter n –exheight of letter x –pxpixels –%percent Units

11 Units Absolute units: –ininch –cmcentimeter –mmmillimeter –ptpoint(1pt=1/72inch) –pc12points(1pc=12pt)

12 Inline Styles Declare an individual element’s format –Attribute style –CSS property Followed by a colon and a value –Example: hello world

13

14 Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head section –Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content –Property background-color Specifies the background color –Property font-family Specifies the name of the font to use –Property font-size Specifies a 14-point font

15 Example of Embedded CSS p{font-size: 14 pt; color:red}.special{color: blue} Hello World! School of Software

16

17 Conflicting Styles Inheritance –Descendant’s properties have greater specificity than ancestor’s properties

18 Example of Conflicting Styles li em {color: red; font-weight: bold} ul{margine-left:75pt} ul ul{text-decoration: underline; margine-left:15pt} Milk White bread Pizza with mushrooms

19

20 Example of Conflicting Styles (cont.) a.nodec{text-decoration: none; font-size: 18pt} a:hover{text-decoration: underline; color: red; background-color: #ccffcc; } hello world none overline line-through underline blink none overline line-through underline blink

21

22 Linking External Style Sheets External style sheets –Can provide uniform look and feel to entire site Example:

23 Content of styles.css /* An external stylesheet */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left:.5cm }

24 Positioning Elements Absolute positioning –z-index attribute Layer overlapping elements properly Relative positioning –Elements are positioned relative to other elements

25 Example of Position Absolute Positioning <img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image" /> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">Positioned Text <img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image" />

26

27 Example of Position (cont.) Relative Positioning p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size:.6em; height: 1em }.super { position: relative; top: -1ex }.sub { position: relative; bottom: -1ex }.shiftleft { position: relative; left: -1ex }.shiftright { position: relative; right: -1ex }

28 The text at the end of this sentence is in superscript. The text at the end of this sentence is in subscript. The text at the end of this sentence is shifted left. The text at the end of this sentence is shifted right.

29 is in superscript is in subscript. is shifted left is shifted right.

30 Backgrounds background-image –Specifies the image URL background-position –Places the image on the page background-repeat –Controls the tiling of the background image background-attachment –fixed –scroll font-weight –Specify the “boldness” of text

31 Example of Backgrounds Background Images body { background-image: url(logo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; }.dark { font-weight: bold }

32 This example uses the background-image, background-position and background-attachment styles to place the Deitel & Associates, Inc. logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window.

33

34 Element Dimensions CSS rules can specify the actual dimensions of each page element

35 Example of Element Dimension P 158 Box Dimensions div { background-color: #ffccff; margin-bottom:.5em }

36

37 Text Flow and the Box Model Floating –Move an element to one side of the screen

38 Text flow p160 Flowing Text Around Floating Elements div { background-color: #ffccff; margin-bottom:.5em; font-size: 1.5em; width: 50% } p { text-align: justify }

39

40 Text Flow and the Box Model Box model –Margins margin-top, margin-right, margin-left, margin-bottom –Padding padding-top, padding-right, padding-left, and padding-bottom –Border border-width –thin, medium, thick border-color –Sets the color border-style –none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

41 Text Flow and the Box Model Fig. 6.13Box model for block-level elements.

42

43

44 User Style Sheets Format pages based on preferences User style sheets are not linked to a document; Rather, they are set in the browser’s options

45 References

46 Boxes and Layout border –border Group property, the same below –border-color –border-width –border-style –exampleexample

47 Boxes and Layout margin –margin-top, margin-bottom, margin-right, margin-left –exampleexample padding –padding-top, padding-bottom, padding-right, padding-left –exampleexample

48 Fonts and Texts Fonts –font: Group property –font-family Sets or retrieves the name of the font used for text in the object –font-size Sets or retrieves a value that indicates the font size used for text in the object –font-style Sets or retrieves the font style of the object as italic, normal, or oblique

49 Fonts and Texts Fonts –font-variant Sets or retrieves the font style of the object as italic, normal, or oblique –font-weight Sets or retrieves the weight of the font of the object –exampleexample

50 Fonts and Texts Generic Fonts: –serifTimes New Roman –sans-serifArial –cursiveScript –fantasyComic –monospaceCourier New –exampleexample

51 Fonts and Texts Texts: –letter-spacing Sets or retrieves the amount of additional space between letters in the object –word-spacing Sets or retrieves the amount of additional space between words in the object –white-space Sets or retrieves a value that indicates whether lines are automatically broken inside the object

52 Fonts and Texts Texts: –line-height Sets or retrieves the distance between lines in the object –text-align Sets or retrieves whether the text in the object is left- aligned, right-aligned, centered, or justified –vertical-align Sets or retrieves the vertical alignment of the object

53 Fonts and Texts Texts –text-decoration Sets or retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations –text-indent Sets or retrieves the indentation of the first line of text in the object

54 Fonts and Texts Texts –text-transform Sets or retrieves the rendering of the text in the object –exampleexample

55 Lists –list-style Sets or retrieves up to three separate listStyle properties of the object –list-style-image Sets or retrieves up to three separate listStyle properties of the object

56 Lists –list-style-position Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object. –list-style-type Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object. –exampleexample

57 Hypertext –a:link Sets the style of an a element when the link has not been visited recently. –a:visited Sets the style of an a element when the link has been visited recently –a:active Sets the style of an a element when the link is engaged or active –exampleexample

58 Position Absolute position –position=absolute –exampleexample Relative position –position=relative –exampleexample

59 Position Layer –z-index Sets or retrieves the stacking order of positioned objects top, bottom, left, right other examplesexamples

60 Position Floating –floating –exampleexample

61 Filters Filters: – 翻转 : flipv fliph exampleexample – 透明 : chroma exampleexample – 反转 : invert – 灰度 : gray –x 光 : xray exampleexample – 阴影 : shadow exampleexample – 发光 : glow exampleexample – 渐变 : alpha exampleexample

62 Filters Filters: – 模糊 : blur exampleexample – 弦波 : wave exampleexample –… exampleexample

63 Filters Transition –Transition event happens when visibility property value change from hidden to visible –example1example1 –example2example2

64 Web Resources