IP Lecture - Sildes

CASCADING STYLE
SHEETS ORIENTATION
Prepared By Mebiratu B. 4-Feb-22 1

• The Cascading Style Sheets, referred to as CSS, is a simple
design language intended to simplify the process of making
web pages presentable.
• CSS handles the look and feel part of a web page.

• Using CSS, the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, as well as a
variety of other effects can be controlled

The Benefits of CSS
➢Better type and layout controls
➢Less work
➢Potentially smaller documents and faster downloads.
➢More accessible sites
➢Reliable browser support

How Style Sheets Work
1. Start with a document that has been marked up in HTML or
XHTML.
2. Write style rules for how you’d like certain elements to look.
3. Attach the style rules to the document

Writing the rules
➢ A style sheet is made up of one or more style instructions (called
rules) that describe how an element or group of elements should
be displayed.
➢ Each rule selects an element and declares how it should look
• In CSS terminology, the two main sections of a rule are the

selector that identifies the element or elements to be affected,
and the declaration that provides the rendering instructions

• The declaration, in turn, is made up of a property and its
value
Example
h1 {color: green; }

• Selectors
✓ most basic type of selector is called an element type

selector.
Declarations
➢ The declaration is made up of a property/value pair.
➢ There can be more than one declaration in a single rule
➢ Each declaration must end with a semicolon

• for example, the rule for p element above has both the
font-size and font-family properties
p{
font-size: small;
font-family: sans-serif;

• Values are dependent on the property. Some properties take
length measurements, some take color values, others have a
predefined list of keywords.
• When using a property, it is important to know which values it

accepts; however, in many cases, simple common sense will
serve you well

Attaching the styles to the document
There are four ways that style information can be applied
to an (X)HTML document
1. External style sheets

2. Embedded style sheets
3. Inline styles
4. Imported

External style sheets
• To make formatting of the HTML document using CSS
easier.
• An external style sheet is a separate, text-only document

that contains a number of style rules.
• It must be named with the .css suffix.

• It will be including in HTML files using <link> tag.
• The link element can be used to specify that a web page should
use an external style sheet.
• The link element only requires a start tag <link> and is inserted
in between the <head>…</head> tags of our web page
document.

• The link element employs three important attributes:
rel : the value of this attribute is always stylesheet
type : the value of this attribute is always text/css.
href: the value of this attribute will be changed according to
.css file to be referring to.
• This value can be any relative or absolute path

Consider the following rules for the style sheet file called style.css
.red{ color: red; }
.thick{ font-size:20px; }
.green{ color: green; }

• Now let’s make use of the above external CSS file in our following HTML document
• <html>
• <head> <title>HTML external CSS example</title>
• <link rel=”stylesheet” type=”text/css” href=”/html/style.css”>
• </head>
• <body> <p class=”red”>This is red</p>
• <p class=”thick”>This is thick</p>
• <p class=”green”> This is green</p>
• <p class=”thick green”> This is thick and green</p>
• </body> </html>

Embedded style sheets
• It is better to embed the entire style sheet into the
document
• It is placed in a document using the style element and its rules
apply only to that document.
• The style element must be placed in the head of the document

and it must contain a type
• To define an embedded style sheet, it always start with:

<style type=”text/css”>
• The body of the style sheet goes within <style type=”text/css”>

and </style> and declares rules for the HTML element.
• <html><head>
<title> embedded style sheet example</title>
body{background-color:yellow}
h1{font-size:50;color:blue}
p{font-size:14pt;color:red}
</style>
</head>
<body>
<h1>Embedded Style Sheet Example</h1>
<p> the entire HTML document can be formatted using
embedded cascading style sheet, it</p>
</body>
</html>
• <html><head>
<title> embedded style sheet example</title>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color: green;
}
</style>
</head>
<body>
<p class=”red”>This is red</p>
<p class=”thick”>This is thick</p>
<p class=”green”> This is green</p>
</body>
</html>
Inline styles
➢Style sheet rules can be applied directly to any HTML
element using style attribute of the tag
➢This should be done when there is a need to change the

style of a particular HTML element.
➢Rules define in line with the element overrides the rules

define in an external CSS file as well as the rules
defined in <style> element
➢Example <h1 style="color: red">Introduction</h1>

• <html><head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=”color:red;”>This is red</p>
<p style=”font-size:20px;”>This is thick</p>
<p style=”color:green;”>This is green</p>
<p style=”color:green;font-size:20px”>This is thick and
green</p>
</body>
</html>
Imported style
• A style sheet may be imported with CSS’s @import statement.
This statement may be used in a CSS file or inside the
<style>…</style> tag. Syntax:

