Style Sheets

1.
STYLE SHEETS :CSS

• CSS stands for Cascading Style Sheets and is a simple styling language which allows
attaching style to HTML elements.
• Style Sheets are templates, very similar to templates in desktop publishing applications,
containing a collection of rules declared to various selectors (elements).
• Cascade is a method of defining the weight (importance) of individual styling rules thus
allowing conflicting rules to be sorted out should such rules apply to the same selector.
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
link element associates style sheet with doc, type attribute specifies style language used, href
attribute provides style sheet URL, title attribute provides style sheet name. Alternatively, user
selectable style sheets can be specified.
CSS Syntax: Selector Strings
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
External Style Sheet

An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site
by changing one file. Each page must link to the style sheet using the <link>
tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.
Internal Style Sheet

An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section of an HTML page, by
using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change
the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3
selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet
the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
2. Event Handlers in Java Script

 Special-purpose functions that come predefined with JavaScript.
 They are unusual in the sense that they are mostly called from the HTML part of a Web
page and not the <SCRIPT> … </SCRIPT> part
 Events handlers are placed in the BODY part of a Web page as attributes in HTML tags
 Events can be captured and responded to directly with JavaScript one-liners embedded in
HTML tags in the BODY portion
 Alternatively, events can be captured in the HTML code, and then directed to a
JavaScript function for an appropriate response
<INPUT
type=“submit”
name=“sendEmail”
value=“SendeMail”
onMouseOver=“if(document.sendEmail.sender.value.length<1)window.alert(‘EmptyFromfield!
Please correct’)”>
That was event handling through what we may call ‘in-line JavaScript
In-Line JavaScript Event Handling
• Event handlers are placed in the BODY portion of a Web page as attributes of HTML
tags
• The event handler attribute consists of 3 parts:
1. The identifier of the event handler
2. The equal sign
3. A string consisting of JavaScript statements enclosed in double or single
quotes
• Multiple JavaScript statements (separated by semicolons) can be placed in that string, but
all have to fit in a single line; no newline characters are allowed in that string
• Due to this limitation, sophisticated event handling is not possible with in-line event
handling
JavaScript that goes between the <SCRIPT>, </SCRIPT> tags:
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( “Empty From field! Please correct” );
}
}
JavaScript included as an attribute of the “Send eMail” button:
onMouseOver=“checkForm( )”
• The “code in the HEAD portion” is the right choice for developing larger JavaScript
scripts
– It makes the code easier to read
– It allows the reuse of a function for multiple event handlers
• For very short scripts, “all code in the tag” works well
JavaScript Code - Simple JavaScript Calculator

<html>
<head>
<title>Simple Javascript Calculator - Basic Arithmetic Operations</title>
<script language="javascript" type="text/javascript">
function multiply(){
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=a*b;
document.calculator.total.value=c;
}
</script>
function addition(){
c=a+b;
}
</script>
function subtraction(){
c=a-b;
}
</script>
function division(){
c=a/b;
}
</script>
function modulus(){
c=a%b;
}
</script>
</head>
<body>

<form name="calculator">

Number 1: <input type="text" name="number1">

Number 2: <input type="text" name="number2">

Get Result: <input type="text" name="total">

<input type="button" value="ADD" onclick="javascript:addition();">
<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD" onclick="javascript:modulus();">
</form>
</body>
</html>
3. Various Dialog boxes in Java script with an example.

Three Types of Dialog Boxes in JavaScript
* alert()
* confirm()
* prompt()
 alert ()
The simplest to direct output to a dialog box is to use the alert() method.
alert ("Click Ok to continue.");
NOTICE: that the alert() method doesn’t have an object name in front of it. This is because the
alert() method is part of the window Object. As the top-level object in the Navigator Object
Hierarchy, the window Object is assumed when it isn’t specified.
The script alert ("Click Ok to continue."); and HTML holding the script will not continue or
execute until the user clicks the OK button.
Generally, the alert() method is used for exactly that – to warn the user or alert him or her to
something. Examples of this type of use include:
* Incorrect information in a form
* An invalid result from a calculation
* A warning that a service is not available on a given date
Nonetheless, the alert() method can still be used for friendlier messages.
NOTICE: that Netscape alert boxes include the phrase "<url> [JavaScript Application]" in the
title bar of the alert while IE has "Microsoft Internet Explorerin the title bar of the alert. Both
have yellow triangles to "alert" you. This done in order to distinguish them form those generated
by the operating system or the browser. This done for security reasons so that malicious
programs cannot trick users into doing things they don’t want to do.
<INPUT TYPE="button" VALUE="alert" onClick="alert ('This is an alert!!')">
OR
<INPUT TYPE="button" VALUE="alert" onClick="window.alert ('This is an alert!!')">
The alert dialog box is used to display an alert message to the user.
 prompt ()
