CSS box model

INTERNAL TEST -1
ANSWER KEY
PART-A
1.What is rule cascasding?
Find all declarations whose selectors match a particular element. Sort these declarations by
weight and origin.
2.Define objects and classes in java?

Everything in Java is associated with classes and objects, along with its attributes and methods.
For example: in real life, a car is an object. The car has attributes, such as weight and color, and
methods, such as drive and brake. A Class is like an object constructor, or a "blueprint" for
creating objects.
3.Write the javascript methods to retrieve the date and time based on the computers locale?
The toLocaleTimeString() method returns the time portion of a date object as a string, using
locale conventions.
const d= new Date();
let text = d.toLocaleTimeString();
4.What are jsp actions?

These actions use constructs in XML syntax to control the behavior of the servlet engine. You
can dynamically insert a file, reuse JavaBeans components, forward the user to another page, or
generate HTML for the Java plugin.
5.Give the features os cascading style sheets?

Opportunity in Web designing
Website Design
Web Control
Other Languages
PART-B
6.a)Create a form in html5 provide the list of grocery for the month for the month from the list in
the website.Create using forms,labels,text,boxes,lists.allow the user to enter the details to get
grocery delivered to his house.
<!DOCTYPE html>
<html>
<head>
<title>Grocery List</title>
</head>
<body>
<p id="newItemLabel">Add a New Item:</p>
<form>
<input type="text" name="itemName" id="itemName" value="Item Name"/>
<input type="text" name="itemAmount" id="itemAmount" value="Item Amount"/>
<select>
<option value="Other">Other</option>
<option value="Vegetables">Vegetables</option>
<option value="Fruits">Fruits</option>
<option value="Fruits">Fruits</option>
<option value="Canned Goods">Canned Goods</option>
<option value="Snacks">Snacks</option>
<option value="Beverages">Beverages</option>
<option value="Meat">Meat</option>
<option value="Dairy">Dairy</option>
<option value="Frozen">Frozen</option>
<option value="Household">Household</option>
</select>
<input type="button" value="add" id="addButton" onClick="" name="add"/>
</form>
</body>
</html>
b)Explain DOM nodes and DOM trees.With examples show how to model a document using
DOM and how to traverse and modify DOM trees?
The Document Object Model (DOM) is a programming interface for HTML(HyperText

Markup Language) and XML(Extensible markup language) documents. It defines the logical
structure of documents and the way a document is accessed and manipulated.
DOM is a way to represent the webpage in a structured hierarchical way so that it will become
easier for programmers and users to glide through the document. With DOM, we can easily
access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or
methods provided by the Document object. Using DOM, the JavaScript gets access to HTML
as well as CSS of the web page and can also add behavior to the HTML elements. so
basically Document Object Model is an API that represents and interacts with HTML or
XML documents.
Methods of Document Object:
 write(“string”)
 getElementById( )
 getElementsByName()
 getElementsByTagName()
 getElementsByClassName()
DOM tree:
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are
“children” of the enclosing one. The text inside a tag is an object as well.
All these objects are accessible using JavaScript, and we can use them to modify the page.
For example, document.body is the object representing the <body> tag.
<!DOCTYPE HTML>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>
7.a)(i)Write the CSS rule for controlling the positioning of elements in an XHTML document?
The position property in CSS tells about the method of positioning for an element or an HTML
entity. There are five different types of position property available in CSS:
 Fixed
 Static
 Relative
 Absolute
 Sticky
Static:
div.static {
position: static;
border: 3pxsolid #73AD21;
}
Relative:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Fixed
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
Absolute:
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
Sticky:
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
(ii)Explain the box modeling of CSS?
The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages. It can be
used as a toolkit for customizing the layout of different elements. The web browser renders
every element as a rectangular box according to the CSS box model. Box-Model has multiple
properties in CSS. Some of them are given below:
 content: This property is used to displays the text, images, etc, that can be sized using
the width & height property.
 padding: This property is used to create space around the element, inside any defined
border.
 border: This property is used to cover the content & any padding, & also allows to set the
style, color, and width of the border.
 margin: This property is used to create space around the element ie., around the border