</style>

Inheritance Document structure

• When you write a font-related style rule using the p element as a
selector, the rule applies to all of the paragraphs in the document
as well as the inline text elements they contain
• Img element is excluded because font-related properties do not apply

to images.
• properties related to the styling of text—font size, color, style, etc.—

are passed down
• Properties such as borders,margins, backgrounds, and so on that affect

the boxed area around the element tend not to be passed down

Conflicting styles: the cascade
• what should the browser do if a document’s imported
style sheet says that h1 elements should be red, but its
embedded style sheet has a rule that makes h1s purple?
• style information is passed down until it is overridden by

a style command with more weight.
• To prevent a specific rule from being overridden, you can

assign it “importance” with the !important indicator

• When two rules in a single style sheet conflict, the type of selector is
used to determine the winner.
• The more specific the selector, the more weight it is given to

override conflicting declarations.
• If you want a rule not to be overridden by a subsequent conflicting

rule, include the !important indicator just after the property value
and before the semicolon for that rule.
• For example, to make paragraph text blue always, use the following
rule:
p {color: blue !important;}

• The only way an !important rule may be overridden is by a conflicting
rule in a reader (user) style sheet that has also been marked !important
• Rule order
• Finally, if there are conflicts within style rules of identical weight,

whichever one comes last in the list “wins.” Take these three rules,
for example:
<style type="text/css">
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
More on CSS
• CSS Comments
• A CSS comment starts with /* and ends with */
CSS Selectors
The CSS element Selector
p{
text-align: center;
color: red;
}
The CSS id Selector
#para1 {
text-align: center;
color: red;
}
• The CSS class Selector
.center {
text-align: center;
color: red;
}
• The CSS Universal Selector
• *{
text-align: center;
color: blue;
}
• The CSS Grouping Selector
h1, h2, p {
text-align: center;
color: red;
}
CSS background-image
body {
background-image: url("paper.gif");
}
CSS Borders
• dotted {border-style: dotted;}
.dashed {border-style: dashed;border-width: 2px; border-color: green;}
CSS Margins
✓ The CSS margin properties are used to create space around elements,
outside of any defined borders.
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

• CSS Padding
• The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

• CSS height and width
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
CSS Box
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
CSS Links
a{
color: green;
}
The four links states are:
✓ a:link - a normal, unvisited link
✓ a:visited - a link the user has visited
✓ a:hover - a link when the user mouses over it
✓ a:active - a link the moment it is clicked

a:link {
color: red;
background-color: yellow;}
a:visited {
color: green;}
a:hover {
color: hotpink;}
a:active {
color: blue;}
CSS Layout - The position Property
• static
• relative
• fixed
• Absolute
position: static
✓ HTML elements are positioned static by default.
✓ Static positioned elements are not affected by the top, bottom, left, and
right properties.
✓ Is not positioned in any special way; it is always positioned according to
the normal flow of the page:

position: relative;
• An element with position: relative; is positioned relative to
its normal position.
• Setting the top, right, bottom, and left properties of a

relatively-positioned element will cause it to be adjusted
away from its normal position.

• position: fixed;
• An element with position: fixed; is positioned relative to the viewport,
which means it always stays in the same place even if the page is
scrolled. The top, right, bottom, and left properties are used to
position the element.
• A fixed element does not leave a gap in the page where it would
normally have been located.

• position: absolute;
• An element with position: absolute; is positioned relative
to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed).
• However; if an absolute positioned element has no

positioned ancestors, it uses the document body, and
moves along with page scrolling.

.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;

CSS Overflow
• The overflow property has the following values:
• visible - Default. The overflow is not clipped. The content renders outside
the element's box
• hidden - The overflow is clipped, and the rest of the content will be
invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of
the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

• Client-Side Scripting Language
• Introduction
• Client-Side Scripting Using JavaScript
• Introduction to JavaScript
• JavaScript Basics
• Cookies and Hidden Fields
• Dynamic HTML (DHTML)

Introduction
• Client-side scripting enhances functionality and
appearance
• Makes pages more dynamic and interactive
• Pages can produce immediate response without
contacting a server
• Browser has to have a built-in (JavaScript) interpreter
• Foundation for complex server-side scripting
• What is JavaScript?
• It is designed to add interactivity to HTML pages
• It is a scripting language (a lightweight programming language)
• Usually embedded directly into HTML pages
47
What can a JavaScript Do?
• put dynamic text into an HTML page
• can react to events
• can read and write HTML elements
• can be used to validate data
• can be used to detect the visitor’s browser
• can be used to create cookies
• Store and retrieve information on the visitor’s computer
48
How To
• The HTML <script> tag is used to insert a JavaScript into an HTML
page
<script type=“text/javascript”>
document.write(“Hello World!”)
</script>
• Ending statements with a semicolon?
• Optional; required when you want to put multiple statements on a

