SlideShare a Scribd company logo
1 of 83
Web
StyleSheets
1
Cascading Style Sheet
 Web style sheets are a form of separation of
presentation and content for web design .
 Style sheet can decide the presentation of web pages.
 Style sheet takes care of all the layout, fonts, colors
and overall look of the site.
2
Cascading Style Sheet (contd..)
 Principal means of Styling a document using Cascading
style sheets are:
3
Inline style Sheet
External style Sheet
Embedded style Sheet
Benefits of a Cascading Style Sheet
 Pages download faster.
 Page contains less code, and the pages are shorter and
neat.
 The look of the site is kept consistent throughout all the
pages that work off the same stylesheet.
 Updating the design and general site maintenance are
made much easier.
4
Parts of a Cascading Style Sheet
 CSS syntax is made up of three parts:
5
Selector
Property
Value
HTML tag that you wish to change
The attribute that you wish to change
Each property can take a value
Selector HTML tag that you wish to change
Inline Style Sheet
 Inline style sheets are applied by coding style properties and values
inside the tags to which they apply.
 An inline style sheet can appear inside any tag to directly set its
style. All that is required is to enclose the applicable style properties
and values inside a quoted style attribute.
 Syntax
 <tag style=“property:value [;property:value]…”>
6
Inline Style Sheet(contd.)
<html>
<body>
<pre>
<h1> Inline Style Sheet</h1>
<p style="font-size: 12pt; color:
red">
This is line one
This is line two
This is line three
</p>
</body>
</html>
7
Embedded Style sheet
 Embedded style sheets are used when a unique style is required for a
document.
 Embedded style are defined in the <head> tag section by using the
<style> tag
 When a large number of style settings are used on a Web page, there
is convenience in packaging the settings together in one place as an
embedded style sheet, rather than having them scattered as inline
style sheets throughout the document.
8
Syntax of Style sheet
selector {property: value}
Example
p {color: green}
If the value consist of more than one word the value has to
be embedded within quotes.
p {font-family: “sans-serif”}
If more than one property needs to be defined then the
properties need to be separated by semi colon.
p {font-family: “sans-serif” ; color: green}
9
Example of an Embedded Style sheet
<html>
<head>
<style type="text/css">
p {font-family:"sans-serif"; color: green}
hr {color: red}
body {color:blue; background-color:pink}
</style>
</head>
<body>
<p>This is paragraph one</p>
<hr>
<p> This is paragraph two</p>
<hr>
This line is not within paragraph tag
</body>
</html>
10
External Style Sheet
 Internal style sheets are used when a unique style is required for a
document.
 Internal style are defined in the <head> tag section by using the
<style> tag
 The different selectors, their properties and values should be
defined within the external style sheet.
 The external style sheet should be saved within a file, with an
extension of .css
11
External Style sheet
12
Background is defined
Paragraph font color is
defined
Horizontal color is defined
Mystyle.css
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
FirstPage.html
SecondPage.html
Requires the background,
Paragraph and horizontal
Rule setting defined
In Mystyle.css
Both the html files uses
<link rel="stylesheet" type="text/css"
href=“Mystyle.css" />
Example of External style sheet
body {background-color: yellow}
h1 {font-size: 36pt}
p {margin-left: 50px; background: pink;
color:blue}
hr {color: red}
Mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css"
href="Mystyle.css" />
</head>
<body>
<h1> This header is 36 pt </h1>
<p> This paragraph has a left margin of 50
pixels<br>
The font color is blue<br>
The background color is pink
</p>
<hr>
</body>
</html>
MyPage.html
13
MyPage.html is using styles
defined in Mystyle.css
Multiple Style sheet
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”>
<style type=“text/css”>
h3 {font-size: 20pt}
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
14
Mypage.html Links to
Mystyle.css
The font size of <h3> is redefined here
What will be the
Font size
Of <h3>
8pt or 20 pt??
Multiple Style sheet Continued
15
• 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 .
h3 { color: red;
text-align: left;
font-size: 8pt }
Mystyle.css
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“Mystyle.css”>
<style type=“text/css”>
h3 {font-size: 20pt}
</style>
</head>
<body>
<h3> This is a header </h3>
---more text----
</body>
</html>
MyPage.html
Color: Red
Text-align-left
Font-size- 20pt
TheHTMLwill inheritthe
Fontcolorandalingment
FromMystyle.css Font Size will be Inherited
From the Internal Style sheet
Some common selectors and attributes
Selector property
H1,H2,H3….. font-size,Font-family,font-style , font-weight
Color, margin
P font-size,Font-family,font-style , font-weight
Color, Background-color,text-align, margin
HR color
body Background-color, font-size,Font-family,font-style , font-
weight, margin
16
Class Selector
 With the class selector you can
define different styles for the
same type of HTML element.
<html>
<head>
<link rel=“stylesheet”
type=“text/css”
href=“Mystyle.css”>
</head>
<body>
<p class=“one”>This paragraph is
Right aligned </p>
<p class=“two”>This paragraph is
Left aligned</p>
</body>
</html>
MyPage.html
17
p.one {text-align: right; color: white;
background-color: black}
p.two {text-align: left; color: black;
background-color: Red}
Mystyle.css
Using <span> in CSS
 SPAN is a inline tag.
 It is used to format
small chunks of data
within another element.
 Combining <span> tag
