Lecture14 CSS DHTML

PGDCET/NWT Department of Computer Science & Technology
Lecture 14
CSS and DHTML
© 2009, DCST
Objectives
To Learn & Understand:
• Styles for
• color, background, font, text etc.
• What is DHTML
• Features of Dynamic HTML
• Dynamically change text and style
© 2009, DCST CSS and DHTML 14.2

Color and Background
CSS properties to apply colors and background colors to your websites

Property Valid Values Sample Usage
color Color value {color:green;}
background-color Color value {background-color:green;}
background-image url | none {background-image:
url(apple.jpg);}
background-repeat repeat | no-repeat {background-repeat: no-repeat;}
background-attachment scroll | fixed {background-attachment: fixed;}
background-position [top | center | bottom {background-position: top
| left | center | right] center;}
background color || url || repeat || { background:red url(apple.jpg) ;}
scroll || position

Example - Color & Background

HTML code Style.css
<html> body {
<head> background-color: #FFCC66;
<title>CSS Example</title> background-image: url("scene.jpg");
<link rel="stylesheet" background-repeat: no-repeat;
type="text/css" background-attachment: fixed;
href="style.css" />
background-position: center right;
</head>
}
<body >
<H1> India Tourism </H1> h1 {
<h2> If there is Heaven on earth its
here, its here, its here.</h2> color: #990000;
</body> background-color: #FC9804;
</html> }
CSS and DHTML 14.4

CSS Properties for Fonts

font-family Arial. San-Serif, {font-family: Arial,times;}
times, Times New
Roman etc…
font-style normal, italic, oblique {font-style: italic;}
font-variant Normal, small-caps {font-variant: small-caps;}
font-weight Normal, bold {font-weight: bold;}
font-size Size either absolute {font-size: 12pt;}
value or relative
font [font || font-variant|| {font: bold 12pt Arial ;}
font-weight || font-
size] font-family

Example - Font
HTML
code
<html> <head><title>CSS Example</title>
<link rel="stylesheet" type="text/css" ref="style.css" />
</head> <body>
<H1> Thought of the Day </H1>
<H3 > NO ONE CAN GO BACK AND CHANGE A BAD BEGINNING, <br/>
BUT ANYONE CAN START NOW AND CREATE A SUCCESFUL ENDING
</font> </H3>
</body> </html>
H3
Style.css
{
font-family: "Times New Roman", Times, serif;
color: red;
text-align: center;
}
CSS Properties for Text

Formatting and adding style to text is achieved through text
properties.
text-indent Length | percentage {text-indent:25px;}
text-align Left | right | center | {text-align: center;}
justify
text-decoration None | underline | {text-decoration: underline;}
overline | line-through
letter-spacing Normal | length {letter-spacing: 4pt;}
text-transform Capitalize | uppercase | {text-transform: uppercase;}
lowercase | none

CSS Properties for Borders
Borders can be used as a decorative element or to underline a

separation of two or more elements.

border-width Length | percentage {border-width: thick;}
| [medium | thick | thin]
border-color Color values {border-color: gold;}
border-style dashed | dotted | groove {border-style: dotted ;}
| inset | outset | ridge |
solid | none
border width || style || color {border: 1px solid blue;}

Example - Borders
HTML code
<html><head><title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head> <body > <H1> The Art of Being Well </H1>
<H2> Negative people do not find solutions and they enlarge problems. It is
better to light <br/> a match than to curse the darkness. We are what we
think.</H2>
<H3> Some rules for happier life:
<ul>
<li> Accept </li>
<li> Make Decisions </li>
<li> Find Solutions </li>
<li> Dont live by appearances </li>
<li> Trust </li>
</ul>
</h3> </body> </html>
Example – Borders...
Style1.css
h1 { p{
border-width: thick; border-width: 1px;
border-style: double; border-style: dashed;
border-color: gold; border-color: blue;
} }
h2 { ul {
border-width: 20px; border-width: thin;
border-style: outset ; border-style: solid;
border-color: red; border-color: orange;
} }