single line
49
Scripting
• <script> tag
• Indicate that the text is part of a script
• type attribute
• Specifies the type of file and the scripting language use:
• Value: “text/javascript”
• writeln method of the document object
• Write a line in the document and position the cursor in the
next line
• Does not affect the actual rendering of the HTML document
• What is being written by JavaScript is the set of html
instructions that in turn determine the rendering of the html
document
JavaScript Where To
• There are a flexible given to include JavaScript code anywhere in an HTML
document.
• But there are following most preferred ways to include JavaScript in your
HTML file.
• Script in <head>…</head> section

• Script in <body>…</body> section
• Script in <body>…</body> and <head>…</head> section>
• Script in and external file and then include in <head>…</head> section
51
• <html>
<head>
<title> First JavaScript page </title></head>
<body>
<h1> First JavaScript Page</h1>
<script type=”text/javascript”>
document.write(“<HR>”);
document.write(“Hello World Wide Web”); //comments goes here
document.write(“<HR>”);
</script>
</body>
• </html>

• The word document.write is a standard JavaScript command
for writing output to a page.
• write command between the <script> and </script> tags, the

browser will recognize it as a JavaScript command and
execute the code line.
• // is used for single line comment whereas /* comment …*/ is

used for multiple line comment in JavaScript coding

• Variables and operators
• Variables in JavaScript should be declared before using them with the
var keword.
• The scope of the variable is the region of the program in which it is

defined .
• Javascript variable will have only two scopes.

• Global variable –has global scope which is defined everywhere in the
JavaScript code.
• Local variable – visible only within a function where it is defined.

Function parameters are always local to that function.

• JavaScript allows working with three primitive data type:
• Numbers e.g. 123, 120.50 etc
• String of text e.g. “ javascript is my interest” etc
• Boolean e.g. true or false. The arithmetic operators (+, - , *, / and %)
are supported in JavaScript language

• <html>
<head><title>Arithmetic Operator Example</title></head>
<body>
<script type="text/javascript">
var num1=15;
var num2=5;
sum=var1+var2;
document.write("Sum="+sum);
</script>
• </body>
• <html>

• To compare the value of two variables, comparison operators are used.
These are == for equal, != not equal, > greater than, < less than, >=
greater or equal and <= less than or equal.
• The logical operators supported by javascript language are && called

logical AND operator, | | called logical OR operator and ! called logical
NOT operator

• Conditional Statement
If statement
if (expression){
Statement(s) to be executed if expression is true
}
if...else statement:
Syntax:
if (expression){
}else{
Statement(s) to be executed if expression is false
} Prepared By Mebiratu B. 4-Feb-22 58
• if...else if... statement:
• The if...else if... statement is the one level advance form of
control statement that allows JavaScript to make correct
decision out of several conditions.
Syntax:
if (expression 1){
Statement(s
}
• else if (expression 2){
Statement(s)
}else if (expression 3){
Statement(s)
}else{ Statement(s)
}

• <html><head><title>conditional
</title></head>
<body>
var d=new Date();
theday=d.getDay();
if(theday==1)
{document.write("First Monday");}
else if(theday==2)
{document.write("Second Teusday");}
else if(theday==3)
{document.write("Sleepy Sunday");}
else
{document.write("I'm looking forward to this weekend");}
</script>
</body><html>

• switch statement:
The basic syntax of the switch statement is to give an expression to
evaluate and several different statements to execute based on the value of
the expression.
• The interpreter checks each case against the value of the expression until
a match is found.
• If nothing matches, a default condition will be used

• Syntax:
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
…
case condition n: statement(s)
break;
default: statement(s)
}

• The for loop
• The for loop is the most compact form of looping and
includes the following three important parts:
• The loop initialization –counter starting value which is
executed before the loop begins
• The test statement- the given condition is true or not is tested
• The iteration statement – increasing or decreasing the counter
Syntax:
for (initialization; test condition; iteration statement){
Statement (s)
}

• The while Loop
• The most basic loop in JavaScript is the while loop which
loops through a block of code as long as a specified
condition is true
Syntax:
while (expression){
}

