1 introduction to web application introduction to cascading style sheet

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

<font size=“7”>Hello</font>

<div style=“font-size:18pt”>Hello</div>

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…

• http://www.macromedia.com/devnet/mx/dreamweaver/articles/why_css.html

8

Evolution of CSS

• 1996 W3C Bert Bos&Hakon Lie CSS Level1

• 1998 CSS2

• 2001 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

Property Property value

Colon

10

• Relative units:– em height of letter m– en height of letter n– ex height of letter x– px pixels– % percent

Units

11

Units

• Absolute units:– in inch

– cm centimeter

– mm millimeter

– pt point(1pt=1/72inch)

– pc 12points(1pc=12pt)

12

Inline Styles

• Declare an individual element’s format– Attribute style– CSS property

• Followed by a colon and a value

– Example:• <p style=“font-size: 20pt”> hello

world</p>• <p style=“font-size: 20pt; background-

color: #8000ff; color:red”> hello world</p>

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<html>

<head><style type="text/css">

p {font-size: 14 pt; color:red}.special {color: blue}

</style></head><body>

<p>Hello World!</p><h1 class="special">School of Software</h1>

</body></html>

17

Conflicting Styles

• Inheritance– Descendant’s properties have greater

specificity than ancestor’s properties

18

Example of Conflicting Styles<html><head>

<style type = "text/css">li em {color: red;

font-weight: bold}ul {margine-left:75pt}ul ul {text-decoration: underline;

margine-left:15pt}</style>

</head><body>

<ul><li>Milk</li><ul><li>White bread</li></ul><li> Pizza <em> with mushrooms</em></li>

</ul></body></html>

20

Example of Conflicting Styles (cont.)<html>

<head>

<style type = "text/css">a.nodec {text-decoration: none;

font-size: 18pt}a:hover {text-decoration:

underline; color: red; background-color:

#ccffcc;}

</style></head><body>

<a class="nodec" href="#"> hello world</a></body>

</html>

noneoverline

line-throughunderline

blink

noneoverline

line-throughunderline

blink

22

Linking External Style Sheets

• External style sheets– Can provide uniform look and feel to entire site

• Example:<html>

<head><link rel=“stylesheet” type=“text/css”

href=“styles.css”></head><body></body>

</html>

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<html><head><title>Absolute Positioning</title></head> <body>

<p><img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First

positioned image" /></p> <p style = "position: absolute;

top: 50px; left: 50px; z-index: 3; font-size: 20pt">Positioned Text</p>

<p><img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index:

2" alt = "Second positioned image" /></p>

</body></html>

27

Example of Position (cont.)

<html><head> <title>Relative Positioning</title>

<style type = "text/css"> 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 } </style> </head>

28

<body> <p>The text at the end of this sentence <span class = "super">is in superscript</span>.

</p> <p>The text at the end of this sentence <span class = "sub">is in subscript</span>. </p> <p>The text at the end of this sentence <span class = "shiftleft">is shifted left</span>

. </p> <p>The text at the end of this sentence <span class = "shiftright">is shifted right</span>.

</p> </body></html>

29

<span class = "super">is in superscript</span>

<span class = "super">is in superscript</span>

<span class = "sub">is in subscript</span>.

<span class = "sub">is in subscript</span>.

<span class = "shiftleft">is shifted left</span>

<span class = "shiftleft">is shifted left</span>

<span class = "shiftright">is shifted right</span>.

<span class = "shiftright">is shifted right</span>.

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<html> <head> <title>Background Images</title> <style type = "text/css"> 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 } </style> </head>

32

<body>

<p>

This example uses the background-image, background-position and background-attachment styles to place the <span class = "dark">Deitel

& Associates, Inc.</span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window.

</p>

</body>

</html>

34

Element Dimensions

• CSS rules can specify the actual dimensions of each page element

35

Example of Element Dimension P 158

<html><head>

<title>Box Dimensions</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em } </style> </head> <body> <div style = "width: 20%"></div> <div style = "width: 80%; text-align: center"/> <div style = "width: 20%; height: 30%; overflow: scroll“/> </body></html>

37

Text Flow and the Box Model • Floating

– Move an element to one side of the screen

38

Text flow p160

<html> <head> <title>Flowing Text Around Floating Elements</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em; font-size: 1.5em; width: 50% } p { text-align: justify } </style> </head> <body>

<p></p> <div style = "text-align: center"></div> <div style = "float: right; margin: .5em; text-align: right"></div> <div style = "float: right; padding: .5em; text-align: right"></div> <p></p> <p style = "clear: right"></p>

</body></html>

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

Content

Margin

Border

Padding

Fig. 6.13 Box model for block-level elements.

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– example

47

Boxes and Layout

• margin– margin-top, margin-bottom, margin-right,

margin-left– example

• padding– padding-top, padding-bottom, padding-right,

padding-left– example

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

– example

50

Fonts and Texts

• Generic Fonts:– serif Times New Roman– sans-serif Arial– cursive Script– fantasy Comic– monospace Courier New– example

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

– example

55

Lists

• 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

• 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.

– example

57

Hypertext

• 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

– example

58

Position• Absolute position

– position=absolute– example

• Relative position– position=relative– example

59

Position

• Layer– z-index

• Sets or retrieves the stacking order of positioned objects

• top, bottom, left, right

• other examples

60

Position• Floating

– floating– example

61

Filters

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

62

Filters

• Filters:– 模糊 : blur example– 弦波 : wave example– … example

63

Filters

• Transition– Transition event happens when visibility

property value change from hidden to visible– example1– example2

64

Web Resources • http://www.w3.org/TR/css3-roadmap

• http://www.ddj.com/webreview/style• http://tech.irt.org/articles/css.htm

1 introduction to web application introduction to cascading style sheet

Documents