Borders…

Height and Width

Defines the height and width of an element.
height Length | percentage | auto {height: 200px;}
width Length | percentage | auto {width: 400px;}
CSS example ul
{
height: auto;
width: 200px;
border: 1px solid black;
background: orange;
}
Pseudo-classes
• Pseudo-classes are another form of
specification used in CSS
• They identify markup elements, and in some
cases, specific user actions, to which a
particular style is to be applied.
• Example:
– The :hover pseudo-class
– This applies a style only when the user 'points to'
the visible element with a mouse pointer
– It is appended to a selector as in a:hover or
#elementid:hover.
CSS and DHTML 14.13

Example - Pseudo-classes
a:link {
color: blue;
} a:link is used for links leading to
pages that the user has not visited.
a:visited {
color: purple;
} a:visited for visited links.
a:active {
color:red
background-color: yellow; :active is used for links that are active.
}
a:hover {
color: green;
font-style: italic;
} a:hover is when the cursor is on the link.
Pseudo-element
• A pseudo-element makes a selection that may
consist of partial elements, such as :first-line or :first-
letter
• Example:
<html> <head>
<style type="text/css">
p:first-letter
{ color: #ff0000; font-size:xx-large; }
</style>
</head>
<body> <p>Try This!</p> </body> </html>
CSS and DHTML 14.15

<div> & <span> elements

• They are used as containers for style sheet
properties. Both define a block consisting of text and
HTML tags.
• <div> element separates the block from its
surrounding content by a line break.
• The <span> element flows within the surrounding
content.


<html><head>
<title>CSS DIV & SPAN Example</title>
<link rel="stylesheet" type="text/css" href="style4.css" />
</head>
<body > <H1> Demonstrating use of DIV & SPAN </H1>
<P>
<H2> Text surrounding DIV tag... before <DIV> I am a DIV </DIV>Text
surrounding DIV tag... after.
</H2></P>
<P>
<H2> Text surrounding SPAN tag... before <SPAN> I am a SPAN
</SPAN>Text surrounding SPAN tag... after.
</H2>
</P>
</body> </html>
Style4.css
div {
color: red;
background-color: yellow;
font-style: Italic;
}
span {
color: blue;
background-color: lightgreen;
font-style: oblique;
}

CSS: Box Model
element
Padding
Border
Each HTML-element is surrounded by boxes which we

Margin
can adjust using CSS.
Dynamic HTML (DHTML)

• DHTML is a collection of technologies used
together to create interactive and animated
web sites by using a combination of :
– A static markup language (such as HTML)
– A client-side scripting language (such as
JavaScript)
– A presentation definition language (such as CSS),
and
– The Document Object Model (DOM)
CSS and DHTML 14.20

Dynamic HTML (DHTML)

• DHTML allows scripting languages to change
variables in a web page's definition language,
which in turn affects the look and function of
otherwise "static" HTML page content
• DHTML effects occur after the page has been
fully loaded and during the viewing process.
• DHTML is often used to make rollover buttons
or drop-down menus on a web page and
interactive web pages.
CSS and DHTML 14.21

Dynamic HTML
CSS Javascript Javascript

CSS
HTML HTML HTML HTML
Simple Page with Dynamic Page

Page Style (DHTML)

DHTML Features
 Dynamic Content – Content on the Web page can be
added, deleted, or modified dynamically.
 Dynamic Style – It refers to the change in the
appearance of an element such as color, font, size and
visual effects (bold, italic, underline etc.)
 Dynamic Positioning – It refers to change in the
position of an element dynamically. Features such as
Drag & Drop and animation are possible.

Changing Text Color & Size

<html><head><title>DOM Examples</title>
<script type="text/javascript">
function faith1()
{
var elem = document.getElementById('myspan')

elem.style.color ="green";
elem.style.fontSize ="200%";
}
function faith2()
{
var elem = document.getElementById('myspan')

elem.style.color ="red";
elem.style.fontSize ="100%";
}
</script></head>
CSS and DHTML 14.24

Changing Text Color & Size ...

<body onLoad="faith2();">
<span onMouseOver="faith1();" onMouseOut="faith2();" id="myspan"> You are
being pulled in hundred directions.

</span>
</body></html>

Dynamically Changing text
• With the help of DOM, already placed text also can be

changed dynamically.
• New text can be added and existing text can be altered
or deleted.
• DOM provides four text element properties to access the
content of an element. They are:
─ innerText, outerText, innerHTML, outerHTML

Container Properties
Property Content
innerText The textual content of the container.
outerText Same as innerText when accessed for

read; replaces the whole element when
assigned a new value.
innerHTML The complete content of the container, not
including the element tag pair itself.
outerHTML The complete container, including the
element tag pair itself.
CSS and DHTML 14.27

Example - Container Properties

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function fn() {
alert("InnerText is: " + test.innerText);

alert("OuterText is: " + test.outerText);
alert("InnerHTML is: " + test.innerHTML);
alert("<br>OuterHTML is: " + test.outerHTML);
// replaces container <p>..</p> tag
test.outerText = " This is replaced string. ";
}
</script>
</head>
CSS and DHTML 14.28

Example - Container Properties

<body>
<i> One Two
<p id="test"> Three <font color="red"> Four </font> Five
</p>
Six Seven
</i>
<br><br>
<input type="button" value="click" onClick="fn();" >
</body>
</html>
CSS and DHTML 14.29

Summary
Styles for
• color, background, font, text etc.
• What is DHTML
• Features of Dynamic HTML
• Dynamically change text and style

Lecture14 CSS DHTML

Uploaded by

Copyright:

Available Formats

You might also like

Lecture14 CSS DHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture14 CSS DHTML

Uploaded by

Copyright:

Available Formats

PGDCET/NWT Department of Computer Science & Technology

CSS and DHTML

© 2009, DCST CSS and DHTML 14.2

Color and Background

CSS properties to apply colors and background colors to your websites

© 2009, DCST CSS and DHTML 14.3

Example - Color & Background

CSS and DHTML 14.4

CSS Properties for Fonts

Property Valid Values Sample Usage

© 2009, DCST CSS and DHTML 14.5

CSS Properties for Text

© 2009, DCST CSS and DHTML 14.7

CSS Properties for Borders

Borders can be used as a decorative element or to underline a

Property Valid Values Sample Usage

© 2009, DCST CSS and DHTML 14.8

© 2009, DCST CSS and DHTML 14.10

© 2009, DCST CSS and DHTML 14.11

Height and Width

CSS and DHTML 14.13

<body> <p>Try This!</p> </body> </html>

CSS and DHTML 14.15

<div> & <span> elements

© 2009, DCST CSS and DHTML 14.16

<div> & <span> elements

<div> & <span> elements

© 2009, DCST CSS and DHTML 14.18

CSS: Box Model

Each HTML-element is surrounded by boxes which we

Dynamic HTML (DHTML)

CSS and DHTML 14.20

Dynamic HTML (DHTML)

CSS and DHTML 14.21

CSS Javascript Javascript

HTML HTML HTML HTML

Simple Page with Dynamic Page

© 2009, DCST CSS and DHTML 14.22

© 2009, DCST CSS and DHTML 14.23

Changing Text Color & Size

var elem = document.getElementById('myspan')

var elem = document.getElementById('myspan')

CSS and DHTML 14.24

Changing Text Color & Size ...

<span onMouseOver="faith1();" onMouseOut="faith2();" id="myspan"> You are

being pulled in hundred directions.

© 2009, DCST CSS and DHTML 14.25

Dynamically Changing text

• With the help of DOM, already placed text also can be

─ innerText, outerText, innerHTML, outerHTML

© 2009, DCST CSS and DHTML 14.26

outerText Same as innerText when accessed for

CSS and DHTML 14.27

Example - Container Properties

alert("InnerText is: " + test.innerText);

CSS and DHTML 14.28

Example - Container Properties

<input type="button" value="click" onClick="fn();" >