area.
The following figure illustrates the Box model in CSS.
 Content Area: This area consists of content like text, images, or other media content. It is
bounded by the content edge and its dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space around the
content area and within the border-box. Its dimensions are given by the width of the
padding-box and the height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions are
given by the width and height of the border.
 Margin Area: This area consists of space between border and margin. The dimensions of
the Margin area are the margin-box width and the margin-box height. It is useful to
separate the element from its neighbors.
For setting the width & height property of an element(for properly rendering the content in the
browser), we need to understand the working of the CSS Box model.
While setting the width and height properties of an element with CSS, we have only set the
width and height of the content area. We need to add padding, borders, and margins in order to
calculate the full size of an element. Consider the below example.
p{
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it
properly.
HTML
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
7.b)Explain sub classes and super classes in JavaScript?
In Java, it is possible to inherit attributes and methods from one class to another. We group the
"inheritance concept" into two categories:
 subclass (child) - the class that inherits from another class

 superclass (parent) - the class being inherited from
To inherit from a class, use the extends keyword.

In the example below, the Car class (subclass) inherits the attributes and methods from
the Vehicle class (superclass):
class Vehicle {
protected String brand = "Ford";
public void honk() {

System.out.println("Tuut, tuut!");
}
}
class Car extends Vehicle {

private String modelName = "Mustang";
public static void main(String[] args) {
Car myCar = new Car();
myCar.honk();
System.out.println(myCar.brand + " " + myCar.modelName);
}
}
PART-C
8.i)What is an exception?Outline exception handling in javascript with an example.
Exception handling is a mechanism that handles the runtime errors so that the normal flow of the
application can be maintained.
Basically an exception is an event that disrupts the normal flow of the program. It is an object
which is thrown at runtime. .The exception handling in JavaScript can be performed with the
help of following types of statements-
1. The try statement lets you test a block of code for errors.
2. The catch statement lets you handle the error.
3. The throw statement lets you create custom errors.
4. The finally statement lets you execute code, after try and catch, regardless of the result.
Basic syntax of try-catch block is

try {
Block of code to try
} catch(err) {
Block of code to handle errors
}
When error occurs, JavaScript will normally throw an exception so that appropriate error
message can be displayed and it will avoid a crash of a program.
Following example illustrates the exception handling mechanism in JavaScript
<!DOCTYPE html> <html>
<body>
<p>Enter Some Number:</p>
<input id="demo" type="text">
<button type="button" onclick="GetPositiveNumber()">Click</button>
<p id="myID"></p>
<script>
function GetPositiveNumber() {
var message, num;
message = document.getElementById("myID");
message.innerHTML = "";
num = document.getElementById("demo").value;
try {
if(num == "")
throw "empty":
if(isNaN(num))
throw "not a number":
num= Number(num);
if(num < 0)
throw "Negative":
if(num == 0)
Client Side P
throw "Zero";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
ii)Using CSS,Create a HTML document that displays a table of Basketball scores at national
games.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.one
background-color:pink;
color:blue;
tr.two
font-family:cursive;
background-color:black; font-size:50px;
color yellow;
}
tr.three
background-color:green;
color:white;
}
</style>
</head>
<body>
<table border="3">
<th>Team</th>
<th>Score</th>
<tr class="one"> <td>ABC</td><td>7</td>
</tr>
<tr class="two"> <td>XYZ</td><td>10</td>
</tr>
<tr class="three"> <td>POR</td><td>5</td>
</tr>
</body>
</html>

CSS box model

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS box model

Uploaded by

Copyright:

Available Formats

INTERNAL TEST -1

2.Define objects and classes in java?

4.What are jsp actions?

5.Give the features os cascading style sheets?

The Document Object Model (DOM) is a programming interface for HTML(HyperText

(ii)Explain the box modeling of CSS?

7.b)Explain sub classes and super classes in JavaScript?

 subclass (child) - the class that inherits from another class

To inherit from a class, use the extends keyword.

public void honk() {

class Car extends Vehicle {

8.i)What is an exception?Outline exception handling in javascript with an example.

Basic syntax of try-catch block is

You might also like