Scribd
Upload
79 views

Dynamic HTML: Cascading Style Sheets (CSS)

The document discusses Cascading Style Sheets (CSS) which are used to specify styles for HTML elements independently of the HTML markup. CSS allows separation of document structure (HTML) from presentation (styles like colors and fonts). CSS rules can be defined inline, internally in the <style> element, or externally in a .css file and linked via the <link> tag. CSS selectors like id and class are used to target specific elements. When multiple conflicting styles apply, the styles cascade with author styles having precedence over user styles.

Uploaded by

Uday Teja
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
79 views

Dynamic HTML: Cascading Style Sheets (CSS)

The document discusses Cascading Style Sheets (CSS) which are used to specify styles for HTML elements independently of the HTML markup. CSS allows separation of document structure (HTML) from presentation (styles like colors and fonts). CSS rules can be defined inline, internally in the <style> element, or externally in a .css file and linked via the <link> tag. CSS selectors like id and class are used to target specific elements. When multiple conflicting styles apply, the styles cascade with author styles having precedence over user styles.

Uploaded by

Uday Teja
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 66

Dynamic HTML: Cascading Style Sheets (CSS)

Outline 14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 14.9 14.10 Introduction Inline Styles Creating Style Sheets with the STYLE Element Conflicting Styles Linking External Style Sheets Positioning Elements Backgrounds Element Dimensions Text Flow and the Box Model User Style Sheets

2000 Deitel & Associates, Inc. All rights reserved.

Introduction
Cascading Style Sheets (CSS)
Specify the style of your page elements Spacing, margins, etc.

Separate from the structure of your document


Section headers, body text, links, etc.

Separation of structure from content


Greater manageability Easier to change style of document

2000 Deitel & Associates, Inc. All rights reserved.

CSS Syntax CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed.

2000 Deitel & Associates, Inc. All rights reserved.

CSS Example

EX:1 p {color:red;text-align:center;} EX :2 p { color:red; text-align:center; }

2000 Deitel & Associates, Inc. All rights reserved.

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

2000 Deitel & Associates, Inc. All rights reserved.

Styles of Documents
Inline Style Sheet
-Apply to the content of a single tag.

Internal Style Sheet


-Apply to the whole body of the document. External Style Sheet -Apply to the bodies of any number of documents.
2000 Deitel & Associates, Inc. All rights reserved.

14.2 Inline Styles Inline styles


Individual elements style declared using the STYLE attribute Each CSS property followed by a colon and the value of that attribute Multiple properties separated by semicolons
<P STYLE = font-size: 20 pt; color: #0000FF>

Inline styles override any other styles

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML>

Outline

3
4<!-- Fig. 14.1: inline.html --> 5<!-- Using inline styles -->

6
7<HEAD><TITLE>Inline Styles</TITLE></HEAD> 8 9<BODY> 10 11 <P>Here is some text</P> 12 13 <!-- The STYLE attribute allows you to declare inline -->

14 <!-- styles. Separate multiple styles with a semicolon. --> 15 <P STYLE = "font-size: 20pt">Here is some more text</P> 16 <P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P> 17

18 </BODY>
19 </HTML> 2000 Deitel & Associates, Inc. All rights reserved.

Inline styles

2000 Deitel & Associates, Inc. All rights reserved.

2.Internal Style Sheet


<html> <head> <style type=text/css> h1 { color:pink; text-align:center; font-size:26; } </style> </head> <body> <h1>It is a Internal style sheet</h1> <h1>this is a cascading style sheet</h1> </body> </html>

2000 Deitel & Associates, Inc. All rights reserved.

3.Linking External Style Sheets External linking


Separate pages can all use same style sheet Only modify a single file to change styles across your site

LINK element
Specifies a relationship (REL attribute) between current document and another document
<LINK REL = stylesheet TYPE = text/css HREF = styles.css>

