Chapter 2

Cascading Style Sheets

Std. XII 1
 Introduction
• Cascading Style Sheets or CSS allows to specify styles for
the visual elements of the website.
• Keep the information content of a document separate
from the details of how to display it.
• Details of how to display the document is known as style.
• Keeping the style separate from the content helps us to:
1. Avoid duplication in coding.
2. Use the same content with different styles for different
purposes.
3. Easy maintenance of code.

Std. XII 2
Using CSS, we can control the font types, font and font element colors,
pad spaces, margins and element position in our website.
Syntax of CSS
Selector { Property : Value}
1. Consists of special symbols known as rules.
2. A CSS rule has two main parts: Selector and one or more declarations.
3. The selector is the HTML element on which you want to apply the
style.
4. Declaration consists of a property associated with the HTML element
used in selector and its corresponding value.
Example
H1 { color : green }

Selector Property Value

Std. XII 3
 Add CSS to a Web Page
Click Tools Preferences. (In Practical Select Options)

Std. XII 4
Std. XII 5
Std. XII 6
Std. XII 7
Std. XII 8
Std. XII 9
Std. XII 10
Std. XII 11
Std. XII 12
Std. XII 13
 Advantages of CSS
1. Consistency
The main benefit of CSS is that style is applied consistently across a number of web pages. One
command line can control several areas at one time, which is quite advantageous if there are
changes that need to be made. You only need to alter one thing and the rest will follow.
Because you don’t have to change each page one at a time, web designers can be very
efficient in creating and changing a website with only a few lines of code.
2. Improved website speed
Web designers only need to use a small amount of lines of programming for each page. And if
there are less code, there are fewer lines to read, resulting in a faster load time for every page.
With online users not willing to wait for a website to load, improving site speed will be most
advantageous. Owners who bank on website performance to improve search engine rankings
and customer base will benefit from CSS.
3. Easy to maintain
Cascading style sheet not only simplifies website development, but also maintenance. All the
codes are placed on one page, which means making improvements or changing a few lines will
not involve going through several pages. And since a change with a single line of code is
applied across the website, maintenance time and effort are significantly reduced.

Std. XII 14
 Disadvantages of CSS
1. Come in different levels
There’s CSS, CSS 1 up to CSS3, which has resulted in confusion among
developers and web browsers. One type of CSS should be enough. It would
be preferable than having to choose which CSS level to use.
2. Fragmentation
With CSS, what works with one browser may not always work with another.
This is why web developers have to test for compatibility, running the
program across multiple browsers before a website is set live. If only
people use Mozilla or Chrome, but they don’t.
3. Lack of security
Because it is an open text-based system, CSS doesn’t have the built-in
security that will protect it from being overridden. Anyone who has a
read/write access to a website can change the CSS file, alter the links or
disrupt the formatting, whether by accident or design.

Std. XII 15
Std. XII 16
 JavaScript
• HTML was originally used to control the
appearance of web pages.
• The web pages designed using HTML, were
static and could not be changed after the
browser rendered them.
• Netscape developed JavaScript.
• JavaScript is a scripting language that allows
you to add programming aspects to your web
page.
Std. XII 17
 JavaScript
• A scripting language is a simple, lightweight
programming language that does not contain
the advance programming functionalities of
languages like C and Java.
• JavaScript is used in web pages to improve the
design and validate the forms.
• JavaScript adds interactivity to HTML pages
and is inserted directly into the HTML code.

Std. XII 18
 JavaScript
• JavaScript is client side script which runs inside a
web browser.
• It is used to validate data entered in HTML forms on
the client side before sending it to the server.
• It runs from within the HTML web page.
• It is inserted into an HTML page, using the
<script>..</script> tag.
• It is a case sensitive language.
• It can be placed inside the <body> or <head>
section of an HTML page.
Std. XII 19
 JavaScript
• The <script> tag tells the browser to interpret all
the text between the <script> tag as a script.
• “document.write(“Hello Students”)” write is a
method and document is object.
• The semicolon is used as a mark of separation
rather than termination.
• Javascript statements can be grouped together in
a block.
• A block starts and ends with the curly brackets. { }

Std. XII 20
 JavaScript
• A function is a reusable block of code that performs
a particular task.
• It is also called routine.
• The function will be executed by an event or when
it is called inside a source code.
• A function can be called anywhere from within the
source code.
• A function is called by its name.
• The use of return statement will stop the function
from executing, and return the specified value.
Std. XII 21
 JavaScript
• The interaction between the user and the web
page causes the browser to generate an event.
• When an event occurs, a specific JavaScript code is
executed in response to give situation. This
JavaScript code is known as event handler.
• A variable is a container for storing data.
• Variables in JavaScript are case sensitive.
• The variables can store numbers, strings or text.
• In JavaScript, variable is declared using var
keyword.
Std. XII 22
 Events in JavaScript
• The interaction between the user and the webpage causes the browser to
generate an event.

Std. XII 23
 Document Object Model
• To Control the web browsers window or the web page we use the Browser Object
Model (BOM).
• All browsers are split into different parts or objects that can be accessed using
JavaScript.
• Top level object in the browser object model is window object. It is created
automatically by
• the browser.
• The window object is a global object as it contains all the other objects of the
browser object model within it.
• Window object contains the document object.
• The document object is a most important object in the browser object model.
• It is used to represent the web page displayed in the browser.
• All the elements of the web page like forms, images, links and others are contained
within the document object.

Std. XII 24
Std. XII 25