• The do …while loop
• The do…while loop is similar to the while loop except that
the condition check happens at the end of the loop. This
means that the loop will always be executed at least once,
even if the condition is false.
Syntax:
do { Statement (s) to be executed;
• } while (expression);

• The break Statement:
is used to exit a loop early, breaking out of the enclosing
curly braces
The continue Statement: The continue statement tells the

interpreter to immediately start the next iteration of the loop
and skip remaining code block.

<html>
<head><title>conditional statement example</title></head>
<body><script type="text/javascript">
var x = 1;
while (x < 20)
{
if (x == 10){
break; }
x = x + 1;
document.write( x + "<br />");
}
</script>
</body></html>
Function definition:
• The most common way to define a function in JavaScript is by using the

function keyword, followed by a unique function name, a list of
parameters may be empty, and a statement block surrounded by curly
braces.
Syntax:
function functionname(parameter-list)
{
Statements
}
</script>

• Example: A simple function that takes no parameters called
sayHello is defined here:
function sayHello() //function definition
{
Alert(“Hello there”);
}
</script>

• Function Calling: to invoke a function somewhere later in
the script, we should simple need to write the name of that
function as follows:
sayHello(); //function calling
</script>

• <html>
<head>
function sayHello() //function definition
{ alert("Hello there!");}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()“>
</form>
</body>
</html>

• Alert Dialog Box: an alert dialog box is mostly used to
give a warning message to the users
Confirmation Dialog Box: A confirmation dialog box is
mostly used to take user’s consent on any option. It
displays a dialog box with two buttons: Ok and Cancel.
• Prompt Dialog: Take input from user

• <html>
<head><title>hhhh</title>
</head>
<body>
<form name=myform>
<input type=button value="Try it now"
onClick="if(confirm('Format the hard disk?'))
alert('You are very brave!');
else alert('A wise decision!')">
</form>
</body>
</html>

• <html>
<head>
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
</script>
</head>
</html>

Form Validation
• Form validation used to occur at the server, after the client had entered
all necessary data and then pressed the Submit button.
• If some of the data that had been entered by the client had been in the
wrong form or was simply missing, the server would have to send all
the data back to the client and request that the form be resubmitted with
correct information.
• JavaScript provides a way to validate form's data on the client's

computer before sending it to the web server. Form validation generally
performs two functions

• Basic Validation - First of all, the form must be checked to
make sure data was entered into each form field that required
it. This would need just loop through each field in the form
and check for data.
• Data Format Validation - Secondly, the data that is entered

must be checked for correct form and value. This would need
to put more logic to test correctness of data.

• Basic Form Validation:
• First we will show how to do a basic form validation. In the below
form we are calling validate() function to validate data when
onsubmit event is occurring.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
return( true );
}
</script>

• <html><head><title> User Account</title>
<script type ="text/JavaScript">
function CheckPassword()
{
var Password, ConfPassword, Result;
Password = document.frmRegistration.txtPassword.value;
ConfPassword = document.frmRegistration.txtConfirmPass.value;
if(Password != ConfPassword)
alert( “Not match" );
}
</script></head><body>
<h1>User password Registration</h1>
<form name="frmRegistration">
Username<input type="text“ name="txtUsername“/>
Password<input type="password“ name="txtPassword" />
Confirm:<input type="password“ name="txtConfirmPass“/>
<input type="button" value="Send It" onClick="CheckPassword()">
</form></body></html>
• Data Format Validation:
• Now we will see how we can validate our entered form data before
submitting it to the web server.
• This example shows how to validate an entered email address which
means email address must contain at least an @ sign and a dot (.).
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
return( true );
}
</script>

JavaScript Basics
• Variables
• If … Else
• Switch
• Operators
• Popup Boxes
• Functions
• Loops (for, while)
• Events
• Try … Catch
• Throw
• onerror
• Special Text
• Guidelines
81
Java Objects
• String
• Date
• Array
• Boolean
• Math
• RegExp
• HTML DOM
82
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 
6 
7
8
9 <head>
Addition.html
<html xmlns = "http://www.w3.org/1999/xhtml">
(1 of 2)
10 <title>An Addition Program</title>
11
12 <script type = "text/javascript">
13 
38 </script>
39
40 </head>
41 <body>
42 <p>Click Refresh (or Reload) to run the script again</p>
43 </body>
44 </html>
Arithmetic Operators and order of evaluation
JavaScript Arithmetic Algebraic JavaScript
operation operator expression expression
Addition + f+7 f + 7
Subtraction - p–c p - c
Multiplication * bm x-- b * m
y
Division / x / y or or xy x / y
Remainder % r mod s r % s
Fig. 7.12 Arithmetic operators.
Operator(s) Operation(s) Order of evaluation (precedence)
*, / or % Multiplication Evaluated first. If there are several such operations,
Division they are evaluated from left to right.
Modulus
+ or - Addition Evaluated last. If there are several such operations,
Subtraction they are evaluated from left to right.
Fig. 7.13 Precedence of arithmetic operators.
Always use parentheses to ensure desired order of evaluation: (a + b) / 6

