Web Technologies: CSS and JavaScript
Question Paper with Solutions
Section A (2 Marks Each)
Q1. What is CSS? Answer: CSS (Cascading Style Sheets) is used to style HTML
elements.
Q2. What is JavaScript? Answer: JavaScript is a client-side scripting language for
dynamic web pages.
Q3. Difference between class and id. Answer: Class is reusable, id is unique.
Q4. What is DOM? Answer: Document Object Model represents HTML as a tree.
Q5. What is a variable in JS? Answer: A container for storing data values.
Section B (5 Marks Each)
Q6. Explain types of CSS with examples.
Answer: Inline:
<p style =" color : red ;" > Text </ p >
Internal:
< style >
p { color : blue ; }
</ style >
External:
< link rel =" stylesheet " href =" style . css " >
Q7. Explain JavaScript data types.
Answer: Primitive: number, string, boolean Reference: object, array
let num =10;
let str =" Hello ";
let arr =[1 ,2];
Q8. Explain loops in JavaScript.
Answer:
for ( let i =0; i <5; i ++) {
console . log ( i ) ;
}
1
Q9. Explain CSS selectors.
Answer:
p { } /* element */
. class { } /* class */
# id { } /* id */
Q10. Explain form validation.
Answer:
if ( name =="") {
alert (" Required ") ;
}
Section C (10 Marks Each)
Q11. Write a complete HTML page using CSS and JavaScript.
Answer:
<! DOCTYPE html >
< html >
< head >
< style >
body { background : lightblue ; }
</ style >
</ head >
< body >
< input id =" num " >
< button square () " > Square </ button >
< script >
function square () {
let n = document . getElementById (" num ") . value ;
alert ( n * n ) ;
}
</ script >
</ body >
</ html >
Q12. Explain DOM manipulation with example.
Answer:
document . getElementById (" id ") . innerHTML =" Text ";
Q13. Explain classes and inheritance in JS.
Answer:
class A {
2
greet () { console . log (" Hi ") ; }
}
class B extends A {}
Q14. Explain cookies and session storage.
Answer:
document . cookie =" user = abc ";
sessionStorage . setItem (" user " ," abc ") ;
Q15. Explain async programming (Promises).
Answer:
let p = new Promise (( res ) = >{
res (" Done ") ;
}) ;
p . then ( console . log ) ;
CSS Questions
Q1. What is CSS? Answer: Cascading Style Sheets used for styling HTML.
Q2. Types of CSS? Answer: Inline, Internal, External.
Q3. Example of Inline CSS
<p style =" color : red ;" > Text </ p >
Q4. Example of Internal CSS
< style >
p { color : blue ; }
</ style >
Q5. External CSS Example
< link rel =" stylesheet " href =" style . css " >
Q6. Class selector example
. box { color : green ; }
Q7. ID selector example
# id1 { color : red ; }
Q8. Change background color
body { background - color : yellow ; }
Q9. What is margin? Answer: Space outside element.
Q10. What is padding? Answer: Space inside element.
Q11. Display property example
div { display : inline ; }
Q12. Flexbox example
3
. container {
display : flex ;
}
Q13. What is CSS box model? Answer: Margin, Border, Padding, Content.
Q14. Font size example
p { font - size : 20 px ; }
Q15. Text alignment
p { text - align : center ; }
Q16. Border example
div { border : 1 px solid black ; }
Q17. Hover effect
a : hover { color : red ; }
Q18. Position property
div { position : absolute ; }
Q19. Z-index usage Answer: Controls stacking order.
Q20. Overflow property
div { overflow : hidden ; }
JavaScript Questions
Q21. What is JavaScript? Answer: Client-side scripting language.
Q22. Variable declaration
let x = 10;
Q23. Data types Answer: Number, String, Boolean, Object.
Q24. Function example
function add (a , b ) {
return a + b ;
}
Q25. Arrow function
const f = ( a ) = > a *2;
Q26. If statement
if (x >5) { console . log (" Yes ") ; }
Q27. For loop
for ( let i =0; i <5; i ++) {}
Q28. While loop
while (x <10) { x ++; }
4
Q29. Array example
let arr =[1 ,2 ,3];
Q30. Object example
let obj ={ name :" John "};
Q31. DOM access
document . getElementById (" id ") ;
Q32. Change HTML content
element . innerHTML =" New ";
Q33. Event handling
< button fun () " > Click </ button >
Q34. Alert example
alert (" Hello ") ;
Q35. Console log
console . log (" Test ") ;
Q36. Try-catch
try {} catch ( e ) {}
Q37. Class example
class A {}
Q38. Inheritance
class B extends A {}
Q39. Regex example
/[ a - z ]+/. test (" abc ") ;
Q40. Local storage
localStorage . setItem (" x " ,"10") ;
Q41. Session storage
sessionStorage . setItem (" x " ,"10") ;
Q42. Cookie set
document . cookie =" user = abc ";
Q43. Timer example
setTimeout (() = >{} ,1000) ;
Q44. Interval example
setInterval (() = >{} ,1000) ;
Q45. JSON example
5
let obj = JSON . parse ( ’{" a ":1} ’) ;
Q46. Fetch API
fetch (" url ") . then ( res = > res . json () ) ;
Q47. Promise example
new Promise (( res ) = > res () ) ;
Q48. Async/Await
async function f () { await fetch ("") ; }
Q49. Event listener
element . addEventListener (" click " , fun ) ;
Q50. Form validation
if ( input =="") { alert (" Required ") ; }