The alert() method still doesn't enable you to interact with the user. The addition of the OK
button provides you with some control over the timing of events, but it still cannot be used to
generate any dynamic output or customize output based on user input.
The simplest way to interact with the user is with the prompt() method. The user needs to fill in
the field and then click OK.
prompt("Enter Your Name:", "Name");
* Note 1: you are providing two "arguments" to the method in the parenthesis. The prompt()
method "requires two pieces of information". The first is text to be displayed, and the second is
the default data in the entry field.
* Note 2: In JavaScript, when a method requires more than one argument, they are separated by
commas.
<INPUT TYPE="button" VALUE="prompt" onClick="respPrompt()">
The prompt() method dialog box allows the user the opportunity to enter information. It takes
two parameters; a message and a default string for the text entry field.
With function code:
<SCRIPT LANGUAGE="JavaScript">
function respPrompt() {
var favorite = prompt('What is your favorite color?', 'RED');
// OR var favorite = window.prompt('What is your favorite color?', 'RED');
// if (favorite) equivalent to if (favorite != null && favorite != "");
if (favorite) alert("Your favorite color is: " + favorite);
else alert("You pressed Cancel or no value was entered!");
}
</SCRIPT>
 confirm ()
Confirm displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK the
window method confirm() will return true. If the user clicks on the Cancel button confirm()
returns false.
<INPUT TYPE="button" VALUE="confirm" onClick="respConfirm()">
The confirm dialog box returns a Boolean value based on the user's selection.
With function code:
<SCRIPT LANGUAGE="JavaScript">
function respConfirm () {
var response = confirm('Confirm Test: Continue?');
// OR var response = window.confirm('Confirm Test: Continue?');
if (response) alert("Your response was OK!");
else alert("Your response was Cancel!");
}
</SCRIPT>
4. Compare HTML, SGML and XML.
SGML (Standard Generalized Markup Language) is the standard for encoding paper documents
into an electronic format. With the evolution of the internet, it became clear that HTML is no
longer able to provide the need for more dynamic content as it has reached its limitations.
XML (Extensible Markup Language) is a language that was derived from SGML and is too is
too comprehensive and complex for the intended use. Since XML is simply a subset of SGML,
SGML parsers are capable of reading and decoding valid XML files.
HTML, which stands for Hypertext Markup Language, is the predominant markup language
for web pages. HTML is the basic building-blocks of webpages.
5. Define Objects. List the attributes associated with it

The concept of an object is: a collection of data along with the functions to work with that data.
6. Various types of client/server architectural model.

The client/server model - model 1 - client/server
Model 2 – www Database Client/Server
Model 3 – web server / application server,
Model 4 – web server / application server/database server,
Model 5: web server / transaction server/database server
Model 6: web server / transaction server
7. What is DTD? Types

Document Type Definition (DTD) is a set of markup declarations that define a document type
for SGML-family markup languages (SGML, XML, HTML). DTDs were a precursor to XML
schema and have a similar function, although different capabilities.

Style Sheets

Uploaded by

Copyright:

Available Formats

Style Sheets

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

Style Sheets

Uploaded by

Copyright:

Available Formats

1.

STYLE SHEETS :CSS

• External Style Sheets can save a lot of work

• External Style Sheets are stored in CSS files

External Style Sheet

Internal Style Sheet

Multiple Style Sheets

2. Event Handlers in Java Script

JavaScript Code - Simple JavaScript Calculator

3. Various Dialog boxes in Java script with an example.

5. Define Objects. List the attributes associated with it

6. Various types of client/server architectural model.

7. What is DTD? Types

You might also like