WT QB U3 - Web Design Past Paper PDF

**Level A. Easy Questions (2 marks each)** **Q1: What is CSS?**  CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation and formatting of a document written in markup languages like HTML. It enables the separation of content from presentation, allowing develope...

**Level A. Easy Questions (2 marks each)** **Q1: What is CSS?**  CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation and formatting of a document written in markup languages like HTML. It enables the separation of content from presentation, allowing developers to control the visual appearance of web pages. **Q2: Write the syntax for CSS.**  The basic syntax for CSS involves defining a selector followed by a set of property-value pairs enclosed in curly braces. For example:.selector { property: value; } **Q3: What are the advantages of CSS?**  Advantages of CSS include: - **Separation of Concerns:** CSS separates content from presentation. - **Consistency:** Provides a consistent look across multiple pages. - **Ease of Maintenance:** Changes can be applied globally by modifying the style sheet. - **Faster Page Loading:** Reduces the amount of code in HTML documents. **Q4: List out the types of CSS.** 1. **Inline CSS:** Applied directly to an HTML element using the style attribute. 2. **Internal CSS:** Defined within the \ tag in the HTML \ section. 3. **External CSS:** Defined in a separate CSS file and linked to the HTML document. **Q5: Write an example for an internal style sheet.** htmlCopy code \ \ \ \ body { background-color: lightblue; color: darkblue; } \ \ \ \This is an internal style sheet example\ \ \ **Q6: Write an example for an inline style.** \This is an inline style example.\ **Q7: Write an example for External style sheet.** \ \ \ \ \ \ \ \This is an external style sheet example\ \ \ \ body { background-color: lightgray; color: darkgray; } **Q8: List out some font properties.**  Some common font properties include: - **font-family:** Specifies the font of text. - **font-size:** Sets the size of the font. - **font-weight:** Defines the thickness of the font characters. - **font-style:** Specifies the style of the font (italic, oblique, normal). - **text-align:** Aligns text horizontally (left, right, center, justify). **Q9: What is Box-model?**  The box model is a fundamental concept in CSS that defines the layout of an element. It consists of content, padding, border, and margin. - **Content:** The actual content of the element. - **Padding:** Clears an area around the content inside the border. - **Border:** A border surrounding the padding (if any). - **Margin:** Clears an area outside the border, creating space between elements. **Q10: What are the advantages of CSS?**  (Repeated question from Level A) **Q11: What is the use of id in CSS?**  In CSS, the \"id\" selector is used to uniquely identify a single HTML element. It is denoted by a hash (\#) followed by the id value. For example: \#uniqueElement { color: red; } The use of an \"id\" is beneficial when applying styles or scripting to a specific element on a page. **Q12: What is the use of class?**  The \"class\" selector in CSS is used to apply styles to multiple HTML elements. Unlike the \"id\" selector, which must be unique, the same class can be applied to multiple elements, allowing for consistent styling..sameClass { font-weight: bold; } **Q13: Display Background color property.**  The background-color property in CSS is used to set the background color of an element. body { background-color: lightyellow; } **Q14: How to change text color in CSS?**  The color property is used to change the text color of an element. p { color: darkgreen; } **Q15: Display border property?**  The border property in CSS is used to set the border of an element. It includes the border width, style, and color. div { border: 2px solid blue; } **Q16: What is the use of border radius?**  The border-radius property is used to create rounded corners for an element\'s border. It can be applied to all four corners or specified individually. **Q17: Describe margin property.**  The margin property in CSS defines the space outside an element\'s border. It controls the gap between the element\'s border and surrounding elements. **Q18: Describe padding property.**  The padding property in CSS defines the space between the content and the border of an element. It provides internal spacing within the element. **Q19: What is media query.**  A media query in CSS allows the application of different styles based on characteristics of the device, such as screen width, height, or device orientation. It is commonly used for responsive web design. \@media screen and (max-width: 600px) { body { background-color: lightpink; } } **Q20: How to display, position, and float an element.** div { display: block; /\* or inline, inline-block \*/ position: relative; /\* or absolute, fixed \*/ float: left; /\* or right \*/ } **Q21: Difference between float and flexbox with example? (CO2)** **Float:** The float property in CSS was traditionally used for basic layout purposes, like aligning images within text or creating multi-column layouts. However, it has some limitations, such as the need for clearfix techniques to avoid layout issues when floating elements. **Example:** /\* Float Example \*/ img { float: left; } In this example, the image is floated to the left, and text or other inline elements will wrap around it. However, managing layouts with float can become complex, especially in modern web design where responsiveness is crucial. **Flexbox:** Flexbox, or the Flexible Box Layout, is a more modern and powerful layout model in CSS. It is designed to provide a more efficient way to distribute space and align items in a container, especially in complex and responsive designs. **Example:** /\* Flexbox Example \*/.container { display: flex; justify-content: space-between; } In this example, the container is set to display: flex;, and the justify-content: space-between; property evenly distributes space between the flex items, creating a layout with equal spacing. Flexbox offers better control and predictability in layouts compared to the float property. **Q22: How to add and style a background-image using CSS? (CO1)** Adding a background image to a webpage can be accomplished using the background-image property in CSS. This property is often used in combination with other background-related properties. **Example:** body { background-image: url(\'background.jpg\'); background-size: cover; background-repeat: no-repeat; } - background-image: Specifies the URL of the image. - background-size: Ensures the image covers the entire background. - background-repeat: Prevents the image from repeating. In this example, the body element\'s background is set to an image (\'background.jpg\'). The cover property ensures the image covers the entire background, and no-repeat prevents it from repeating. **Q23: Describe margin and padding with examples. (CO1)** **Margin:** The margin property defines the space outside an element\'s border, creating space between the element and surrounding elements. **Example:** div { margin: 10px; } This sets a margin of 10 pixels for all sides of the div element, creating space around it. Margins are used to create spacing between elements on a webpage. **Padding:** The padding property defines the space between the content and the element\'s border. **Example:** p { padding: 5px; } This sets padding of 5 pixels for all sides of the p element, providing space between the text and the element\'s border. Padding is used to control the internal spacing of an element. In summary, margin creates space outside the element, while padding creates space inside the element. **Q24: Describe the properties of Position with examples. (CO1)** The position property in CSS is used to control the positioning of an element within its containing element. There are several values for the position property: **Relative:** /\* Relative Position Example \*/ div { position: relative; top: 20px; left: 30px; } - position: relative;: Positions the element relative to its normal position. - top: 20px; and left: 30px;: Offset values from the element\'s normal position. In this example, the div is relatively positioned, and top and left properties move it 20 pixels down and 30 pixels to the right from its normal position. **Q25: Describe properties of display with examples. (CO1)** The display property in CSS defines the rendering behavior of an element. Here are a few values for the display property: **Inline-Block:** /\* Inline-Block Display Example \*/ div { display: inline-block; } - display: inline-block;: Allows the element to behave like an inline element, but with block-like properties. In this example, the div is set to display: inline-block;, making it flow like an inline element but allowing block-like properties such as width and height. **Q26: What is the use of float in CSS? (CO2)** The float property in CSS is used for layout purposes, allowing elements to be moved to the left or right, with text and inline elements wrapping around it. **Example:** img { float: left; } This example floats an image to the left, and text or other inline elements will wrap around it. While float was historically used for simple layouts, it has limitations and can lead to unexpected behavior in more complex designs. **Q27: Design an effective navbar? (CO2)** An effective navigation bar (navbar) is crucial for user experience. It should be visually appealing and user-friendly. **Example:** /\* Navbar Example \*/ nav { background-color: \#333; padding: 10px; } nav a { color: white; text-decoration: none; padding: 10px; margin: 0 10px; } - The nav element is styled with a dark background and padding. - Links (nav a) are styled with white text, no underlines (text-decoration: none;), padding for spacing, and margin for separation. This example creates a visually appealing and easy-to-navigate navbar. **Q28: What is the use of Flexbox in CSS? (CO2)** Flexbox, or the Flexible Box Layout, is a powerful layout model in CSS designed to simplify the creation of complex and responsive layouts. **Example:** /\* Flexbox Example \*/.container { display: flex; justify-content: space-between; } - display: flex;: Turns the container into a flex container. - justify-content: space-between;: Distributes space evenly between flex items. In this example, the container is set to display: flex;, and justify-content: space-between; property evenly distributes space between the flex items. Flexbox provides a more efficient and predictable way to handle layouts compared to traditional methods. **Q29: Write the HTML code and use external CSS for styling it. (CO1)** \ \ \ \ \ \ \ \This is an example HTML file with external CSS\ \ \ \ body { background-color: lightblue; color: darkblue; } - The HTML file links to an external CSS file (styles.css). - The body element is styled with a light blue background and dark blue text color in the external CSS file. This example demonstrates the separation of HTML structure and CSS styling for better maintainability and organization. **Q30: Explain selectors in CSS & and the use of selectors in CSS. (CO2)** Selectors in CSS are patterns used to select and style HTML elements. They can be combined and nested for more specific targeting. **Example:** /\* Selectors Example \*/ p { color: red; /\* Selects all \ elements and sets text color to red \*/ }.container div { font-weight: bold; /\* Selects \ elements inside elements with class \'container\' and sets font weight to bold \*/ } - **Element Selector (p):** Selects all \ elements and sets text color to red. - **Descendant Selector (.container div):** Selects \ elements inside elements with class \'container\' and sets font weight to bold. Selectors allow for precise targeting of elements, making CSS more expressive and versatile. They play a crucial role in styling specific elements or groups of elements on a webpage. **Q31: Describe pseudo-selectors with examples. (CO3)** Pseudo-selectors in CSS allow you to select and style elements based on their state or position, providing a dynamic and interactive styling approach. **Hover Pseudo-selector:** /\* Hover Pseudo-selector Example \*/ a:hover { color: blue; /\* Changes text color to blue when the link is hovered \*/ text-decoration: underline; /\* Underlines the link on hover \*/ } In this example, the :hover pseudo-selector is used to change the text color to blue and add an underline effect when the user hovers over a link (a). **Nth-child Pseudo-selector:** /\* Nth-child Pseudo-selector Example \*/ ul li:nth-child(odd) { background-color: \#f2f2f2; /\* Sets background color for odd list items in a ul \*/ } Here, the :nth-child(odd) pseudo-selector selects and styles odd-numbered list items within a ul, giving them a distinctive background color. **Q32: Define Inline, Internal, and External stylesheets with proper examples. (CO2)** **Inline Stylesheet:** \ \This text is red and has a font size of 16 pixels.\ Inline styles are applied directly to an HTML element using the style attribute. In this example, the text color and font size of the \ element are set inline. **Internal Stylesheet:** \ \ \ p { color: blue; font-size: 18px; } \ \ \ \This text is blue and has a font size of 18 pixels.\ \ Internal styles are defined within the HTML document using the \ tag in the head section. Here, the text color and font size of the \ element are set internally. **External Stylesheet:** /\* External Stylesheet Example (styles.css) \*/ p { color: green; font-size: 20px; } htmlCopy code \ \ \ \ \ \This text is green and has a font size of 20 pixels.\ \ External styles are defined in a separate CSS file and linked to the HTML document. In this example, the text color and font size of the \ element are set in an external stylesheet (styles.css). **Q33: Describe box shadow and text-shadow property with examples. (CO2)** **Box Shadow:** /\* Box Shadow Example \*/ div { box-shadow: 5px 5px 10px \#888888; } The box-shadow property adds a shadow effect to an element. In this example, a box shadow is applied to a div with a horizontal offset of 5 pixels, a vertical offset of 5 pixels, a blur radius of 10 pixels, and a shadow color of \#888888. **Text Shadow:** /\* Text Shadow Example \*/ h1 { text-shadow: 2px 2px 4px \#333333; } The text-shadow property adds a shadow effect to text. Here, a text shadow is applied to an h1 element with a horizontal offset of 2 pixels, a vertical offset of 2 pixels, a blur radius of 4 pixels, and a shadow color of \#333333. **Q34: What is the transition and transform with examples? (CO3)** **Transition:** /\* Transition Example \*/ button { background-color: \#3498db; transition: background-color 0.5s ease; } button:hover { background-color: \#2980b9; } The transition property allows for smooth animations of property changes over time. In this example, the background color of a button transitions over 0.5 seconds with an ease timing function when hovered over. **Transform:** /\* Transform Example \*/ img { transform: rotate(45deg); } The transform property applies transformations to an element. Here, an image is rotated by 45 degrees. **Q35: Describe the properties of animation with examples. (CO3)** CSS animations provide a way to create dynamic and engaging effects through the use of keyframes and animation properties. Example: /\* Animation Example \*/ \@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } } div { animation: slide 1s ease-in-out; } In this example, a slide animation is defined using \@keyframes, and the div element is animated to slide in from the left over 1 second with an ease-in-out timing function. **Q36: Describe all properties of flexbox with examples. (CO4)** Flexbox is a flexible layout model in CSS, and its properties offer powerful tools for creating responsive layouts. Example: /\* Flexbox Example \*/.container { display: flex; justify-content: space-between; align-items: center; }.item { flex-grow: 1; flex-shrink: 0; flex-basis: 30%; } - display: flex;: Turns the container into a flex container. - justify-content: space-between;: Distributes space evenly between flex items. - align-items: center;: Aligns flex items along the cross-axis (vertically centered). For individual items: - flex-grow: Specifies the ability of a flex item to grow. - flex-shrink: Specifies the ability of a flex item to shrink. - flex-basis: Specifies the initial size of a flex item. In this example, the flex container (container) has items with specified growth, shrinkage, and initial basis properties, creating a responsive layout with even spacing between items.