CSS Basics and Syntax PDF

CSS Basics and Syntax Answers 1. What does CSS stand for? A. Cascading Script Styles B. Cascading Style Sheets C. Cascading Style Syntax D. Creative Style Syntax Answer: Cascading Style Sheets (B) CSS is an acronym that stands for Cascading Style Sheets, used for styling web pages...

CSS Basics and Syntax Answers 1. What does CSS stand for? A. Cascading Script Styles B. Cascading Style Sheets C. Cascading Style Syntax D. Creative Style Syntax Answer: Cascading Style Sheets (B) CSS is an acronym that stands for Cascading Style Sheets, used for styling web pages. 2. Which of the following correctly describes how CSS saves work? A. It is limited to font styling only. B. It can format a single page only. C. It requires inline styles for consistency. D. It can manage styles for multiple web pages simultaneously. Answer: It can manage styles for multiple web pages simultaneously. (D) CSS allows for the styling of multiple web pages from a single stylesheet, saving time and effort. 3. What is NOT a type of CSS selector? A. Simple selectors B. Contextual selectors C. Pseudo-class selectors D. Combination selectors Answer: Contextual selectors (B) CSS selectors include simple, combinatory, pseudo-class, pseudo- element, and attribute selectors, but not contextual selectors. 4. What is the purpose of a CSS declaration block? A. To contain CSS properties and values for styling. B. To group multiple selectors. C. To define the relationship between HTML elements. D. To comment on CSS code. Answer: To contain CSS properties and values for styling. (A) A declaration block contains one or more property-value pairs that define how the selected elements will be styled. 5. What feature can CSS provide that HTML cannot? A. Setting the exact height of an element. B. Highlighting text using images. C. Creating tables for layout. D. Embedding audio and video. Answer: Setting the exact height of an element. (A) CSS allows for precise control over styles, such as setting font sizes and element positioning. 6. Which of the following is a correct example of a CSS rule-set? A. h1 { color: blue; } B. p color = green; C. color: red; p; D. { font-size: 16px; } Answer: h1 { color: blue; } (A) A proper CSS rule-set consists of a selector followed by a declaration block enclosed in curly braces, as shown in option A. 7. What do pseudo-class selectors in CSS allow you to do? A. Group elements without affecting their parent-child relationship. B. Select elements based on their current state. C. Select elements based on specific classes only. D. Style parts of an element. Answer: Select elements based on their current state. (B) Pseudo-class selectors enable you to target elements based on their state, such as :hover or :focus. 8. What is one advantage of using external stylesheets? A. They make the styling faster but less consistent. B. They allow for centralized control of multiple web pages’ appearance. C. They can only include font styles. D. They can be used to style only one HTML file. Answer: They allow for centralized control of multiple web pages’ appearance. (B) External stylesheets ensure a consistent look across all linked web pages by allowing centralized style control. 9. What is the primary use of inline CSS? A. To style multiple elements at once B. To define reusable styles across pages C. To add global styles for a website D. To apply a unique style to a single element Answer: To apply a unique style to a single element (D) Inline CSS is specifically designed for applying unique styles to individual elements using the style attribute. 10. Which CSS property is used to change the color of the text? A. text-align B. font-weight C. background-color D. color Answer: color (D) The 'color' property directly sets the color of the text in CSS. 11. What does the alpha parameter in RGBA color values represent? A. The degree of opacity for the color B. The saturation level of the color C. The overall brightness of the color D. The hue of the color Answer: The degree of opacity for the color (A) The alpha parameter in an RGBA color value specifies the opacity level, ranging from fully transparent (0.0) to fully opaque (1.0). 12. Which property would you use to indent the text of a paragraph? A. letter-spacing B. text-indent C. text-shadow D. text-decoration Answer: text-indent (B) The 'text-indent' property specifically controls the indentation of paragraphs in CSS. 13. What effect does the font-variant property create? A. Changes the font color B. Creates a small-caps effect C. Makes the font bold D. Changes the font size Answer: Creates a small-caps effect (B) The 'font-variant' property is used to create a small-caps effect in text styles. 14. Which of the following describes HSL in CSS? A. Hue, Saturation, Lightness B. Hue, Starlight, Luminosity C. High Saturation Linearity D. Highly Saturated Light Answer: Hue, Saturation, Lightness (A) HSL stands for Hue, Saturation, and Lightness, which are used to define colors in CSS. 15. What does the text-shadow property do? A. Transforms text to uppercase B. Changes text color on hover C. Sets the shadow around text D. Boldens the text Answer: Sets the shadow around text (C) The 'text-shadow' property is utilized to create shadows around text elements. 16. Which property would you use to align text in a document? A. text-align B. text-direction C. text-justify D. text-spacing Answer: text-align (A) 'text-align' is the CSS property specifically designed for aligning text within a document. 17. What effect does the transform property with scale(2, 3) have on an element? A. It keeps the original size of the element. B. It doubles the width and triples the height of the element. C. It only affects the visibility of the element. D. It rotates the element by 2 degrees and 3 degrees. Answer: It doubles the width and triples the height of the element. (B) The scale function increases the width and height of the element by the specified factors. 18. How does the rotate() method affect an element when a negative value is used? A. It rotates the element clockwise. B. It only changes the size of the element. C. It has no effect on the element. D. It rotates the element counter-clockwise. Answer: It rotates the element counter-clockwise. (D) Negative values in the rotate method indicate a counter-clockwise rotation. 19. What is the role of 'flex-wrap' in a flex container? A. It aligns flex items vertically. B. It adjusts the size of flex items. C. It changes the order of flex items. D. It specifies whether flex items should wrap onto multiple lines. Answer: It specifies whether flex items should wrap onto multiple lines. (D) The 'flex-wrap' property determines if flex items should wrap to the next line when there's insufficient space. 20. Which CSS property would you use to align flex items horizontally when there is extra space on the main axis? A. align-content B. justify-content C. align-items D. flex-direction Answer: justify-content (B) The 'justify-content' property aligns flex items along the main axis. 21. What does the flex-direction property do in a flex container? A. It aligns items on the cross-axis. B. It specifies the direction in which flex items are placed in the flex container. C. It wraps flex items onto multiple lines. D. It changes the size of the flex container. Answer: It specifies the direction in which flex items are placed in the flex container. (B) The 'flex-direction' property determines how flex items are laid out in the flex container. 22. What is the function of the align-content property in a flex container? A. It modifies the alignment of flex lines in the container. B. It aligns individual flex items. C. It specifies the direction of flex items. D. It adjusts the size of flex items. Answer: It modifies the alignment of flex lines in the container. (A) The 'align-content' property is used to align the flex lines when there is extra space in the container. 23. What transformation does translate(50px, 100px) apply to the element? A. It changes the size of the element. B. It moves the element 50 pixels down and 100 pixels to the right. C. It rotates the element 50 degrees. D. It moves the element 50 pixels to the right and 100 pixels down. Answer: It moves the element 50 pixels to the right and 100 pixels down. (D) The translate function shifts the element to the right by 50 pixels and down by 100 pixels. 24. Which transform method only changes the width of the element? A. scale() B. rotate() C. scaleX() D. translate() Answer: scaleX() (C) The scaleX() method specifically alters the width, leaving the height unchanged. 25. What defines a pseudo-class in CSS? A. A class that cannot be combined with other classes B. A property to change font styles C. A way to set color properties using RGB values D. A method to define a special state of an element Answer: A method to define a special state of an element (D) A pseudo-class is used to define a special state of an element, allowing for different styling based on user interaction. 26. Which CSS declaration correctly sets the background color for unvisited links? A. a:active { background-color: lightblue; } B. a:visited { background-color: yellow; } C. a:link { background-color: lightblue; } D. a:hover { background-color: lightblue; } Answer: a:link { background-color: lightblue; } (C) The declaration 'a:link { background-color: lightblue; }' applies the background color for unvisited links. 27. How should the pseudo-classes be ordered in the CSS definition for proper functionality? A. a:link, a:hover, a:active, a:visited B. a:link, a:visited, a:hover, a:active C. a:visited, a:link, a:hover, a:active D. a:hover, a:link, a:active, a:visited Answer: a:link, a:visited, a:hover, a:active (B) The correct order is a:link, a:visited, a:hover, a:active to ensure proper styling of links. 28. Which property is used to style an element when it is in focus? A. a:focus B. a:active C. p:focus D. a:hover Answer: a:focus (A) The 'a:focus' pseudo-class is used to style an element while it has focus. 29. What result does the declaration 'p.highlight:hover { background-color: lightblue; }' produce? A. Changes all paragraphs' background color to blue B. Sets the background color of all paragraphs permanently C. Changes the background color of paragraphs with class 'highlight' on hover D. Does nothing, since 'hover' cannot be applied to paragraphs Answer: Changes the background color of paragraphs with class 'highlight' on hover (C) This declaration changes the background color of paragraphs with the class 'highlight' when hovered over. 30. What does the 'border-color' property support in the given example? A. Only one color at a time B. A sequence of colors for each border C. Only solid styles D. Only hex color codes Answer: A sequence of colors for each border (B) The 'border-color' property supports a sequence of colors, allowing different sides of a border to have different colors. 31. Which statement is true about pseudo-classes? A. Pseudo-classes can only be applied to links B. Pseudo-classes are case-sensitive in CSS C. Pseudo-classes cannot be combined with CSS classes D. Pseudo-classes are not case-sensitive Answer: Pseudo-classes are not case-sensitive (D) Pseudo-class names in CSS are not case-sensitive, allowing for consistency in styling. 32. What does the viewport element assist in establishing for web pages? A. It provides instructions on page dimensions and scaling. B. It allows for fixed element sizes across all devices. C. It ensures all images are displayed at a standard height. D. It restricts the web page to a maximum width of 800px. Answer: It provides instructions on page dimensions and scaling. (A) The viewport element gives browsers instructions on how to control the page's dimensions and scaling. 33. Which CSS property combination will ensure images scale responsively? A. width: 100%; height: 100%; B. width: 100%; height: auto; C. width: auto; height: auto; D. max-width: auto; height: auto; Answer: width: 100%; height: auto; (B) Setting the width to 100% and height to auto allows images to scale responsively. 34. What should be avoided to ensure proper rendering on various viewport widths? A. Setting large fixed widths for page elements. B. Utilizing percentage heights for elements. C. Implementing CSS media queries. D. Using relative widths for element sizing. Answer: Setting large fixed widths for page elements. (A) Large fixed widths can cause elements to be too wide for smaller viewports, so they should be avoided. 35. What is the effect of setting an image's max-width property to 100%? A. The image will always fill the entire viewport. B. The image will scale up indefinitely. C. The image will never be larger than its original size. D. The image will become wider than the viewport. Answer: The image will never be larger than its original size. (C) The max-width property prevents the image from scaling up larger than its original dimensions. 36. Why is it important to use CSS media queries in responsive design? A. To combine different images into one larger image. B. To apply different styles for various screen sizes. C. To restrict the use of images on smaller screens. D. To ensure all elements have fixed widths. Answer: To apply different styles for various screen sizes. (B) CSS media queries allow designers to apply different styling based on the screen size. 37. What does the initial-scale=1.0 directive in the viewport element signify? A. The page will load at its default width. B. The initial zoom level at page load will be set. C. The page will display in half its actual size. D. The browser should zoom in on the page when loaded. Answer: The initial zoom level at page load will be set. (B) The initial-scale=1.0 sets the zoom level when the page is first loaded. 38. What kind of values should be avoided when positioning elements for small devices? A. Percentaged values for width. B. Relative positioning values. C. Fixed positioning values. D. Flexible image sizes. Answer: Fixed positioning values. (C) Using large absolute positioning values can cause elements to fall outside the viewport on small devices. 39. When displaying different images for different devices, which approach should be taken? A. Using media queries to specify different images. B. Using one large image for all displays. C. Applying the same image for both large and small screens. D. Automatically scaling images for all devices with fixed size. Answer: Using media queries to specify different images. (A) Media queries allow designers to display different images based on the device size.