LINK element can only be placed in header Style sheets are reusable
2000 Deitel & Associates, Inc. All rights reserved.

External Style Sheet


The HTML file below links to an external style sheet with the <link> tag: <html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
2000 Deitel & Associates, Inc. All rights reserved.

ex1.css This is the style sheet file (ex1.css): body { background-color:yellow; } h1 { font-size:36pt; } h2 { color:blue; } p { margin-left:50px; }

2000 Deitel & Associates, Inc. All rights reserved.

14.3 Creating Style Sheets with the STYLE Element

Style sheet in header section


Begins with <STYLE TYPE = text/css>
Styles placed here apply to the whole document TYPE attribute specifies the MIME type MIME is a standard for specifying the format of content
Other MIME types include text/html, image/gif and text/javascript

Without style sheets


Browser completely controls the look and feel of Web pages

With style sheets


Designer can specify the look and feel of Web pages

2000 Deitel & Associates, Inc. All rights reserved.

14.3 Creating Style Sheets with the STYLE Element (II)

Declare CSS rules within STYLE element


Each rule body begins and ends with a curly brace ({ and }) Class declarations are preceded with a period and applied to elements only of that specific class Each property is followed by a colon and the value of the property Multiple properties are separated by semicolons

2000 Deitel & Associates, Inc. All rights reserved.

CSS Id & Class


The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":

2000 Deitel & Associates, Inc. All rights reserved.

<html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

CSS Id:program

2000 Deitel & Associates, Inc. All rights reserved.

CSS Class

class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned:

2000 Deitel & Associates, Inc. All rights reserved.

CSS Class Selector


<html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>

2000 Deitel & Associates, Inc. All rights reserved.

CSS Class Selector


<html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html>

2000 Deitel & Associates, Inc. All rights reserved.

Conflicting Styles text-decoration property


Applies decorations to text within an element none overline line-through blink
Browsers are not required to support blink

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
2000 Deitel & Associates, Inc. All rights reserved.

Conflicting Styles
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Text Indentation
-The text-indentation property is used to specify the indentation of the first line of a text.

2000 Deitel & Associates, Inc. All rights reserved.

Program:1
<html> <head> <style type="text/css"> a {text-decoration:none;} </style> </head> <body> <p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a> </p> </body>
</html>
2000 Deitel & Associates, Inc. All rights reserved.

Program:2
<html> <head> <style type="text/css"> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p> </body> </html>

2000 Deitel & Associates, Inc. All rights reserved.

Text-Transformation
<html> <head> <style type="text/css"> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head>

<body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html>

2000 Deitel & Associates, Inc. All rights reserved.

