Skip to Content
Semester 5AssignmentsWeb TechnologyAssignment 2

Assignment 2

1) What is the difference between inline, internal and external style sheets? (with example)

  • Inline Style Sheets: Applied directly to an HTML element using the style attribute. Styles are specific to that element only.
    • Example: <p style="color:blue;">This text is blue.</p>
  • Internal Style Sheets: Defined within the <style> tags in the <head> section of an HTML document. Styles apply to the entire document or specific elements.
    • Example:
    <head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
  • External Style Sheets: Linked to an HTML document using the <link> tag in the <head> section. Styles are stored in a separate .css file and can be applied to multiple pages.
    • Example:
    <head>
  <link rel="stylesheet" href="styles.css" />
</head>
    In styles.css: 
    p {
  color: blue;
}

2) What is Margin and padding? How can it be used in web page designing?

  • Margin: Space around an element, outside the border. It creates space between elements.
    • Example: margin: 20px;
  • Padding: Space between an elementā€™s content and its border. It creates space inside an element.
    • Example: padding: 20px;

Usage in Web Page Designing:

  • Margin:
    • Control spacing between elements (e.g., paragraphs, divs)
    • Create gutters and white space for better layout and readability
    • Align elements using negative margins (e.g., center elements)
  • Padding:
    • Control space around content within an element (e.g., text, images)
    • Improve readability and touch target size on mobile devices
    • Create consistent spacing around content in responsive design

3) List and explain with example, the types of selectors for CSS properties.

  • Element Type Selector: Matches HTML element names (e.g., p, h1, div)
    • Example: p { color: blue; }
  • Class Selector: Matches elements with a specific class attribute (e.g., .intro, .button)
    • Example: .intro { font-size: 1.2em; }
  • ID Selector: Matches elements with a specific id attribute (e.g., #header, #footer)
    • Example: #header { background-color: #333; }
  • Attribute Selector: Matches elements with a specific attribute or attribute value (e.g., [target], [target=_blank])
    • Example: a[target=_blank] { color: red; }
  • Pseudo-class Selector: Matches special states of an element (e.g., :hover, :first-child, :nth-child)
    • Example: a:hover { text-decoration: underline; }
  • Combinator Selector: Combines simple selectors using combinators (e.g., space, >, +, ~)
    • Example: div > p (direct child), h1 + p (adjacent sibling), p ~ img (general sibling)
  • Universal Selector: Matches any element (e.g., ā€œ)
    • Example: { box-sizing: border-box; }

4) Explain Transform, Transition, Animation Properties in detail.

  • Transform: Modifies the visual appearance of an element without affecting its layout
    • transform: translateX(50px); (moves element 50px to the right)
    • transform: rotate(45deg); (rotates element 45 degrees)
    • transform: scale(2); (scales element to 2x its size)
    • transform: skewX(30deg); (skews element horizontally by 30 degrees)
  • Transition: Allows you to change the appearance and behavior of an element over a period of time
    • transition-property: color;
    • transition-duration: 0.5s;
    • transition-timing-function: ease-in-out;
    • transition-delay: 0.2s;
  • Animation: Creates more complex and advanced animations using keyframes
    • @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }
    • animation-name: slide;
    • animation-duration: 2s;
    • animation-timing-function: linear;
    • animation-delay: 0.5s;
    • animation-iteration-count: infinite;

5) Write CSS code to set proper design of registration page that contain following data fields (Student enroll no, student name, Student mobile no, student email id, branch, semester).

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}
 
.container {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
h1 {
  text-align: center;
  margin-bottom: 30px;
}
 
/* Form Styles */
form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}
 
label {
  font-weight: bold;
}
 
input[type="text"],
input[type="email"],
input[type="tel"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
 
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='<http://www.w3.org/2000/svg>'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
}
 
button[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
 
button[type="submit"]:hover {
  background-color: #45a049;
}

6) What are JavaScript Cookies?

JavaScript Cookies are small text files used to store data on the client-side (userā€™s browser) for tracking user activity and preferences. They are created on the server-side and sent to the userā€™s browser, which stores them and sends them back to the server with each subsequent request. Cookies have an expiration date and can be accessed and manipulated using JavaScript. They are used to maintain stateful information across different pages or sessions.

7) What are all the types of Pop up boxes available in JavaScript? (Example)

  • Alert: Displays a message with an OK button.
    • Example: alert("This is an alert box.");
  • Confirm: Displays a message with OK and Cancel buttons, returns true/false.
    • Example: confirm("Are you sure?");
  • Prompt: Displays a message with an input field, OK and Cancel buttons, returns user input or null.
    • Example: prompt("Please enter your name:");
  • Modal: Custom pop-up with HTML content, can have buttons and event handlers.
    • Example using Bootstrap:
    <button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#myModal"
>
  Launch modal
</button>
    <div
  class="modal fade"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

8) What is the use of Push, pop, shift and unshift methods in JavaScript? (Read JS Array)

  • Push: Adds one or more elements to the end of an array and returns the new length.
    • Example: let arr = [1, 2, 3]; arr.push(4); // arr is now [1, 2, 3, 4]
  • Pop: Removes the last element from an array and returns that element.
    • Example: let arr = [1, 2, 3]; let popped = arr.pop(); // arr is now [1, 2], popped is 3
  • Shift: Removes the first element from an array and returns that element.
    • Example: let arr = [1, 2, 3]; let shifted = arr.shift(); // arr is now [2, 3], shifted is 1
  • Unshift: Adds one or more elements to the beginning of an array and returns the new length.
    • Example: let arr = [1, 2, 3]; arr.unshift(0); // arr is now [0, 1, 2, 3]

9) How are DOM utilized in JavaScript?

  • Accessing/Manipulating HTML elements
  • Creating/Removing elements dynamically
  • Changing styles, attributes, and content
  • Handling events (click, hover, etc.)
  • Traversing the DOM tree (parent, child, sibling relationships)

10) Explain Animation in JavaScript.

  • Animation in JavaScript is achieved using the @keyframes rule in CSS, combined with JavaScript to control and trigger animations.
  • Syntax: @keyframes animation-name { from { } to { } }
  • Example:
@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
let elem = document.getElementById("myElement");
elem.style.animation = "myAnimation 2s infinite";
  • Properties: animation-name, animation-duration, animation-iteration-count, animation-direction, animation-fill-mode, animation-timing-function
Last updated on