Top Banner
CHAPTER 9 CASCADING STYLE SHEETS 9.1. Introduction CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files 9.2. Difference between CSS and HTML HTML: HTML stands for Hyper Text Markup Language HTML is for content & web page structure HTML is a markup language so has a set of markup tags HTML documents contain HTML tags and plain text and also called web pages CSS: CSS stands for Cascading Style Sheets CSS is for presentation and design Styles define how to display HTML elements External Style Sheets are stored in CSS files 9.3. Style A style tag is simply a set of formatting instructions that can be applied to a piece of text, there are three ways to implement it: 1. Inline style sheet: style that is defined in basic html tag. The syntax to use it as follows: 46
26

CASCADING STYLE SHEETS

May 24, 2017

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CASCADING STYLE SHEETS

CHAPTER 9CASCADING STYLE SHEETS

9.1. Introduction

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

9.2. Difference between CSS and HTML

HTML: 

HTML stands for Hyper Text Markup Language  HTML is for content & web page structure HTML is a markup language so has a set of markup tags HTML documents contain HTML tags and plain text and also called web pages 

CSS:

CSS stands for Cascading Style Sheets CSS is for presentation and design Styles define how to display HTML elements  External Style Sheets are stored in CSS files

9.3. Style

A style tag is simply a set of formatting instructions that can be applied to a piece of text, there are three ways to implement it:

1. Inline style sheet: style that is defined in basic html tag. The syntax to use it as follows:

<html tag style=”cssproperty1: value; cssproperty2: value;”>….</html tag>

2. Internal style sheet: style sheet that is defined in head section and can be applied to whole web page. The syntax is as follows:

<html><head><style>Tag1{cssproperty1: value;cssproperty2: value;}.class1{cssproperty1: value;cssproperty2: value;}

46

Page 2: CASCADING STYLE SHEETS

</style></head><body><Tag1>…..</Tag1><tag class=”class1”>…</tag><body><html>

3. External style sheet: style sheet that is defined in external file and can be used by multiple web pages. The syntax is as follows:

In .CSS fileTag1{cssproperty1: value;cssproperty2: value;}.class1{cssproperty1: value;cssproperty2: value;}

In .html file<html><head><link rel=”stylesheet” type=”text/css” href=”XX.css”></head><body><Tag1>…..</Tag1><tag class=”class1”>…</tag><body><html>

Each type of style has its own advantages and disadvantages. If all three of them are used then inline is preferred most then internal and in last external is preferred.

9.4. Properties of Style Sheet

1. Font: This set of properties includes font-family, font-style, font-size, font-weignt and many more.

2. Color and background: This set of properties includes color, background-color, background-image, background-image, background-repeat and many more.

3. Text: this set includes properties like text-align text-transformation, text-decoration, text-shadow and many more.

4. Boxes and borders: this set includes properties such as border-width, border-color, border-style, margin, width, height and many more.

5. Table: this set includes properties like caption-side and many more.

46

Page 3: CASCADING STYLE SHEETS

ASSIGNMENT 11

<html><head></head><title>inline css</title><body style="border-width:2;background-color:yellow" text-align:center><h1 style="color:red;font-family:times new roman" > this is H1 tag</h1><p style="font-size:large;color:green;text-align:center"> this is in paragraph</p></body></html>

46

Page 4: CASCADING STYLE SHEETS

ASSIGNMENT 12<html><head><style>.h1{color:red;font-family:times new roman;}.p{font-size:large;color:green;text-align:right;}</style></head><title>internal css</title><body><h1>this is h1 tag</h1><p>this is in paragraph</p></body></html>

46

Page 5: CASCADING STYLE SHEETS

Assignment 14

In sheet1.css

h1{text-shadow:2px 2px red;text-align:center;}p{font-size:20px;font-wieght:bolder;}

In external.html

<html><head><link rel="stylesheet" type="text/css" href="sheet1.css"><head><body><h1>this is h1 tag</h1><p>this is p tag</p></body></html>

46

Page 6: CASCADING STYLE SHEETS

CHAPTER-10JAVA SCRIPT

What is Java Script?

JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side programming, game development and the creation of desktop and mobile applications. It is a programming and interpreted language. It is widely used and supported and accessible to the beginner.

JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. Its syntax was influenced by C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

Uses of JavaScript

Use it to add multimedia elements. Create pages dynamically. Interact with the user. customizing a page based on the user's browser version. providing visual feedback to user actions. Checking for mistakes in forms before they are submitted.

Advantages

Javascript is executed on the client side. Javascript is a relatively easy language. Javascript is relatively fast to the end user Extended functionality to web pages

46

Page 7: CASCADING STYLE SHEETS

Syntax of Java Script

