18SPE501 Introduction to Web Technology

OPEN BOOK TEST

Date:4-8-2023 Marks 1*50=50

1. How can you center an element horizontally within its parent using CSS?
a) Using the "text-align" property
b) Using the "align" property
c) Using the "margin-center" property
d) Using the "position" property

2. What is the purpose of the CSS "box-sizing" property?

a) To control the size of the box element
b) To set the border size of an element
c) To control the space between boxes
d) To include padding and border in the element's total width

3. How can you create a gradient background in CSS?

a) Using the "color" property
b) Using the "background-color" property
c) Using the "gradient" property
d) Using the "background-image" property with a gradient value

4. Which CSS property is used to apply a drop shadow to an element?

a) shadow
b) text-shadow
c) box-shadow
d) element-shadow

5. What is the purpose of CSS animations?

a) To change the structure of HTML elements
b) To define the layout of a web page
c) To create visual effects and motion in elements
d) To define the interaction behavior of elements

6. Compare and contrast inline styles and embedded styles in CSS.

a) Inline styles are applied using external CSS files, while embedded styles are applied
directly within HTML tags.
b) Inline styles are more efficient for large-scale styling, while embedded styles are
recommended for small-scale changes.
c) Inline styles override embedded styles, while embedded styles override external styles.
d) Inline styles are used for text formatting, while embedded styles are used for layout
design.

7. Explain the concept of the CSS box model and its components.
a) The CSS box model defines the positioning of elements using the "position" property.
b) The box model consists of margin, padding, border, and content properties that
determine the space around an element.
c) The box model refers to the arrangement of boxes within a grid layout.
d) The box model is used to create responsive designs using media queries.

8. Discuss the significance of media queries in creating responsive web design.

 a) Media queries are used to include multimedia content on a web page.
b) Media queries ensure that a web page is accessible to all users, including those with
disabilities.
c) Media queries allow developers to apply different styles based on the device's
characteristics, creating a responsive design.
d) Media queries are only relevant for print stylesheets and have no impact on screen
styles.

9. Analyze the benefits and drawbacks of using web fonts in comparison to standard fonts.
a) Web fonts offer more design flexibility but may increase page load time. Standard fonts
are faster to load but have limited customization options.
b) Web fonts are limited in variety, while standard fonts provide a wide range of choices
for typography.
c) Web fonts are only supported in modern browsers, making them less suitable for cross-
browser compatibility.
d) Standard fonts are more suitable for mobile devices, while web fonts are preferred for
desktop applications.

10. Evaluate the role of animations and transitions in enhancing user experience on websites.
a) Animations and transitions have no impact on user experience and should be avoided to
ensure fast loading times.
b) Animations and transitions can make a website more engaging by adding visual interest
and guiding user interactions.
c) Animations are only suitable for entertainment websites, while transitions are essential
for business websites.
d) Animations and transitions are only supported in older browsers, making them obsolete
for modern web development.

11. Complete the HTML tag to create a hyperlink to gct website

<a href="______">Click here</a>

Fill in the blank to create a CSS rule to change the text color to red:

p{
color: ______;
}

12. State the purpose of div element

<div class="container">
<p>This is a paragraph.</p>
</div>

13. What does the `position: absolute;` CSS property value do?

.element {
position: ______;
}
14. Add CSS to the following code snippet to give the paragraph a green background color and
10px padding:

<style>
p{
background-color: ______;
padding: ______;
}
</style>
<p>This is a paragraph.</p>

15. Complete the media query to apply styles when the viewport width is less than 600 pixels:

@media (max-width: ______) {

/* Styles for small screens */
}

16. Analyze the following code snippet and identify its purpose:

<link rel="stylesheet" href="styles.css" media="screen">

17. Evaluate the differences between the `transition` and `animation` properties in CSS and
explain when each is typically used.

18. What is the purpose of the <meta> tag in HTML?

<meta ______="description" content="Web page description">

19. Create an HTML <input> element of type "email" with a placeholder "Enter your email".
<input type="______" placeholder="Enter your email">

20. Explain how the HTML5 <nav> element is typically used in a web page structure.
<______>
<!-- Navigation links here -->
</______>