Relational (Inequality and Equality) Operators
Standard algebraic JavaScript equality Sample Meaning of
equality operator or or relational JavaScript JavaScript
relational operator operator condition condition
Equality operators
= == x == y x is equal to y
? != x != y x is not equal to y
Relational operators
> > x > y x is greater than y
< < x < y x is less than y
>= x >= y x is greater than or
 equal to y
<= x <= y x is less than or
 equal to y
Fig. 7.15 Equality and relational operators.
Do NOT confuse relational equality operator “==“ with an assignment operator “=“
Order of Precedence for the Basic Operators
Operators Associativity Type

* / % left to right multiplicative
highest + -
left to right additive
< <= > >= left to right relational
== != left to right equality
= right to left assignment
lowest Fig. 7.17 Precedence and associativity of the
operators discussed so far.

IP Lecture - Sildes

Uploaded by

Document Information

Original Description:

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

IP Lecture - Sildes

Uploaded by

Copyright:

Available Formats

CASCADING STYLE

Prepared By Mebiratu B. 4-Feb-22 1

• CSS handles the look and feel part of a web page.

Prepared By Mebiratu B. 4-Feb-22 2

Prepared By Mebiratu B. 4-Feb-22 3

3. Attach the style rules to the document

Prepared By Mebiratu B. 4-Feb-22 4

➢ Each rule selects an element and declares how it should look

• In CSS terminology, the two main sections of a rule are the

Prepared By Mebiratu B. 4-Feb-22 5

Prepared By Mebiratu B. 4-Feb-22 7

✓ most basic type of selector is called an element type

➢ The declaration is made up of a property/value pair.

➢ There can be more than one declaration in a single rule

➢ Each declaration must end with a semicolon

Prepared By Mebiratu B. 4-Feb-22 8

Prepared By Mebiratu B. 4-Feb-22 9

• When using a property, it is important to know which values it

Prepared By Mebiratu B. 4-Feb-22 11

1. External style sheets

Prepared By Mebiratu B. 4-Feb-22 12

• An external style sheet is a separate, text-only document

• It must be named with the .css suffix.

Prepared By Mebiratu B. 4-Feb-22 13

Prepared By Mebiratu B. 4-Feb-22 14

• This value can be any relative or absolute path

Prepared By Mebiratu B. 4-Feb-22 15

.red{ color: red; }

.green{ color: green; }

Prepared By Mebiratu B. 4-Feb-22 16

• <head> <title>HTML external CSS example</title>

• <link rel=”stylesheet” type=”text/css” href=”/html/style.css”>

• <body> <p class=”red”>This is red</p>

• <p class=”thick”>This is thick</p>

• <p class=”green”> This is green</p>

• <p class=”thick green”> This is thick and green</p>

Prepared By Mebiratu B. 4-Feb-22 17

• The style element must be placed in the head of the document

• To define an embedded style sheet, it always start with:

• The body of the style sheet goes within <style type=”text/css”>

➢This should be done when there is a need to change the

➢Rules define in line with the element overrides the rules

➢Example <h1 style="color: red">Introduction</h1>

Prepared By Mebiratu B. 4-Feb-22 23

Prepared By Mebiratu B. 4-Feb-22 24

• Img element is excluded because font-related properties do not apply

• properties related to the styling of text—font size, color, style, etc.—

• Properties such as borders,margins, backgrounds, and so on that affect

Prepared By Mebiratu B. 4-Feb-22 25

• style information is passed down until it is overridden by

• To prevent a specific rule from being overridden, you can

Prepared By Mebiratu B. 4-Feb-22 27

• The more specific the selector, the more weight it is given to

• If you want a rule not to be overridden by a subsequent conflicting

p {color: blue !important;}

• Finally, if there are conflicts within style rules of identical weight,

The CSS id Selector

Prepared By Mebiratu B. 4-Feb-22 34

Prepared By Mebiratu B. 4-Feb-22 35

Prepared By Mebiratu B. 4-Feb-22 37

Prepared By Mebiratu B. 4-Feb-22 39

• Setting the top, right, bottom, and left properties of a