Text-Indentation
<html> <head> <style type="text/css"> p {text-indent:50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body> </html>
2000 Deitel & Associates, Inc. All rights reserved.

Pseudo-classes Give the author access to content not specifically declared in the document Ex. hover pseudo-class

2000 Deitel & Associates, Inc. All rights reserved.

14.4 Conflicting Styles (II)


px: pixel is a relative-length measurement Varies in size based on screen resolution

Other relative-lengths
em: the size of the font ex: the x-height of the font, usually set to the height of a lowercase x Percentages
E.g. margin-left: 10%

Absolute-length measurements
in: inches cm: centimeters mm: millimeters pt: points (1 pt = 1/72 in) pc: picas (1 pc = 12 pt)

Use relative length over absolute


2000 Deitel & Associates, Inc. All rights reserved.

14.4 Conflicting Styles (III) Three possible sources for style sheets
Browser defaults Preset user styles Author styles

Author styles have a greater precedence than preset user styles

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig 14.3: advanced.html --> 5<!-- More advanced style sheets --> 6 7<HEAD> 8<TITLE>More Styles</TITLE> 9<STYLE TYPE = "text/css"> 10 11 A.nodec { text-decoration: none } 12 13 A:hover { text-decoration: underline; 14 color: red; 15 background-color: #CCFFCC } 16 17 LI EM { color: red; 18 font-weight: bold } 19 20 UL { margin-left: 75px } 21 22 UL UL { text-decoration: underline; 23 margin-left: 15px } 24 25</STYLE> 26</HEAD> 27 28<BODY> 29 30<H1>Shopping list for <EM>Monday</EM>:</H1> 31<UL> 32<LI>Milk</LI> 2000 Deitel 33<LI>Bread& Associates, Inc. All rights reserved.

Outline
1.1 text-decoration property 1.2 hover pseudoclass 1.3 Declare style for EM elements that are children of LI elements 1.4 Declare a style for all nested lists

34 35 36 37 38

<UL> <LI>White bread</LI> <LI>Rye bread</LI> <LI>Whole wheat bread</LI> </UL></LI>

Outline

39 <LI>Rice</LI> 40 <LI>Potatoes</LI> 41 <LI>Pizza <EM>with mushrooms</EM></LI> 42 </UL> 43 44 <P><A CLASS = "nodec" HREF = "http://food.com">Go to the Grocery 45 46 47 </BODY> 48 </HTML> store</A></P>

2000 Deitel & Associates, Inc. All rights reserved.

Inheritance in style sheets

Hovering over a link

2000 Deitel & Associates, Inc. All rights reserved.

14.5 Linking External Style Sheets


External linking
Separate pages can all use same style sheet Only modify a single file to change styles across your site

LINK element
Specifies a relationship (REL attribute) between current document and another document
<LINK REL = stylesheet TYPE = text/css HREF = styles.css>

LINK element can only be placed in header Other REL values


next, previous allow you to link a series of documents Print all linked documents option

Style sheets are reusable


2000 Deitel & Associates, Inc. All rights reserved.

1A 2

{ text-decoration: none }

Outline
color: red; background-color: #CCFFCC }

3A:hover { text-decoration: underline; 4 5 6 7LI EM 8 9 10UL { margin-left: 2cm } { color: red; font-weight: bold}

1. External style sheet (styles.css)

11
12UL UL 13 { text-decoration: underline; margin-left: .5cm }

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.5: imported.html --> 5<!-- Linking external style sheets --> 6 7<HEAD> 8<TITLE>Importing style sheets</TITLE> 9<LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css"> 10</HEAD> 11 12<BODY> 13 14<H1>Shopping list for <EM>Monday</EM>:</H1> 15<UL> 16<LI>Milk</LI> 17<LI>Bread 18 <UL> 19 <LI>White bread</LI> 20 <LI>Rye bread</LI> 21 <LI>Whole wheat bread</LI> 22 </UL></LI> 23<LI>Rice</LI> 24<LI>Potatoes</LI> 25<LI>Pizza <EM>with mushrooms</EM></LI> 26</UL> 27 28<A HREF = "http://food.com">Go to the Grocery store</A> 29 30</BODY> 2000 Deitel 31</HTML> & Associates, Inc. All rights reserved.

Outline
2. LINK element 2.1 REL attribute

Linking an external style sheet

2000 Deitel & Associates, Inc. All rights reserved.

14.6 Positioning Elements CSS position property


Absolute positioning
Specifying an elements position as absolute removes it from the normal flow of elements on the page Position the element according to distance from top, left, right or bottom margins of parent element

z-index attribute
Allows you to properly layer overlapping elements Elements with higher z-index are displayed in front of elements with lower z-index

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig 14.6: positioning.html -->

Outline
1. position property 1.1 absolute positioning 1.2 z-index

5<!-- Absolute positioning of elements --> 6 7<HEAD> 8<TITLE>Absolute Positioning</TITLE> 9</HEAD> 10

11<BODY>
12 13<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px; 14 left: 0px; z-index: 1">

15<H1 STYLE = "position: absolute; top: 50px; left: 50px; 16 z-index: 3">Positioned Text</H1>

17<IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px; 18 19 20</BODY> 21</HTML> & Associates, Inc. All rights reserved. 2000 Deitel left: 100px; z-index: 2">

Positioning elements with CSS

2000 Deitel & Associates, Inc. All rights reserved.

14.6 Positioning Elements (II) CSS position property (cont.)


Relative positioning
Browser lays out the element on the page Then offsets the element by specified top, bottom, left or right values Keeps elements in the general flow of elements on the page Be careful to avoid unintentionally overlapping text

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig 14.7: positioning2.html --> 5<!-- Relative positioning of elements --> 6 7<HEAD> 8<TITLE>Relative Positioning</TITLE> 9 10<STYLE TYPE = "text/css"> 11 12 P { font-size: 2em; 13 font-family: Verdana, Arial, sans-serif } 14 15 SPAN { color: red; 16 font-size: .6em; 17 height: 1em } 18 19 .super { position: relative; 20 top: -1ex } 21 22 .sub { position: relative; 23 bottom: -1ex } 24 25 .shiftl { position: relative; 26 left: -1ex } 27 28 .shiftr { position: relative; 29 right: -1ex } 30</STYLE> 31</HEAD> 32 2000 Deitel & Associates, Inc. All rights reserved. 33<BODY>

Outline
1. relative positioning

34 35<P> 36Text text text text <SPAN CLASS = "super">superscript</SPAN> 37text text text text <SPAN CLASS = "sub">subscript</SPAN> 38text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN> 39text text text <SPAN CLASS = "shiftr">right-shifted</SPAN> 40Text text text text text 41</P> 42 43</BODY> 44</HTML>

Outline
2. Page rendered by browser

2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds
background-image property Specifies the URL background-position property Positions the image on the page Top, bottom, center, left or right Ex. background-position: 50% 30px;
Position image centered vertically (50% of the distance across the screen) and 30 pixels from the top

background-repeat property controls tiling no-repeat, repeat, x-repeat, y-repeat background-attachment property fixed: scrolling the browser window will not move the image scroll: moves the image as the user scrolls the window (default) text-indent property
Indents first line of text by specified amount
2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds (II)


font-weight property
specifies the boldness of affected text bold normal bolder lighter

Multiples of 100 from 100 to 900

font-style property
none italic oblique Will default to italic if system does not have separate font file for oblique

2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds (III)


SPAN element: generic grouping element
Does not apply any inherent formatting Main use is to apply styles or ID attributes to block of text Inline element

DIV element
Similar to SPAN, but block-level element Displayed on own line with margins above and below

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.8: background.html --> 5<!-- Adding background images and indentation --> 6 7<HEAD> 8<TITLE>Background Images</TITLE> 9 10<STYLE TYPE = "text/css"> 11 12 BODY { background-image: url(watermark.gif); 13 background-position: bottom right; 14 background-repeat: no-repeat; 15 background-attachment: fixed } 16 17 P { font-size: 2em; 18 color: #AA5588; 19 text-indent: 1em; 20 font-family: Arial, sans-serif } 21 22 .dark { font-weight: bold } 23 24</STYLE> 25</HEAD> 26 27<BODY> 28 29<P> 30This is some sample text to fill in the page. 2000 Deitel & Associates, Inc. All rights some 31<SPAN CLASS = "dark">This is reserved.sample

Outline
1. Use CSS to add a background image 1.1 backgroundimage property 1.2 backgroundposition property 1.3 backgroundrepeat property 1.4 backgroundattachment property 1.5 text-indent property 1.6 font-weight property

32 text to fill in the page.</SPAN> 33 This is some sample text to fill in the page. 34 This is some sample text to fill in the page. 35 This is some sample text to fill in the page. 36 This is some sample text to fill in the page. 37 </P> 38 39 </BODY> 40 </HTML>

Outline
2. Page rendered by browser

2000 Deitel & Associates, Inc. All rights reserved.

14.8 Element Dimensions width property


Ex. <DIV STYLE = width: 20%>

height property
Relative and absolute lengths for width and height properties

text-align property
center, left or right

overflow property
scroll adds scrollbars if the text overflows the boundaries

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.9: width.html --> 5<!-- Setting box dimensions and aligning text --> 6 7<HEAD> 8<TITLE>Box Dimensions</TITLE> 9<STYLE TYPE = "text/css"> 10 11 DIV { background-color: #FFCCFF; 12 margin-bottom: .5em } 13 14</STYLE> 15</HEAD> 16 17<BODY> 18 19<DIV STYLE = "width: 20%">Here is some 20text that goes in a box which is 21set to stretch across twenty precent 22of the width of the screen.</DIV> 23 24<DIV STYLE = "width: 80%; text-align: center"> 25Here is some CENTERED text that goes in a box 26which is set to stretch across eighty precent of 27the width of the screen.</DIV> 28 29<DIV STYLE = "width: 20%; height: 30%; overflow: scroll"> 30This box is only twenty percent of 31the width and thirty percent of the height. 32What do we do if it overflows? Set the 2000 Deitel property Inc. All rights reserved. 33overflow & Associates, to scroll!</DIV>

Outline
1. Dimensions in DIV element 1.1 width property 1.2 height property 1.3 text-align property

34 35 </BODY> 36 </HTML>

Outline
2. Page rendered by browser

2000 Deitel & Associates, Inc. All rights reserved.

14.9 Text Flow and the Box Model Floating


Allows you to move an element to one side of the screen Other content in the document flows around the floated element Float to the left or right of a document

Each block-level element is boxed


Box model allows properties of box to be easily adjusted
Padding Border Margins
2000 Deitel & Associates, Inc. All rights reserved.

Box model for block-level elements

Margin
Border Padding

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.10: floating.html --> 5<!-- Floating elements and element boxes --> 6 7<HEAD> 8<TITLE>Flowing Text Around Floating Elements</TITLE> 9<STYLE TYPE = "text/css"> 10 11 DIV { background-color: #FFCCFF; 12 margin-bottom: .5em; 13 font-size: 1.5em; 14 width: 50% } 15 16</STYLE> 17</HEAD> 18 19<BODY> 20 21<DIV STYLE = "text-align: center">Centered text</DIV> 22<DIV STYLE = "text-align: right">Right-aligned text</DIV> 23 24<DIV STYLE = "float: right; margin: .5em">This is some floated 25text, floated text, floated text, floated text.</DIV> 26<P> 27Here is some flowing text, flowing text, flowing text. 28Here is some flowing text, flowing text, flowing text. 29Here is some flowing text, flowing text, flowing text. 30Here is some flowing text, flowing text, flowing text. 31Here is some flowing text, flowing text, flowing text. 32Here is some flowing text, flowing text, flowing text. 2000 is some flowing All rights reserved. 33Here Deitel & Associates, Inc. text, flowing text, flowing text.

Outline
1. Floating elements 2. Setting box dimensions

34Here is some flowing text, flowing text, flowing text. 35</P> 36 37<P><DIV STYLE ="float: right; padding: .5em">This is some floated 38text, floated text, floated text, floated text.</DIV>

Outline

39Here is some flowing text, flowing text, flowing text.


40Here is some flowing text, flowing text, flowing text. 41Here is some flowing text, flowing text, flowing text. 42<SPAN STYLE = "clear: right">Here is some unflowing text. 43Here is some unflowing text.</SPAN> 44</P> 45 46</BODY> 47</HTML>

Interrupt flow of text around a floated element by setting the clear property to the same direction the element is floated

2000 Deitel & Associates, Inc. All rights reserved.

Floating elements, aligning text and setting box dimensions

.5 em margin

.5 em padding

2000 Deitel & Associates, Inc. All rights reserved.

14.9 Text Flow and the Box Model (II)


Box model border border-width border-style
E.g. border-top-style none hidden dotted dashed solid double groove ridge inset outset

border-color
E.g. border-left-color

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.12: borders.html --> 5<!-- Setting borders of an element --> 6 7<HEAD> 8<TITLE>Borders</TITLE> 9<STYLE TYPE = "text/css"> 10 11 BODY { background-color: #CCFFCC } 12 13 DIV { text-align: center; 14 margin-bottom: 1em; 15 padding: .5em } 16 17 .thick { border-width: thick } 18 19 .medium { border-width: medium } 20 21 .thin { border-width: thin } 22 23 .groove { border-style: groove } 24 25 .inset { border-style: inset } 26 27 .outset { border-style: outset } 28 29 .red { border-color: red } 30 31 .blue { border-color: blue } 32 2000 Deitel 33</STYLE> & Associates, Inc. All rights reserved.

Outline
1. Box model border properties

34</HEAD> 35 36<BODY> 37 38<DIV CLASS = "thick groove">This text has a border</DIV> 39<DIV CLASS = "medium groove">This text has a border</DIV> 40<DIV CLASS = "thin groove">This text has a border</DIV> 41 42<P CLASS = "thin red inset">A thin red line...</P> 43<P CLASS = "medium blue outset">And a thicker blue line</P> 44 45</BODY>

Outline

46</HTML>

2000 Deitel & Associates, Inc. All rights reserved.

Applying borders to elements

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.13: borders2.html --> 5<!-- Various border-styles --> 6 7<HEAD> 8<TITLE>Borders</TITLE> 9 10<STYLE TYPE = "text/css"> 11 12 BODY { background-color: #CCFFCC } 13 14 DIV { text-align: center; 15 margin-bottom: .3em; 16 width: 50%; 17 position: relative; 18 left: 25%; 19 padding: .3em } 20</STYLE> 21</HEAD> 22 23<BODY> 24 25<DIV STYLE = "border-style: solid">Solid border</DIV> 26<DIV STYLE = "border-style: double">Double border</DIV> 27<DIV STYLE = "border-style: groove">Groove border</DIV> 28<DIV STYLE = "border-style: ridge">Ridge border</DIV> 29<DIV STYLE = "border-style: inset">Inset border</DIV> 30<DIV STYLE = "border-style: outset">Outset border</DIV> 31</BODY> 2000 Deitel 32</HTML> & Associates, Inc. All rights reserved.

Outline
1. Creating borders with border-style property

Various border-styles

2000 Deitel & Associates, Inc. All rights reserved.

14.10 User Style Sheets Important issue when adding style sheets:
What kind of users will be using your site?

Users can define their own user style sheets CSS specification gives precedence to author styles over user styles Use relative measurements Add a user style sheet in IE5
Tools menu Internet Options
Accessibility Check Format documents using my style sheet

2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2<HTML> 3 4<!-- Fig. 14.14: user.html -->

Outline
1.1 Use em measurement to modify text size

5<!-- User styles


6 7<HEAD> 8<TITLE>User Styles</TITLE> 9 10<STYLE TYPE = "text/css"> 11 12 13 14</STYLE> 15</HEAD> 16 17<BODY>

-->

.note { font-size: 1.5em }

18
19<P>Thanks for visiting my Web site. I hope you enjoy it.</P> 20<P CLASS = "note">Please Note: This site will be moving soon. 21Please check periodically for updates.</P> 22 23</BODY> 24</HTML> & Associates, Inc. All rights reserved. 2000 Deitel

Modifying text size with the em measurement

2000 Deitel & Associates, Inc. All rights reserved.

Adding a user style sheet in Internet Explorer 5

2000 Deitel & Associates, Inc. All rights reserved.

1BODY

{ font-size: 20pt;

2
3A

background-color: #CCFFCC }
{ color: red }

Outline
1. A sample user style sheet 2. A Web page with user styles enabled

2000 Deitel & Associates, Inc. All rights reserved.

You might also like