21. What position value should be used to position the element relative to its normal position
while still reserving space?

`
22. What value should be inserted in the blank to ensure that the content width and height are
included in the total dimensions of the box?
23. Answer: box-sizing: border-box;

24. Missing Code Snippet:

 @keyframes ____ {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

What rule should replace the blank to define a keyframe animation that gradually fades in an
element?
Answer: fade-in

25. Missing Code Snippet:

@media ______ (max-width: 600px) {
body {
font-size: 14px;
}
}

What condition should be inserted in the blank to apply the contained styles only when the
viewport width is 600px or less?

26. Fill in the missing part of the code to create a CSS animation that moves an element from left
to right:

@keyframes slide {
from {
transform: translateX(____%);
}
to {
transform: translateX(____%);
}
}

27. Complete the code to create a gradient background that goes from blue to white:

.gradient-bg {
background-image: ____-gradient(blue, white);
}

28. Examine the following HTML code. What is the purpose of the `<meta>` tag with the
`viewport` attribute?

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
29. Apply an inline CSS style to make the following paragraph text green:

30. Apply a CSS rule to center-align the text within a `<div>` element with the class name
"centered-content":

31. Apply CSS to create a red button with white text color. Use the class "red-button" for the
button element.

32. Apply a CSS animation to make an image rotate continuously. Use the class "rotate-image" for
the image element.

33. Apply a box shadow to an image with the class `.image-box`. The shadow should have a
horizontal offset of 5 pixels, a vertical offset of 5 pixels, a blur radius of 10 pixels, and a color
of rgba(0, 0, 0, 0.3).

.image-box {
width: 200px;
height: 150px;
background-image: url('image.jpg');
}

34. Apply a Google Fonts web font named "Roboto" to the following CSS rule for a paragraph:

```css
p{
/* Apply the web font here */
}

35. Link the "Open Sans" web font from Google Fonts in the HTML head section:

36. Write a CSS rule that uses the web font "Lato" and sets the font weight to bold for a class
named `.custom-heading`:

.custom-heading {
/* Apply the web font and font weight here */
}

37. Explain how the use of web fonts might impact page load time and suggest a way to optimize
font loading.

38. Compare using a system font stack with using a web font. Provide an example of a system font
stack.

39. Create a multi-column layout with 3 equal-width columns using the CSS `column-count`
property:
 .multi-column-container {
/* Apply the multi-column layout here */
}

40. Implement a responsive multi-column layout with a gap of 20 pixels between columns, which
changes to a single column on screens narrower than 600px:

.responsive-columns {
/* Apply the responsive multi-column layout here */
}

41. Describe how the CSS `column-span` property works and provide an example of its usage.

42. Apply a specific width and a column gap of 15 pixels to a multi-column layout with class
`.custom-columns`:

.custom-columns {
/* Apply the width and column gap here */
}

43. Discuss the advantages of using a multi-column layout for text-heavy content like articles, and
illustrate with a code snippet.

44. Apply the `font-family` property to change the font of a paragraph to a web font named
"Open Sans".

Code Snippet:

/* Apply the font-family property here */

p{
font-size: 16px;
}
`

45. Link the Google Fonts API to include the "Roboto" font in your HTML document.

Code Snippet:
```html
<!-- Link the Google Fonts API here -->
<link rel="stylesheet" href="styles.css">

46. Create a CSS rule to apply a web font named "Lato" with a font weight of 700 (bold) to all
headings (h1 to h6).

```css
 /* Apply the font rule here */
h1, h2, h3, h4, h5, h6 {
font-size: 24px;
}
```

47. Implement a multi-column layout with three equal-width columns using the CSS `column-
count` property.

48. Create a multi-column layout with a gap of 20 pixels between columns using the CSS `column-
gap` property.

49. Design a responsive multi-column layout that switches to a single column on screens narrower
than 600 pixels using media queries.

```css
/* Design the responsive multi-column layout here */
.column-container {
column-count: 2;
column-gap: 20px;
}

@media (max-width: 600px) {

.column-container {
column-count: 1;
}
}

50. Where Media Queries can be used? illustrate with an example