<html><body><script language="javascript" type="text/javascript"><!-- document.write("Hello World!")//--></script></body></html>

Three sections of java script

We can place an unlimited number of scripts in an HTML document. Scripts can be in the head section or body section or in both. We can define java script in three sections. These three sections are :

1. Head Section2. Body Section3. External Section

Head Section:- In this a JavaScript function is placed in the <head> section of an HTML page.

<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}< /script>< /head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body>< /html>

46

Page 8: CASCADING STYLE SHEETS

Body Section:- In this a JavaScript function is placed in the <body> section of an HTML page.

<!DOCTYPE html><html><body> <h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}< /script></body>< /html>

External Section:- Scripts can also be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension .js.To use an external script, put the name of the script file in the source (src) attribute of the <script> tag.

<!DOCTYPE html><html>< body><script src="myScript.js"></script>< /body>< /html>

Dialogue Boxes:- JavaScript has three kind of popup boxes.

Alert box,

Confirm box

Prompt box.

Alert Box:-An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed.

Syntax : window.alert("sometext");

Example: alert("I am an alert box!");

46

Page 9: CASCADING STYLE SHEETS

Confirm Box:-A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax: window.confirm("sometext");

Example: var r=confirm("Press a button");

if (r==true)

{

x="You pressed OK!";

}

else

{

x="You pressed Cancel!";

}

Prompt Box:-A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax: window.prompt("sometext","defaultText");

Example: var person=prompt("Please enter your name","Harry Potter");

if (person!=null)  {  x="Hello " + person + "! How are you today?";  document.getElementById("demo").innerHTML=x;  }

46

Page 10: CASCADING STYLE SHEETS

Assignment-1

Create a HTML webpage to show the use of Confirmation dialog box.

<head>

<script>

var msg=confirm("Do you want to continue");

if (msg==true)

{

alert("User wants to continue!");

}

else

{

alert("User does not want to continue");

}

</script>

</head>

46

Page 11: CASCADING STYLE SHEETS

46

Page 12: CASCADING STYLE SHEETS

Assignment-2

Create a HTML webpage to show the use of Prompt dialog box.

<html><head><script language="JavaScript" type="text/javascript">var msg=prompt("enter your name"," ");alert("you have entered: "+msg);</script></head></html>

46

Page 13: CASCADING STYLE SHEETS

Assignment-3

Create a HTML webpage to show the use of Pop up dialog box.

<html><head><script language="JavaScript" type="text/javascript">var msg=prompt("enter your name"," ");alert("you have entered: "+msg);</script></head></html>

46

Page 14: CASCADING STYLE SHEETS

Assignment-4

Create a HTML webpage to show the use of Page Redirect.

<html><head><script>window.location="http://www.google.co.in";</script></head></html>

46

Page 15: CASCADING STYLE SHEETS

Assignment-5

Create a HTML webpage to show the use of Page Printing.

<html><head><script></script></head><body><form><input type="button" value="Print" onclick="window.print()");</form></body></html>

46

Page 16: CASCADING STYLE SHEETS

Assignment-6

Create a HTML webpage to show the use of Get Element BY Id.

<html><head><script>function nonEmpty(){var myTextfield=document.getElementById('myText');if(myTextfield.value!=""){alert("You entered:"+myTextfield.value);}else{alert("enter your name");}}</script></head><body><form><input type="text" id="myText"><input type="button" onclick="nonEmpty()" value="ClickMe"></form></body></html>

46

Page 17: CASCADING STYLE SHEETS

46

Page 18: CASCADING STYLE SHEETS

Assignment-7

Create a HTML webpage to show the use of Copy Paste.

<html> <head> <script> function copy(){ var myVal = ""; myVal = window.document.myForm.txtInput.value; window.document.myForm.txtOutput.value = myVal;}</script></head><body> <form name=myForm> <input type = "text" name = "txtInput" value = ""> <input type = "text" name = "txtOutput" value = ""> <input type = "button" value = "Copy" onClick = "copy()"> </form> </body> </html>

46

Page 19: CASCADING STYLE SHEETS

46

Page 20: CASCADING STYLE SHEETS

Assignment-8

Create a HTML webpage to show the use of Event Handling.

<html><head></head><body onload="ShowLoaded()"><h2>Handling Events</h2><a href="http://www.google.co.in" OnMouseOver="Mouse()">Hyperlink</a><form><input type="button" value="ClickMe" onclick="Clicked()"></form><script>function ShowLoaded(){alert("The page has loaded");}function Clicked(){alert("You have clicked the button");}function Mouse(){alert("The mouse is over the link");}</script></body></html>

46

Page 21: CASCADING STYLE SHEETS

46