Introduction to Cascading Style Sheets (CSS) allow the author of a - - PowerPoint PPT Presentation

Introduction to

 Cascading Style Sheets (CSS) allow the

author of a web page to specify the presentation of elements separately from the structure of the document

 The inline style allows you to declare a style

for an individual element by using the style attribute in the element’s start tag

 Each CSS property is followed by a colon and

the value of the attribute, while multiple property declarations are separated by a semicolon

 Inline Style

• <p style=“font-size: 20pt; color: #6666ff”></p>

 Inline styles do not truly separate presentation from

content.

 Embedded Style Sheet

• <style>

p { font-size: 12pt; color: #003322 } .special { color: #6666ff; text-decoration: underline; } </style>

 Class attribute  To apply rules to multiple elements, separate

the elements with commas in the style sheet

 Pseudoclasses

• The hover pseudoclass is activated when the

user moves the mouse cursor over an element

 To apply rules to multiple elements, separate

the elements with commas in the style sheet

 To apply rules to only a certain type of

element that is a child of another type, separate the element names with spaces

 External style sheets are separate documents

that contain only CSS rules

 External linking of style sheets can create a

uniform look for a website, since separate pages can all use the same styles

 Modifying a single style-sheet file makes

changes to styles across an entire website

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

 Reusing external style sheets reduces load

time and bandwidthusage on a server, since the style sheet can be downloaded once, stored by the web browser, and applied to all pages on a website.

 Normally, elements are positioned on the page in

the order that they appear in the XHTML document

 Absolute  Relative  z-index

 Absolute

• Specifying an element’s position as absolute

removes it from the normal flow of elements on the page and positions it according to distance from the top, left, right or bottom margin of its parent element

• It will be relative to the next parent element with

relative (or absolute) positioning

 Relative  z-index

 Absolute  Relative

• Relative positioning keeps elements in the general

flow on the page and offsets them by the specified top, left, right or bottom value relative to itself

• it introduces the ability to use z-index on that

element

 z-index

 Absolute  Relative  z-index

 Absolute  Relative  z-index

 Absolute  Relative  z-index

• The z-index property allows a developer to layer
• verlapping elements
• Elements that have higher z-index values are

displayed in front of elements with lower z-index values

 Inline-level elements

• Do not change the flow of the document
• Examples:

▪ img ▪ a ▪ em ▪ strong ▪ span

▪ Grouping element ▪ Does not apply any formatting to its contents ▪ Creates a container for CSS rules or id attributes to be applied to a section

 Block-level elements

• Displayed on their own line
• Have virtual boxes around them
• Examples:

▪ p ▪ all headings (h1 through h6) ▪ div

▪ A grouping element like span

 CSS can control the backgrounds of block-

level elements by adding:

• Colors
• Images

 Property background-imagespecifies the

URL of the image

• Use the format url(fileLocation)

 The property background-position

places the image on the page

• Use the values top, bottom, center, left

and right individually or in combination for vertical and horizontal positioning

• You can also position by specifying horizontal

then vertical distances from the top-left corner of the screen

 The background-repeatproperty

controls the tiling of the background image

• Setting the tiling to no-repeat displays one

copy of the background image on screen

• Setting to repeat (the default) tiles the image

vertically and horizontally

• Setting to repeat-x tiles the image only

horizontally

• Setting to repeat-y tile the image only vertically

 The property setting background-

attachment: fixed fixes the image in the position specified by background-

• position. Scrolling the browser window will

not move the image from its set position. The default value, scroll, moves the image as the user scrolls the window

 The dimensions of elements on a page can be

set with CSS by using properties height and width

• Their values can be relative or absolute

 Text in an element can be centered using

text-align: center; other values for the text-align property are left and right

 The dimensions of elements on a page can be set with CSS

by using properties height and width

• Their values can be relative or absolute

 One problem with setting both vertical and horizontal

dimensions of an element is that the content might sometimes exceed the set boundaries, in which case the element must be made large enough for all the content to

• fit. However, a developer can set the overflow property to

scroll, which adds scroll bars if the text overflows the boundaries set for it



Block-level XHTML elements have a virtual box drawn around them based on the box model



When the browser renders using the box model, each element is surrounded by:

• Padding

▪ The padding property determines the distance between the content inside an element and the edge of the element ▪ Padding be set for each side of the box by using padding-top, padding- right, padding-left and padding-bottom

• A margin

▪ Determines the distance between the element’s edge and any outside text ▪ Margins for individual sides of an element can be specified by using margin-top, margin-right, margin-left and margin-bottom

• A border

 The border is controlled using the properties:

• border-width

▪ May be set to any of the CSS lengths or to the predefined value of thin, medium or thick

• border-color

▪ Sets the color used for the border

• border-style

▪ Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and

• utset

 CSS media types allow a programmer to

decide what a page should look like depending on the kind of media being used to display the page

 The most common media type for a web

page is the screen media type, which is a standard computer screen

 A block of styles that applies to all media

types is declared by @media all and enclosed in curly braces

 To create a block of styles that apply to a

single media type such as print, use @media printand enclose the style rules in curly braces

 Other media types in CSS 2 include:

• handheld

▪ Designed for mobile Internet devices

• braille

▪ For machines that can read or print web pages in braille

• aural

▪ Allow the programmer to give a speech-synthesizing web browser more information about the content of the web page

• print

▪ Affects a web page’s appearance when it is printed

 Absolute Lengths  Font Relative Lengths  Viewport Percentage Lengths

 Absolute Lengths

• px

Pixels

• in

Inches 1in == 96px

• cm

Centimeters 1cm == 37.8px

• mm

Milimeters

1mm == 0.1cm == 3.78px

 Font Relative Lengths

 Absolute Lengths  Font Relative Lengths

• em, Originally a typographic measurement based
• n the current typefaces capital letter "M“
• 1 em == 16px == 0.17in == 12pt == 4.2mm

 Absolute Lengths  Font Relative Lengths

• pt

1pt == 1.7in

35

 The :hoverpseudoclass is used to apply

styles to an element when the mouse cursor is over it

 The displayproperty allows a programmer

to decide if an element is displayed as a block element, inline element, or is not rendered at all (none)

36

1 <?xml xml vers version =

• n = "1.0

1.0" " enco encodin ding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

• - Fig.
• ig. 5.14:

.14: dro dropdown down.htm .html --

• ->

6 <! <!--

• - CSS d

SS drop

• p-down
• wn menu.
• enu. --
• ->

7 <html tml xml xmlns = = "http http://ww //www.w3 w.w3.org/

• rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e> 10 Drop

• p-Down
• wn Menu

enu 11 </ti </title> le> 12 <sty <style ty e type = pe = "tex "text/cs t/css"> 13 body dy { { font font-fami amily: ly: aria arial, sa , sans ns-serif rif } 14 div.me v.menu nu { { font font-weig eight: ht: bold bold; 15 colo color: r: white ite; 16 bord border: er: 2px s px solid

• lid #225

#225599 599; 17 text text-alig lign: n: cente enter; 18 widt width: h: 10em em; 19 back backgrou ground-colo color: r: #225 #225599 599 } 20 div.me v.menu:h nu:hover ver a { { disp display: lay: bloc block } 21 div.me v.menu a nu a { { disp display: lay: none none; 22 bord border er-top: p: 2px s px solid lid #225 #225599 99; 23 back backgrou ground-colo color: r: wh white ite; 24 widt width: h: 10em em; 25 text text-deco ecorati ration:

• n: none
• ne;

26 colo color: r: black ack } 27 div.me v.menu a nu a:hove hover { { back backgrou ground-colo color: r: #dfeef feeff } 28 </st </style> le> 29 </hea /head> d> 30 <body body>

Sets anchor elements in a menu div to be displayed as block-level when the menu is moused-over Prevents the browser from rendering the links inside the menu div Sets anchor elements in a menu div to have a light- blue background when they are moused-over

37

31 <div <div clas class = s = "menu menu">Men Menu 32 <a hre href = f = "#" #">Home

• me</a>

a> 33 <a hre href = f = "#" #">News ews</a> a> 34 <a hre href = f = "#" #">Artic rticles es</a> </a> 35 <a hre href = f = "#" #">Blog log</a> a> 36 <a hre href = f = "#" #">Conta

• ntact</a>

/a> 37 </di </div> 38 </b /body>

• dy>

39 </html html>