with CSS allows us to
create custom tags.
18
What is the
Utility of
<span> in
HTML
Using <span> in CSS (contd.)
p { color: white ; background-color:
black}
.example1 {color:blue ; background-
color: yellow ;font-family: "sans-
serif"}
.example2 {color:red ; background-
color: white ;font-family: times}
Mystyle.css
<html>
<head>
<link rel="stylesheet"
type="text/css" href="Mystyle.css" />
</head>
<body>
<p >
This is the first line of the paragraph<br>
This is the second line of the
paragraph<br>
<span class="example1">This is the third
line of the paragraph<br> </span>
<span class="example2">This is the fourth
line of the paragraph<br> </span>
This is the fifth line of the paragraph
</p>
</body>
</html>
MyPage.html
19
JAVASCRIPT
 JavaScript is used in millions of Web pages to
improve the design, validate forms, and much
more. JavaScript was developed by Netscape and
is the most popular scripting language on the
internet.
 What can a JavaScript Do?
 JavaScript gives HTML designers a programming
tool - HTML authors are normally not
programmers, but JavaScript is a scripting
language with a very simple syntax! Almost
anyone can put small "snippets" of code into their
HTML pages
 JavaScript can put dynamic text into an HTML
page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can
write a variable text into an HTML page
JAVASCRIPT
 JavaScript can react to events - A JavaScript can
be set to execute when something happens, like
when a page has finished loading or when a user
clicks on an HTML element
 JavaScript can read and write HTML elements - A
JavaScript can read and change the content of an
HTML element
 JavaScript can be used to validate data - A
JavaScript can be used to validate form data
before it is submitted to a server, this will save
the server from extra processing
Objectives
 Introduction to JavaScript
 Introduction to JavaScript programming language
 Using Script tag
 Inserting Java Script into tags
 Linking Java Script from separate files
 JavaScript expression and Operators
 Defining and naming variables
 Data Types
 Expression
 Operators – Arithmetic, String, Logical, Assignment, typeof
22
Objectives (Contd.)
 Functions and Flow Control
 Flow Control
 If…else
 For loops
 while loops
 Break and continue statements
 Using JavaScript functions
 Built in functions
 User defined functions
 Returning values from functions
 Events, Event Handlers
23
Introduction to Java Scripts
 What is JavaScript???
 JavaScript is a scripting Language created by Netscape
24
What is a
Scripting
Language???
What is a
Scripting
Language???
•Scripting Language is a lightweight
programming language.
• Scripting Languages are not
needed to be compiled.
•The language is interpreted at
runtime.
Introduction to JavaScript
(Contd.)
 A JavaScript is usually directly embedded in an HTML page.
 External JavaScripts can be created which can be used by
HTML pages.
 JavaScript adds interactivity to HTML pages.
 JavaScript's are integrated into the browsing environment.
25
Introduction to JavaScript (Contd.)
Is
JavaScript
same as
Java???
Is
JavaScript
same as
Java???
 Java is a programming
language which requires
compilation and
interpretation.
 Java is used to make large
scale applications.
 JavaScript is a scripting
language which just requires
interpretation. The script is
some set of commands which
the browser interprets.
 JavaScript is used to add
interactivity in HTML Pages.
26
Types of JavaScript
 Client-Side JavaScript (CSJS) -- an extended version of JavaScript
that enables the enhancement and manipulation of web pages and
client browsers.
 Server-Side JavaScript (SSJS) -- an extended version of JavaScript
that enables back-end access to databases, file systems, and
servers.
 Core JavaScript -- the base JavaScript language.
27
Uses of JavaScript (Client
Side)
 Form Validation
 Math Functions
 Special effects with document and background
 Status bar manipulation
 Messages
 Mouse Cursor Effects
 Links
28
Syntax rules of JavaScript
 Statements may or may not contain a semicolon at the
end.
 Multiple statements on one line must be separated by a
semicolon.
 JavaScript is case sensitive.
29
Using <script> tag
 The HTML <script> tag is used to enter JavaScript into a HTML.
 The <script> tag can be embedded within
 <head> tag.
 <body> tag.
 JavaScript in the head section will be executed when called.
 JavaScript in the body section will be executed while the
HTML page is loaded.
 Unlimited number of JavaScript’s can be placed both in head
and body section in a HTML document.
30
Using <script> tag
Eg:
<html>
<head><title>Example</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
31
Is a standard command for writing output
to a page
How to Handle Older Browsers
 Browsers that do not support JavaScript will display the script as it
is. Use the HTML comment tag to prevent this.
Eg.
<script type="text/javascript">
<!--
document.write("Hello World!")
// -->
</script>
32
The two forward slashes at the end of comment line
(//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from compiling
the line.
Using an External JavaScript
 A JavaScript can be written in an external file, which
can be used by different HTML pages.
 The external script cannot contain the <script> tag.
 The external file needs to end with the .js extension.
33
Using External JavaScript (contd.)
34
document.write("This line
has been writen in the
External JavaScript!!!")
External.js
<html>
<head><title>Example</title>
</head>
<body>
<script src="External.js">
</script>>
<p >
This line has been written in the
html page!!!
</p>
</body>
</html>
JavaScript.html
Variables
 A variable is a "container" for information you want
to store. A variable is a symbolic name that
represents some data in the memory.
 A variable's value can change during the script. You
can refer to a variable by name to see its value or
to change its value.
 Rules for Variable names:
 Variable names are case sensitive
 They must begin with a letter or the underscore
character
Variables
 The variable name is on the left side of the expression and the
value you want to assign to the variable is on the right.
 Variable Declaration
 Variables can be declared using the var statement
var <variable name>=some value
 Variables can also be created without using var statement
<variable name>=some value
 Eg
var firstname=“Samuel”
OR
firstname=“Samuel”
Variables
 Lifetime of Variables
 When you declare a variable within a
function, the variable can only be accessed
within that function. When you exit the
function, the variable is destroyed. These
variables are called local variables. You can
have local variables with the same name in
different functions, because each is
recognized only by the function in which it is
declared.
 If you declare a variable outside a function,
all the functions on your page can access it.
The lifetime of these variables starts when
they are declared, and ends when the page is
closed.
Data Type in JavaScript
 JavaScript is a loosely typed language.
 Data Type of Variable
need not be specified
during declaration.
 Data types are
automatically
converted during script
execution.
38
Loosely
Typed??
Loosely
Typed??
Data Type in JavaScript
(contd.)
 JavaScript recognizes the following type of values:
39
ValuesValues
string
numbers
null
boolean
9, 3.56
true or false
Samuel, ”Samuel J Palmisano”
A Special keyword which refers to
nothing
Data Type in JavaScript (contd.)
40
JavaScript Operators: are used to
operate on values.
41
Arithmetic Assignment Conditional
String
Comparison
Logical
OperatorsOperators
typeof
JavaScript Operator (contd.)
42
Arithmetic
JavaScript Operator (contd.)
43
Assignment
JavaScript Operator (contd.)
44
Logical
JavaScript Operator (contd.)
45
String
JavaScript Operator (contd.)
46
Conditional
JavaScript Operator (contd.)
47
typeof
Flow Control
 Conditional Statements
 if statement - use this statement if you want to execute some code only
if a specified condition is true.
 if...else statement - use this statement if you want to execute some
code if the condition is true and another code if the condition is false.
 if...else if....else statement - use this statement if you want to select
one of many blocks of code to be executed.
 switch statement - use this statement if you want to select one of many
blocks of code to be executed.
48
while statement
49
break and continue
Statements
 There are two special statements that can be used
inside loops:
 break.
 continue.
 Break
 The break command will break the loop and
continue executing the code that follows after the
loop (if any).
 Continue
 The continue command will break the current loop
and continue with the next value.
50
Example of break statement
51
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=5;i++)
{if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2
Example of continue
statement
52
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=5;i++)
{ if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
Result
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
For loop
53
For….in Statement
 Loops through the elements of an array Syntax
For(variable in array)
{
Code to be execute
}
The code in the body of the for…in loop is executed once for each element
54
Example
 <html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
  {
  document.write(mycars[x] + "<br />");
  }
</script>
</body>
</html>
55
Functions
 A function is a reusable piece of code that will be
executed when called for.
 A function can be called from anywhere from within the
page or even from other pages if the function is stored
in an external JavaScript (.js) file.
 Functions can be embedded in the <head></head> and
within the<body> </body> tag.
56
Predefined functions in JavaScript
 DialogBoxes
 alert( message)
Displays an alert box with a
message defined by the string
message.
Eg.
alert(“An Error Occurred!”)
57
Predefined functions in JavaScript
(contd.)
 confirm(message)
 When called, it will display the message
and two boxes. One box is "OK" and the
other is "Cancel". If OK is selected, a
value of true is returned, otherwise a
value of false is returned.
Eg.
confirm(“Do you wish to Continue?”)
58
Predefined functions in JavaScript
(contd.)
 prompt(message)
 Displays a box with the
message passed to the function
displayed.
 The user can then enter text in
the prompt field, and choose
OK or Cancel.
 If the user chooses Cancel, a
NULL value is returned. If the
user chooses OK, the string
value entered in the field is
returned.
Eg:
prompt(“enter your Name”)
59
Predefined functions in
JavaScript (contd.)
 Conversion Functions
 eval(string)
Converts a string to an integer or a float value.
Eg
x=“20”
y=eval(x)+10
y contains the value 30
60
Predefined functions in
JavaScript (contd.)
 isNaN(value)
If the value passed is not a number then a boolean value of true
is returned else the boolean value of false is returned.
Eg
x=“Samuel”
y=isNaN(x)
The value stored in y is true
61
Predefined functions in
JavaScript (contd.)
 parseInt(string)
Converts a string to an integer returning the first integer
encountered which is contained in the string.
Eg
x=77AB67
y=parseInt(x)
y stores the value 77
62
Predefined functions in
JavaScript (contd.)
 parseFloat(string)
Converts a string to an float value .
Eg
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5
63
User Defined Functions
64
User Defined Functions (contd.)
65
User Defined Functions (contd.)
66
Events
 Events are actions that can be detected by JavaScript
 Every element on a web page has certain events which trigger
javaScript
 Example of events:
 A mouse click
 A web page or an image loading
 Mousing over a spot on the web page
 Selecting an input field in an HTML form
 Submitting an HTML form
 A key stroke
Events are normally used in combination with functions and the function will not be
executed before the event occurs
67
Events
68
Events (contd.)
69
Event Handlers
70
Common Event Handlers
71
Common Event Handlers (contd.)
72
Common Event Handlers
(contd.)
 onLoad and onUnload
 The onload and onUnload events are triggered when the
user enters or leaves the page.
 The onload event is also triggered when the image is
loaded.
73
The showstatus() function will be called when a user enters a page
<body onload=“showStatus()”>
Common Event Handlers
(contd.)
 onFocus, onBlur and onChange
 The onFocus, onBlur and onChange events are often used
in combination with validation of form fields.
74
The checkEmail() function will be called whenever the user changes the
content of the field:
<input type="text" size="30" id="email"
onchange="checkEmail()">;
Common Event Handlers
(contd.)
 onSubmit
 The onSubmit event is used to validate ALL form fields
before submitting it.
75
The checkForm() function will be called when the user clicks the submit
button in the form.
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
Common Event Handlers
(contd.)
 onMouseOver and onMouseOut
 onMouseOver and onMouseOut are often used to create
"animated" buttons.
76
An alert box appears when an onMouseOver event is
detected:
<a href="http://www.spi.com" onmouseover="alert('An
onMouseOver event’)”> <img src=“logo.gif" width="100"
height="30"> </a>
Handling Errors
The try...catch Statement
The try...catch statement allows you to test a block of code for
errors. The try block contains the code to be run, and the catch
block contains the code to be executed if an error occurs.
Syntax
try
  {
  //Run some code here
  }
catch(err)
  {
  //Handle errors here
  }
77
 The example is supposed to
alert "Welcome guest!"
when the button is clicked.
However, there's a typo in
the message() function.
alert() is misspelled as
adddlert(). A JavaScript
error occurs. The catch
block catches the error and
executes a custom code to
handle it. The code displays
a custom error message
informing the user what
happened:
 <html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.nn";
  txt+="Error description: " + err.description +
"nn";
  txt+="Click OK to continue.nn";
  alert(txt);
  }
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html> 78
The Throw Statement
 The throw statement allows you to create an
exception. If you use this statement together with
the try...catch statement, you can control program
flow and generate accurate error messages.
 Syntax
 throw(exception)
 The exception can be a string, integer, Boolean or
an object.
79
The example determines the value of a variable called x. If the value of x is higher
than 10, lower than 0, or not a number, we are going to throw an error. The error is
then caught by the catch argument and the proper error message is displayed:
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0
and 10:","");
try
  {
  if(x>10)
    {
    throw "Err1";
    }
  else if(x<0)
    {
    throw "Err2";
    }
  else if(isNaN(x))
    {
    throw "Err3";
    }
  }
catch(er)
  {
  if(er=="Err1")
    {
    alert("Error! The value is too high");
    }
  if(er=="Err2")
    {
    alert("Error! The value is too low");
    }
  if(er=="Err3")
    {
    alert("Error! The value is not a
number");
    }
  }
</script>
</body>
</html>
80
Defining Arrays
 An Array object is used to store a set of values in a single variable
name.
 An Array object is created with the new keyword.
 An array can be created as:
 var MyArray=new Array()
 An array can also be created by specifying the array size.
 var MyArray=new Array(3)
81
Arrays (contd.)
 Data can be entered into an array as:
var MyArray=new Array()
MyArray[0]=“Paul”
MyArray[1]=“Sam”
MyArray[2]=“Niel”
 Data can also be entered into an array as:
var MyArray=new Array(“Paul”,”Sam”, “Niel”)
82
Arrays (contd.)
 Accessing Arrays
 You can refer to a particular element in an array by
referring to the name of the array and the index number.
 The index number starts at 0 .
var MyArray=new Array()
Myarray [0]
83

More Related Content

What's hot (20)

Introduction to Sightly
Introduction to SightlyIntroduction to Sightly
Introduction to Sightly
 
Java Script An Introduction By HWA
Java Script An Introduction By HWAJava Script An Introduction By HWA
Java Script An Introduction By HWA
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
1. java script language fundamentals
1. java script language fundamentals1. java script language fundamentals
1. java script language fundamentals
 
Java Script
Java ScriptJava Script
Java Script
 
Wt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side frameworkWt unit 5 client &amp; server side framework
Wt unit 5 client &amp; server side framework
 
CSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JSCSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JS
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Sightly - Part 2
Sightly - Part 2Sightly - Part 2
Sightly - Part 2
 
Java script
Java scriptJava script
Java script
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Introduction to HTML, CSS, and Javascript
Introduction to HTML, CSS, and JavascriptIntroduction to HTML, CSS, and Javascript
Introduction to HTML, CSS, and Javascript
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
HTML 5 Simple Tutorial Part 3
HTML 5 Simple Tutorial Part 3HTML 5 Simple Tutorial Part 3
HTML 5 Simple Tutorial Part 3
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Javascript by geetanjali
Javascript by geetanjaliJavascript by geetanjali
Javascript by geetanjali
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to know
 

Viewers also liked

Java script final presentation
Java script final presentationJava script final presentation
Java script final presentationAdhoura Academy
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
C++ L02-Conversion+enum+Operators
C++ L02-Conversion+enum+OperatorsC++ L02-Conversion+enum+Operators
C++ L02-Conversion+enum+OperatorsMohammad Shaker
 
Java Script Object Notation (JSON)
Java Script Object Notation (JSON)Java Script Object Notation (JSON)
Java Script Object Notation (JSON)Adnan Sohail
 
Introduction to JavaScript: Week Two
Introduction to JavaScript: Week TwoIntroduction to JavaScript: Week Two
Introduction to JavaScript: Week TwoEvent Handler
 
Java Script
Java ScriptJava Script
Java Scriptsiddaram
 
An Introduction to JavaScript: Week 4
An Introduction to JavaScript: Week 4An Introduction to JavaScript: Week 4
An Introduction to JavaScript: Week 4Event Handler
 
Unchallengeable miracle of Holy Quran
Unchallengeable miracle of  Holy QuranUnchallengeable miracle of  Holy Quran
Unchallengeable miracle of Holy Quranyoursincerefriend
 
An Introduction to JavaScript: Week 3
An Introduction to JavaScript: Week 3An Introduction to JavaScript: Week 3
An Introduction to JavaScript: Week 3Event Handler
 
The Big Bang Theory: Nine Steps To Building Your Meetup Empire
The Big Bang Theory: Nine Steps To Building Your Meetup EmpireThe Big Bang Theory: Nine Steps To Building Your Meetup Empire
The Big Bang Theory: Nine Steps To Building Your Meetup EmpireSeh Hui Leong
 
An Introduction to JavaScript: Week 5
An Introduction to JavaScript: Week 5An Introduction to JavaScript: Week 5
An Introduction to JavaScript: Week 5Event Handler
 
The big bang theory - UNIT 2
The big bang theory - UNIT 2The big bang theory - UNIT 2
The big bang theory - UNIT 2lm092068
 
8. java script
8. java script8. java script
8. java scriptAnusAhmad
 

Viewers also liked (20)

Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Inside jQuery (2011)
Inside jQuery (2011)Inside jQuery (2011)
Inside jQuery (2011)
 
Java script
Java scriptJava script
Java script
 
C++ L02-Conversion+enum+Operators
C++ L02-Conversion+enum+OperatorsC++ L02-Conversion+enum+Operators
C++ L02-Conversion+enum+Operators
 
JSON - Quick Overview
JSON - Quick OverviewJSON - Quick Overview
JSON - Quick Overview
 
Java Script Object Notation (JSON)
Java Script Object Notation (JSON)Java Script Object Notation (JSON)
Java Script Object Notation (JSON)
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
 
Introduction to JSON
Introduction to JSONIntroduction to JSON
Introduction to JSON
 
Introduction to JavaScript: Week Two
Introduction to JavaScript: Week TwoIntroduction to JavaScript: Week Two
Introduction to JavaScript: Week Two
 
Java Script
Java ScriptJava Script
Java Script
 
An Introduction to JavaScript: Week 4
An Introduction to JavaScript: Week 4An Introduction to JavaScript: Week 4
An Introduction to JavaScript: Week 4
 
Unchallengeable miracle of Holy Quran
Unchallengeable miracle of  Holy QuranUnchallengeable miracle of  Holy Quran
Unchallengeable miracle of Holy Quran
 
An Introduction to JavaScript: Week 3
An Introduction to JavaScript: Week 3An Introduction to JavaScript: Week 3
An Introduction to JavaScript: Week 3
 
The Big Bang Theory: Nine Steps To Building Your Meetup Empire
The Big Bang Theory: Nine Steps To Building Your Meetup EmpireThe Big Bang Theory: Nine Steps To Building Your Meetup Empire
The Big Bang Theory: Nine Steps To Building Your Meetup Empire
 
An Introduction to JavaScript: Week 5
An Introduction to JavaScript: Week 5An Introduction to JavaScript: Week 5
An Introduction to JavaScript: Week 5
 
The big bang theory - UNIT 2
The big bang theory - UNIT 2The big bang theory - UNIT 2
The big bang theory - UNIT 2
 
8. java script
8. java script8. java script
8. java script
 

Similar to CSS Web Style Sheets Guide

Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssTesfaye Yenealem
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.pptssuser568d77
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptxbodepallivamsi1122
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Ayes Chinmay
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-endCETPA Infotech
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8RohanMistry15
 
Cascading style-sheet-
Cascading style-sheet-Cascading style-sheet-
Cascading style-sheet-Nimrakhan89
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.netProgrammer Blog
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshMukesh Kumar
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte
 
Super billing asp.net
Super billing   asp.netSuper billing   asp.net
Super billing asp.netsuperb11b
 

Similar to CSS Web Style Sheets Guide (20)

Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Html and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptx
 
DHTML
DHTMLDHTML
DHTML
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS]
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-end
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
Cascading style-sheet-
Cascading style-sheet-Cascading style-sheet-
Cascading style-sheet-
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
Super billing asp.net
Super billing   asp.netSuper billing   asp.net
Super billing asp.net
 

Recently uploaded

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 

CSS Web Style Sheets Guide

  • 2. Cascading Style Sheet  Web style sheets are a form of separation of presentation and content for web design .  Style sheet can decide the presentation of web pages.  Style sheet takes care of all the layout, fonts, colors and overall look of the site. 2
  • 3. Cascading Style Sheet (contd..)  Principal means of Styling a document using Cascading style sheets are: 3 Inline style Sheet External style Sheet Embedded style Sheet
  • 4. Benefits of a Cascading Style Sheet  Pages download faster.  Page contains less code, and the pages are shorter and neat.  The look of the site is kept consistent throughout all the pages that work off the same stylesheet.  Updating the design and general site maintenance are made much easier. 4
  • 5. Parts of a Cascading Style Sheet  CSS syntax is made up of three parts: 5 Selector Property Value HTML tag that you wish to change The attribute that you wish to change Each property can take a value Selector HTML tag that you wish to change
  • 6. Inline Style Sheet  Inline style sheets are applied by coding style properties and values inside the tags to which they apply.  An inline style sheet can appear inside any tag to directly set its style. All that is required is to enclose the applicable style properties and values inside a quoted style attribute.  Syntax  <tag style=“property:value [;property:value]…”> 6
  • 7. Inline Style Sheet(contd.) <html> <body> <pre> <h1> Inline Style Sheet</h1> <p style="font-size: 12pt; color: red"> This is line one This is line two This is line three </p> </body> </html> 7
  • 8. Embedded Style sheet  Embedded style sheets are used when a unique style is required for a document.  Embedded style are defined in the <head> tag section by using the <style> tag  When a large number of style settings are used on a Web page, there is convenience in packaging the settings together in one place as an embedded style sheet, rather than having them scattered as inline style sheets throughout the document. 8
  • 9. Syntax of Style sheet selector {property: value} Example p {color: green} If the value consist of more than one word the value has to be embedded within quotes. p {font-family: “sans-serif”} If more than one property needs to be defined then the properties need to be separated by semi colon. p {font-family: “sans-serif” ; color: green} 9
  • 10. Example of an Embedded Style sheet <html> <head> <style type="text/css"> p {font-family:"sans-serif"; color: green} hr {color: red} body {color:blue; background-color:pink} </style> </head> <body> <p>This is paragraph one</p> <hr> <p> This is paragraph two</p> <hr> This line is not within paragraph tag </body> </html> 10
  • 11. External Style Sheet  Internal style sheets are used when a unique style is required for a document.  Internal style are defined in the <head> tag section by using the <style> tag  The different selectors, their properties and values should be defined within the external style sheet.  The external style sheet should be saved within a file, with an extension of .css 11
  • 12. External Style sheet 12 Background is defined Paragraph font color is defined Horizontal color is defined Mystyle.css Requires the background, Paragraph and horizontal Rule setting defined In Mystyle.css FirstPage.html SecondPage.html Requires the background, Paragraph and horizontal Rule setting defined In Mystyle.css Both the html files uses <link rel="stylesheet" type="text/css" href=“Mystyle.css" />
  • 13. Example of External style sheet body {background-color: yellow} h1 {font-size: 36pt} p {margin-left: 50px; background: pink; color:blue} hr {color: red} Mystyle.css <html> <head> <link rel="stylesheet" type="text/css" href="Mystyle.css" /> </head> <body> <h1> This header is 36 pt </h1> <p> This paragraph has a left margin of 50 pixels<br> The font color is blue<br> The background color is pink </p> <hr> </body> </html> MyPage.html 13 MyPage.html is using styles defined in Mystyle.css
  • 14. Multiple Style sheet h3 { color: red; text-align: left; font-size: 8pt } Mystyle.css <html> <head> <link rel=“stylesheet” type=“text/css” href=“Mystyle.css”> <style type=“text/css”> h3 {font-size: 20pt} </style> </head> <body> <h3> This is a header </h3> ---more text---- </body> </html> MyPage.html 14 Mypage.html Links to Mystyle.css The font size of <h3> is redefined here What will be the Font size Of <h3> 8pt or 20 pt??
  • 15. Multiple Style sheet Continued 15 • 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 . h3 { color: red; text-align: left; font-size: 8pt } Mystyle.css <html> <head> <link rel=“stylesheet” type=“text/css” href=“Mystyle.css”> <style type=“text/css”> h3 {font-size: 20pt} </style> </head> <body> <h3> This is a header </h3> ---more text---- </body> </html> MyPage.html Color: Red Text-align-left Font-size- 20pt TheHTMLwill inheritthe Fontcolorandalingment FromMystyle.css Font Size will be Inherited From the Internal Style sheet
  • 16. Some common selectors and attributes Selector property H1,H2,H3….. font-size,Font-family,font-style , font-weight Color, margin P font-size,Font-family,font-style , font-weight Color, Background-color,text-align, margin HR color body Background-color, font-size,Font-family,font-style , font- weight, margin 16
  • 17. Class Selector  With the class selector you can define different styles for the same type of HTML element. <html> <head> <link rel=“stylesheet” type=“text/css” href=“Mystyle.css”> </head> <body> <p class=“one”>This paragraph is Right aligned </p> <p class=“two”>This paragraph is Left aligned</p> </body> </html> MyPage.html 17 p.one {text-align: right; color: white; background-color: black} p.two {text-align: left; color: black; background-color: Red} Mystyle.css
  • 18. Using <span> in CSS  SPAN is a inline tag.  It is used to format small chunks of data within another element.  Combining <span> tag with CSS allows us to create custom tags. 18 What is the Utility of <span> in HTML
  • 19. Using <span> in CSS (contd.) p { color: white ; background-color: black} .example1 {color:blue ; background- color: yellow ;font-family: "sans- serif"} .example2 {color:red ; background- color: white ;font-family: times} Mystyle.css <html> <head> <link rel="stylesheet" type="text/css" href="Mystyle.css" /> </head> <body> <p > This is the first line of the paragraph<br> This is the second line of the paragraph<br> <span class="example1">This is the third line of the paragraph<br> </span> <span class="example2">This is the fourth line of the paragraph<br> </span> This is the fifth line of the paragraph </p> </body> </html> MyPage.html 19
  • 20. JAVASCRIPT  JavaScript is used in millions of Web pages to improve the design, validate forms, and much more. JavaScript was developed by Netscape and is the most popular scripting language on the internet.  What can a JavaScript Do?  JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages  JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
  • 21. JAVASCRIPT  JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element  JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element  JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server, this will save the server from extra processing
  • 22. Objectives  Introduction to JavaScript  Introduction to JavaScript programming language  Using Script tag  Inserting Java Script into tags  Linking Java Script from separate files  JavaScript expression and Operators  Defining and naming variables  Data Types  Expression  Operators – Arithmetic, String, Logical, Assignment, typeof 22
  • 23. Objectives (Contd.)  Functions and Flow Control  Flow Control  If…else  For loops  while loops  Break and continue statements  Using JavaScript functions  Built in functions  User defined functions  Returning values from functions  Events, Event Handlers 23
  • 24. Introduction to Java Scripts  What is JavaScript???  JavaScript is a scripting Language created by Netscape 24 What is a Scripting Language??? What is a Scripting Language??? •Scripting Language is a lightweight programming language. • Scripting Languages are not needed to be compiled. •The language is interpreted at runtime.
  • 25. Introduction to JavaScript (Contd.)  A JavaScript is usually directly embedded in an HTML page.  External JavaScripts can be created which can be used by HTML pages.  JavaScript adds interactivity to HTML pages.  JavaScript's are integrated into the browsing environment. 25
  • 26. Introduction to JavaScript (Contd.) Is JavaScript same as Java??? Is JavaScript same as Java???  Java is a programming language which requires compilation and interpretation.  Java is used to make large scale applications.  JavaScript is a scripting language which just requires interpretation. The script is some set of commands which the browser interprets.  JavaScript is used to add interactivity in HTML Pages. 26
  • 27. Types of JavaScript  Client-Side JavaScript (CSJS) -- an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers.  Server-Side JavaScript (SSJS) -- an extended version of JavaScript that enables back-end access to databases, file systems, and servers.  Core JavaScript -- the base JavaScript language. 27
  • 28. Uses of JavaScript (Client Side)  Form Validation  Math Functions  Special effects with document and background  Status bar manipulation  Messages  Mouse Cursor Effects  Links 28
  • 29. Syntax rules of JavaScript  Statements may or may not contain a semicolon at the end.  Multiple statements on one line must be separated by a semicolon.  JavaScript is case sensitive. 29
  • 30. Using <script> tag  The HTML <script> tag is used to enter JavaScript into a HTML.  The <script> tag can be embedded within  <head> tag.  <body> tag.  JavaScript in the head section will be executed when called.  JavaScript in the body section will be executed while the HTML page is loaded.  Unlimited number of JavaScript’s can be placed both in head and body section in a HTML document. 30
  • 31. Using <script> tag Eg: <html> <head><title>Example</title> </head> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> 31 Is a standard command for writing output to a page
  • 32. How to Handle Older Browsers  Browsers that do not support JavaScript will display the script as it is. Use the HTML comment tag to prevent this. Eg. <script type="text/javascript"> <!-- document.write("Hello World!") // --> </script> 32 The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line.
  • 33. Using an External JavaScript  A JavaScript can be written in an external file, which can be used by different HTML pages.  The external script cannot contain the <script> tag.  The external file needs to end with the .js extension. 33
  • 34. Using External JavaScript (contd.) 34 document.write("This line has been writen in the External JavaScript!!!") External.js <html> <head><title>Example</title> </head> <body> <script src="External.js"> </script>> <p > This line has been written in the html page!!! </p> </body> </html> JavaScript.html
  • 35. Variables  A variable is a "container" for information you want to store. A variable is a symbolic name that represents some data in the memory.  A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value.  Rules for Variable names:  Variable names are case sensitive  They must begin with a letter or the underscore character
  • 36. Variables  The variable name is on the left side of the expression and the value you want to assign to the variable is on the right.  Variable Declaration  Variables can be declared using the var statement var <variable name>=some value  Variables can also be created without using var statement <variable name>=some value  Eg var firstname=“Samuel” OR firstname=“Samuel”
  • 37. Variables  Lifetime of Variables  When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared.  If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
  • 38. Data Type in JavaScript  JavaScript is a loosely typed language.  Data Type of Variable need not be specified during declaration.  Data types are automatically converted during script execution. 38 Loosely Typed?? Loosely Typed??
  • 39. Data Type in JavaScript (contd.)  JavaScript recognizes the following type of values: 39 ValuesValues string numbers null boolean 9, 3.56 true or false Samuel, ”Samuel J Palmisano” A Special keyword which refers to nothing
  • 40. Data Type in JavaScript (contd.) 40
  • 41. JavaScript Operators: are used to operate on values. 41 Arithmetic Assignment Conditional String Comparison Logical OperatorsOperators typeof
  • 48. Flow Control  Conditional Statements  if statement - use this statement if you want to execute some code only if a specified condition is true.  if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false.  if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed.  switch statement - use this statement if you want to select one of many blocks of code to be executed. 48
  • 50. break and continue Statements  There are two special statements that can be used inside loops:  break.  continue.  Break  The break command will break the loop and continue executing the code that follows after the loop (if any).  Continue  The continue command will break the current loop and continue with the next value. 50
  • 51. Example of break statement 51 <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=5;i++) {if (i==3){break} document.write("The number is " + i) document.write("<br />") } </script> </body> </html> Result The number is 0 The number is 1 The number is 2
  • 52. Example of continue statement 52 <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=5;i++) { if (i==3){continue} document.write("The number is " + i) document.write("<br />") } </script> </body> </html> Result The number is 0 The number is 1 The number is 2 The number is 4 The number is 5
  • 54. For….in Statement  Loops through the elements of an array Syntax For(variable in array) { Code to be execute } The code in the body of the for…in loop is executed once for each element 54
  • 55. Example  <html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars)   {   document.write(mycars[x] + "<br />");   } </script> </body> </html> 55
  • 56. Functions  A function is a reusable piece of code that will be executed when called for.  A function can be called from anywhere from within the page or even from other pages if the function is stored in an external JavaScript (.js) file.  Functions can be embedded in the <head></head> and within the<body> </body> tag. 56
  • 57. Predefined functions in JavaScript  DialogBoxes  alert( message) Displays an alert box with a message defined by the string message. Eg. alert(“An Error Occurred!”) 57
  • 58. Predefined functions in JavaScript (contd.)  confirm(message)  When called, it will display the message and two boxes. One box is "OK" and the other is "Cancel". If OK is selected, a value of true is returned, otherwise a value of false is returned. Eg. confirm(“Do you wish to Continue?”) 58
  • 59. Predefined functions in JavaScript (contd.)  prompt(message)  Displays a box with the message passed to the function displayed.  The user can then enter text in the prompt field, and choose OK or Cancel.  If the user chooses Cancel, a NULL value is returned. If the user chooses OK, the string value entered in the field is returned. Eg: prompt(“enter your Name”) 59
  • 60. Predefined functions in JavaScript (contd.)  Conversion Functions  eval(string) Converts a string to an integer or a float value. Eg x=“20” y=eval(x)+10 y contains the value 30 60
  • 61. Predefined functions in JavaScript (contd.)  isNaN(value) If the value passed is not a number then a boolean value of true is returned else the boolean value of false is returned. Eg x=“Samuel” y=isNaN(x) The value stored in y is true 61
  • 62. Predefined functions in JavaScript (contd.)  parseInt(string) Converts a string to an integer returning the first integer encountered which is contained in the string. Eg x=77AB67 y=parseInt(x) y stores the value 77 62
  • 63. Predefined functions in JavaScript (contd.)  parseFloat(string) Converts a string to an float value . Eg x=77.5AB67 y=parseFloat(x) y stores the value 77.5 63
  • 65. User Defined Functions (contd.) 65
  • 66. User Defined Functions (contd.) 66
  • 67. Events  Events are actions that can be detected by JavaScript  Every element on a web page has certain events which trigger javaScript  Example of events:  A mouse click  A web page or an image loading  Mousing over a spot on the web page  Selecting an input field in an HTML form  Submitting an HTML form  A key stroke Events are normally used in combination with functions and the function will not be executed before the event occurs 67
  • 72. Common Event Handlers (contd.) 72
  • 73. Common Event Handlers (contd.)  onLoad and onUnload  The onload and onUnload events are triggered when the user enters or leaves the page.  The onload event is also triggered when the image is loaded. 73 The showstatus() function will be called when a user enters a page <body onload=“showStatus()”>
  • 74. Common Event Handlers (contd.)  onFocus, onBlur and onChange  The onFocus, onBlur and onChange events are often used in combination with validation of form fields. 74 The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()">;
  • 75. Common Event Handlers (contd.)  onSubmit  The onSubmit event is used to validate ALL form fields before submitting it. 75 The checkForm() function will be called when the user clicks the submit button in the form. <form method="post" action="xxx.htm" onsubmit="return checkForm()">
  • 76. Common Event Handlers (contd.)  onMouseOver and onMouseOut  onMouseOver and onMouseOut are often used to create "animated" buttons. 76 An alert box appears when an onMouseOver event is detected: <a href="http://www.spi.com" onmouseover="alert('An onMouseOver event’)”> <img src=“logo.gif" width="100" height="30"> </a>
  • 77. Handling Errors The try...catch Statement The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs. Syntax try   {   //Run some code here   } catch(err)   {   //Handle errors here   } 77
  • 78.  The example is supposed to alert "Welcome guest!" when the button is clicked. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs. The catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:  <html> <head> <script type="text/javascript"> var txt=""; function message() { try   {   adddlert("Welcome guest!");   } catch(err)   {   txt="There was an error on this page.nn";   txt+="Error description: " + err.description + "nn";   txt+="Click OK to continue.nn";   alert(txt);   } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> 78
  • 79. The Throw Statement  The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages.  Syntax  throw(exception)  The exception can be a string, integer, Boolean or an object. 79
  • 80. The example determines the value of a variable called x. If the value of x is higher than 10, lower than 0, or not a number, we are going to throw an error. The error is then caught by the catch argument and the proper error message is displayed: <html> <body> <script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:",""); try   {   if(x>10)     {     throw "Err1";     }   else if(x<0)     {     throw "Err2";     }   else if(isNaN(x))     {     throw "Err3";     }   } catch(er)   {   if(er=="Err1")     {     alert("Error! The value is too high");     }   if(er=="Err2")     {     alert("Error! The value is too low");     }   if(er=="Err3")     {     alert("Error! The value is not a number");     }   } </script> </body> </html> 80
  • 81. Defining Arrays  An Array object is used to store a set of values in a single variable name.  An Array object is created with the new keyword.  An array can be created as:  var MyArray=new Array()  An array can also be created by specifying the array size.  var MyArray=new Array(3) 81
  • 82. Arrays (contd.)  Data can be entered into an array as: var MyArray=new Array() MyArray[0]=“Paul” MyArray[1]=“Sam” MyArray[2]=“Niel”  Data can also be entered into an array as: var MyArray=new Array(“Paul”,”Sam”, “Niel”) 82
  • 83. Arrays (contd.)  Accessing Arrays  You can refer to a particular element in an array by referring to the name of the array and the index number.  The index number starts at 0 . var MyArray=new Array() Myarray [0] 83

Editor's Notes

  1. HTML was originally designed as a simple way of presenting information, with the aesthetics of a web page being far less important than the content (and largely being left up to the web browser). Of course, now that the web has become as popular as it has, the presentation of your content has become almost critical to a site’s success. This, among other things, was why CSS was brought in.
  2. One can use another mechacanisim of styling documents by using Inline Style sheets An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. 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: &amp;lt;p style=&amp;quot;color: sienna; margin-left: 20px&amp;quot;&amp;gt; This is a paragraph &amp;lt;/p&amp;gt;
  3. Well-authored CSS also improves the accessibility of web content, allowing access through myriad devices (handheld PDAs for example) and ensuring that web users with disabilities are still able to receive it. It also eliminates the need for browser-specific hacks and tags, which means your site has a better chance of working across all major browsers. Initially vaguely intimidating, CSS is a well-designed, elegant language. It is hugely important for the future of web design, and has been pivotal in helping designers move away from the problematic, hack-ridden days of presentational HTML tags like &amp;lt;font&amp;gt;, and allowed us to return to using logical, structural elements which make our sites more accessible. All that, and there are dozens of powerful extra formatting options and possibilities available through stylesheet commands that are not possible through normal HTML. You’ll see these later on when we get on to things like backgrounds, spacing, layers and borders.
  4. font-family: sans-serif/courier/times Font-size: 20pt Font-style: italuc/bold//regular Font-weight: (sets the boldness of the font) Font-weight : 900 The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
  5. Do HTML rules cramp your style? Ever wish you could create your own tag what would behave just like you want? Well you can. Combine the SPAN element with CSS rules to create your own custom tags. What does SPAN do? Nothing. That&amp;apos;s the beauty of it. Since it has no defined display, you&amp;apos;re free to write your own rules and apply them as you wish. SPAN is an inline tag, which means that it&amp;apos;s used to format small chunks of text inside another element. In contrast, a paragraph tag is a block-level element that can contain a number of inline elements like bold, italics, strong, and SPAN tags.
  6. JavaScript is a simple scripting language invented specifically for use in web browsers to make websites more dynamic. On its own, HTML is capable of outputting more-or-less static pages. Once you load them up your view doesn&amp;apos;t change much until you click a link to go to a new page. Adding JavaScript to your code allows you to change how the document looks completely, from changing text, to changing colours, to changing the options available in a drop-down list (and much, much more!).
  7. JavaScripts are integrated into the browsing environment, which means they can get information about the browser and HTML page, and modify this information, thus changing how things are presented on your screen. This access to information gives JavaScript great power to modify the browsing experience. They can also react to events, such as when the user clicks their mouse, or points to a certain page element. This is also a very powerful ability. JavaScript is supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the other modern web browsers. Each new version of the main browsers has supported new generations of JavaScript commands, each more complex than the last.
  8. The two share many similarities. Most prominent of these is that they are both forms of Object-Oriented Programming, or OOP. This means that you work with small objects that are combined together to form larger objects . Both Java and Java Scripts share similar coding syntaxes.
  9. The Course here deals with CSJS and Core JavaScript
  10. JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
  11. By entering the document.write command between the &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt; and &amp;lt;/script&amp;gt; tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: If we had not entered the &amp;lt;script&amp;gt; tag, the browser would have treated the document.write(&amp;quot;Hello World!&amp;quot;) command as pure text, and just write the entire line on the page.
  12. You can insert quotation marks inside strings by preceding them with a backslash. This is known as escaping the quotation marks. For example, var quote = &amp;quot;He read \&amp;quot;The Cremation of Sam McGee\&amp;quot; by R.W. Service.&amp;quot;document.write(quote) To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string, use the following: var home = &amp;quot;c:\\temp&amp;quot; You can declare a variable as: var x=“hi” x=30 The value type can be changed for a variable. Though this is not considered to be good programming.
  13. The &amp;quot;typeof&amp;quot; operator in JavaScript allows you to probe the data type of its operand, such as whether a variable is string, numeric, or even undefined. The below simple example alerts the data type of the variable &amp;quot;myvar&amp;quot; This special operator is helpful when troubleshooting. It reveals the type of data a variable or literal you are working with is, or the type of data an expression evaluates to. This is important because the type of data you are working with dictates how you are allowed to manipulate that data. Sometimes you will need to convert a type of data to another type, so it is helpful to be able to test the type of a value or expression at different stages of execution in your script. Used in concert with the alert method, an alert box indicating the data type is generated, helping you trouble shoot a problematic script.
  14. Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
  15. The for Loop The for loop is used when you know in advance how many times the script should run
  16. To assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the &amp;lt;head&amp;gt; section.
  17. Eval() It can also evaluate expressions included with a string. In the example, value1 becomes 62. value1 = eval(&amp;quot;124/2&amp;quot;) ,
  18. If x=AB77 parseInt(x) will return NAN If x=67.7hj76 Parseint(x) will return 67 the floating point will not be taken into consideration
  19. If x=56ABC parseFloat(x) will return 56 If there are no floating points then the integral value is returned.
  20. The onload event is often used to check the visitor&amp;apos;s browser type and browser version, and load the proper version of the web page based on the information. Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user&amp;apos;s name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: &amp;quot;Welcome John Doe!&amp;quot;.
  21. Can refer to http://w3schools.com/jsref/jsref_events.asp for a complete reference of event handlers
  22. If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string.
  23. To modify/insert a value in an existing array, just add a new value to the array with a specified index number: