quiz 1 Flashcards
(130 cards)
1
Q
- What is CSS and why is it useful in web design?
A
CSS (Cascading Style Sheets) is a language used to control the presentation of HTML documents. It separates content from presentation, allows consistent styling across pages, and enables design changes by editing one file rather than every page.
2
Q
- Describe the three levels of style sheets in HTML.
A
Inline-level (within an element via the style attribute), Document-level (embedded in the head using a <style> tag), and External-level (in separate .css files linked via <link></link>).</style>
3
Q
- What is the cascade in CSS and how does specificity affect style rules?
A
The cascade is the process by which the browser determines which CSS rule applies when multiple rules target the same element. Specificity is determined by selector type (inline > ID > class > element) and the order of declarations.
4
Q
- What are the key differences between inline, embedded, and external CSS?
A
Inline CSS is written directly in the HTML tag, embedded CSS is placed in the <style> block in the head, and external CSS is in separate .css files. External CSS offers better reusability and maintainability.</style>
5
Q
- Explain the purpose of a CSS font stack and give an example.
A
A font stack is a prioritized list of fonts used with the font-family property. For example: font-family: ‘Apple Chancery’, Script, ‘Times New Roman’, Courier; This tells the browser which font to use if the first choice isn’t available.
6
Q
- What are some common text styling properties in CSS?
A
Common text styling properties include color, font-family, font-size, font-weight, text-align, text-transform, text-decoration, and text-shadow.
7
Q
- How do you specify an RGB or HEX color value in CSS?
A
RGB values are specified using rgb(), e.g., rgb(255, 0, 0), and HEX values use a hash symbol, e.g., #FF0000.
8
Q
- What does the term ‘Document Object Model’ (DOM) refer to?
A
The DOM is a tree-like representation of the HTML document created by the browser. It represents each element as a node, allowing scripts to modify content, structure, and styling dynamically.
9
Q
- What is the purpose of the DOCTYPE declaration in HTML?
A
The DOCTYPE declaration tells the browser which version of HTML is being used. For HTML5, it is simply <!DOCTYPE html>.
10
Q
- Describe the concept of ‘markup’ in HTML.
A
Markup is the process of annotating text with tags that define its structure and meaning, such as headings, paragraphs, links, images, and more.
11
Q
- What are void (empty) elements in HTML and give three examples.
A
Void elements do not require a closing tag. Examples include <br></br>, <img></img>, and <hr>.
12
Q
- What is the difference between absolute and relative URLs?
A
An absolute URL provides the full path (including protocol and domain) to a resource, while a relative URL specifies the path relative to the current document.
13
Q
- How do you create a hyperlink in HTML and what are its main components?
A
Use the <a> tag with an href attribute for the destination, link text for the clickable area, and optionally a target attribute to specify where to open the link.</a>
14
Q
- What is the role of the alt attribute in the <img></img> tag?
A
The alt attribute provides alternative text for an image, which is displayed if the image cannot load and is used for accessibility (e.g., screen readers).
15
Q
- List the primary HTML elements used for creating lists and briefly describe each.
A
Unordered lists (<ul>) use bullets; Ordered lists (<ol>) use numbers or letters; Definition lists (<dl>) use <dt> for terms and <dd> for definitions.
16
Q
- Explain the structure of an HTML table and name its main elements.
A
An HTML table is built with the <table> tag, containing rows (<tr>), header cells (<th>), and data cells (<td>). A <caption> may also be used for a title.
17
Q
- What are semantic elements in HTML and why are they important?
A
Semantic elements (like <header>, <nav>, <section>, <article>, <footer>) describe the meaning of the content, improving accessibility, SEO, and code maintainability.
18
Q
- What is the difference between the <section>, <article>, and <div> elements?
A
<section> represents a thematic grouping of content; <article> is a self-contained, independent piece of content; <div> is a generic container with no semantic meaning, used for styling and grouping.
</div></article></section>
19
Q
- How do you embed a video from YouTube into an HTML page?
A
By using an <iframe> element with the YouTube embed URL, e.g., <iframe src='https://www.youtube.com/embed/VIDEO_ID?autoplay=1'></iframe>.
20
Q
- What is the purpose of the HTML lang attribute and how is it used?
A
The lang attribute specifies the language of the document, which helps with accessibility and SEO. It is added to the <html> tag, e.g., <html lang='en-US'>.
21
Q
- Outline the historical timeline of major web events from the early 1990s to the 2000s.
A
Key events include Tim Berners-Lee’s proposal in 1989, the first website in 1991, Netscape’s rise in the mid-90s, the advent of Internet Explorer in 1995, HTML 3.2 in 1997, and XHTML 1.0 in 2000.
22
Q
- What major change did HTML5 bring compared to previous HTML versions?
A
HTML5 introduced new semantic elements, native multimedia support (audio and video), improved error handling, and a living standard approach that continuously evolves.
23
Q
- What is the purpose of HTML forms and what are two common input types?
A
HTML forms collect user input. Common input types include text inputs (<input></input>) and radio buttons (<input></input>).
24
Q
- Describe the concept of relative units (em, rem, percent) in CSS font sizing.
A
em is relative to the font size of its own element, rem is relative to the root element’s font size, and percent is relative to the parent element’s size. They allow scalable and responsive design.
25
25. What does the term 'hypertext' imply in the context of HTML?
Hypertext refers to text that contains links to other texts or resources, allowing users to navigate between pages and content easily.
26
26. Explain the importance of validating your HTML markup.
Validating HTML ensures code adheres to standards, which improves cross-browser compatibility, accessibility, and helps avoid errors and unexpected behavior.
27
27. What are HTML entities and why are they used?
HTML entities are codes used to display special characters (such as ©, <, >) that have reserved meanings in HTML, written either as a named entity (e.g., ©) or a numeric entity (e.g., ©).
28
28. How do you create an intra-document link (anchor link) in HTML?
Assign an id attribute to the target element (e.g.,
Title
) and create a link with href='#section1' to jump to that section.
29
29. What is the purpose of the tag in HTML?
The tag provides metadata about the document such as character encoding, author, and description. It helps browsers and search engines understand the content.
30
30. Summarize the role of the W3C and WHATWG in HTML development.
W3C sets web standards for long-term growth and interoperability, while WHATWG develops the HTML Living Standard through an iterative, community-driven process. Since 2019, WHATWG has been the sole publisher of HTML and DOM standards.
31
31. What is the difference between a class selector and an ID selector in CSS?
A class selector (preceded by .) can be used on multiple elements, while an ID selector (preceded by #) must be unique to one element per page.
32
32. How does the CSS box model define element dimensions?
The CSS box model consists of content, padding, border, and margin. The total width/height is the sum of these parts, affecting layout and spacing.
33
33. What is the effect of using border-collapse on a table?
The border-collapse property merges adjacent table cell borders into a single border, giving a cleaner appearance.
34
34. Explain the purpose of the z-index property in CSS.
The z-index property sets the stacking order of positioned elements (elements with position relative, absolute, or fixed). A higher z-index means the element appears in front.
35
35. What are pseudo-classes in CSS? Give an example.
Pseudo-classes define the state of an element. For example, :hover applies a style when the mouse hovers over an element.
36
36. How do attribute selectors work in CSS?
Attribute selectors apply styles to elements based on the presence or value of an attribute. For example, [type='text'] targets input elements of type text.
37
37. What is the purpose of the ::before and ::after pseudo-elements?
They allow insertion of content before or after an element’s content without modifying the HTML, often used for decorative purposes.
38
38. How does CSS specificity determine which rule applies?
Specificity is calculated based on the number and type of selectors in a rule. Inline styles have the highest specificity, followed by IDs, classes/attributes, and finally element selectors.
39
39. What is the function of the calc() function in CSS?
The calc() function performs calculations to determine CSS property values, allowing dynamic adjustment (e.g., width: calc(100% - 20px)).
40
40. How do you apply a style to only the first child of a container using CSS?
Using the :first-child pseudo-class, e.g., div p:first-child { color: red; }.
41
41. What is a media query in CSS?
Media queries allow CSS to apply styles based on the device’s characteristics, like screen width, for responsive design.
42
42. How can you change the font style of an element to italic in CSS?
Use the font-style property with the value 'italic', e.g., p { font-style: italic; }.
43
43. What is the purpose of the rem unit in CSS?
rem is a relative unit based on the root element’s font size, ensuring consistent sizing across elements.
44
44. Explain the use of the !important declaration in CSS.
!important forces a CSS rule to override others, regardless of specificity. It should be used sparingly as it can make maintenance difficult.
45
45. How do you hide an element visually while keeping it accessible to screen readers?
Use techniques like positioning off-screen (e.g., position: absolute; left: -9999px;) or using a utility class designed for accessibility.
46
46. What does the overflow property do in CSS?
The overflow property controls how content that exceeds an element’s box is handled. Values include visible, hidden, scroll, and auto.
47
47. How can you center an element horizontally using CSS?
For block elements with a set width, use margin: 0 auto; or use flexbox (justify-content: center) on the parent container.
48
48. What is Flexbox in CSS and what problem does it solve?
Flexbox is a layout model that provides a more efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.
49
49. How do you create a grid layout using CSS Grid?
CSS Grid allows you to define rows and columns with grid-template-rows and grid-template-columns properties, and place items using grid-area or grid-column/grid-row properties.
50
50. What is the difference between inline and block elements in HTML?
Block elements take up the full width available and start on a new line (e.g.,
,
), whereas inline elements only take up as much width as necessary and do not force a line break (e.g., , ).
51
51. How do you make a list item marker appear inside the content box in CSS?
Set list-style-position: inside; on the list element.
52
52. What is the function of the text-align property?
The text-align property sets the horizontal alignment of inline content within a block-level element, with values like left, right, center, or justify.
53
53. How can you ensure that a background image covers the entire container in CSS?
Use background-size: cover; which scales the image to cover the container while maintaining its aspect ratio.
54
54. What is the purpose of the object-fit property in CSS?
object-fit specifies how the content of a replaced element (like an ![]()
) should be resized to fit its container, with values like contain or cover.
55
55. How do you apply a drop shadow to an element using CSS?
Use the box-shadow property, e.g., box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
56
56. What is the difference between padding and margin in CSS?
Padding is the space between an element’s content and its border; margin is the space outside the border, separating it from other elements.
57
57. How can you create a smooth transition effect for a CSS property change?
Use the transition property, e.g., transition: background-color 0.5s ease; to animate changes smoothly.
58
58. What does the white-space property do in CSS?
The white-space property controls how whitespace inside an element is handled, such as preserving line breaks or collapsing spaces.
59
59. How can you force an element to break and start on a new line in CSS?
Using display: block; forces the element to start on a new line, or use a line break (
) in HTML.
) in HTML.
60
60. What is a CSS preprocessor and name two popular ones.
A CSS preprocessor (like SASS or LESS) adds programming features (variables, functions, nesting) to CSS, which are compiled into standard CSS.
61
61. What does the background-repeat property do?
It controls whether a background image repeats (values include repeat, no-repeat, repeat-x, repeat-y).
62
62. How can you apply a gradient background in CSS?
Using the linear-gradient or radial-gradient functions as the background-image value, e.g., background-image: linear-gradient(to right, red, blue);
63
63. What is the purpose of the opacity property in CSS?
The opacity property sets the transparency level of an element, with values between 0 (fully transparent) and 1 (fully opaque).
64
64. How do you create a responsive navigation menu using CSS?
Responsive navigation can be created using media queries to adjust the layout and flexbox or grid for alignment, often combined with JavaScript for toggling mobile menus.
65
65. What is the difference between :nth-child() and :nth-of-type() selectors?
:nth-child() selects an element based on its position among all siblings, while :nth-of-type() selects an element based on its position among siblings of the same type.
66
66. How can you visually hide an element without removing it from the document flow using CSS?
You can use visibility: hidden; which makes the element invisible but it still occupies space.
67
67. What is the effect of setting position: fixed; on an element?
An element with position: fixed; is removed from the normal document flow and positioned relative to the viewport, remaining in the same place even during scrolling.
68
68. How does z-index work with positioned elements?
z-index specifies the stack order of positioned elements; elements with higher z-index values appear in front of those with lower values.
69
69. What is the purpose of the clear property in CSS?
The clear property specifies whether an element should be moved below floating elements, clearing them from the left, right, or both.
70
70. How do you create a sticky header that stays at the top of the page using CSS?
Use position: sticky; along with top: 0; on the header element so it remains at the top when scrolling.
71
71. What are vendor prefixes in CSS?
Vendor prefixes (e.g., -webkit-, -moz-, -ms-, -o-) are used to add support for new or experimental CSS features in different browsers.
72
72. How can you detect a browser’s support for a specific CSS feature?
You can use feature queries with @supports to apply styles only if a browser supports a particular CSS property.
73
73. What is the purpose of the calc() function in CSS?
calc() allows you to perform calculations to determine CSS property values dynamically, e.g., width: calc(100% - 50px);
74
74. How do you style the first letter of a paragraph using CSS?
Use the ::first-letter pseudo-element, e.g., p::first-letter { font-size: 200%; }.
75
75. What is the purpose of the content property in CSS?
The content property is used with pseudo-elements like ::before and ::after to insert generated content into the document.
76
76. How can you create a CSS rule that only applies to screens smaller than 600px wide?
Use a media query, e.g., @media only screen and (max-width: 600px) { /* CSS rules here */ }.
77
77. How do you set a fallback font in CSS?
List multiple fonts in the font-family property separated by commas, e.g., font-family: 'Helvetica Neue', Arial, sans-serif.
78
78. What is the difference between inline-block and block display values?
Inline-block elements flow inline with text but respect width and height, while block elements take the full width and start on a new line.
79
79. How do you center text vertically within an element using CSS?
Using flexbox: set display: flex; align-items: center; on the container to center its content vertically.
80
80. What is a CSS reset and why is it used?
A CSS reset removes browser-specific default styling to create a consistent baseline for styling across different browsers.
81
81. How do you apply multiple CSS classes to a single HTML element?
Separate class names with a space in the class attribute, e.g.,
.
82
82. What is the purpose of the list-style-type property in CSS?
list-style-type specifies the marker (e.g., disc, square, decimal) for list items in ordered and unordered lists.
83
83. How can you prevent an element from wrapping its content in CSS?
Use white-space: nowrap; to prevent line breaks within an element’s content.
84
84. What does the transform property do in CSS?
The transform property applies 2D or 3D transformations to an element, such as rotate, scale, translate, or skew.
85
85. How do you rotate an element 45 degrees using CSS?
Apply transform: rotate(45deg); to the element.
86
86. What is the perspective property in CSS?
The perspective property defines the distance between the z=0 plane and the user, affecting the intensity of 3D transforms on child elements.
87
87. How do you apply a transition delay in CSS?
Use the transition-delay property, e.g., transition-delay: 0.5s; to delay the start of a transition.
88
88. What is a CSS animation keyframe?
A keyframe defines the starting, ending, and intermediate points of a CSS animation sequence, declared with @keyframes.
89
89. How do you create an infinite animation loop in CSS?
Set the animation-iteration-count property to infinite, e.g., animation-iteration-count: infinite;.
90
90. What is the use of the pointer-events property in CSS?
pointer-events controls whether an element can be the target of mouse events. For example, pointer-events: none; disables mouse interaction.
91
91. How can you change the cursor appearance when hovering over an element?
Use the cursor property, e.g., cursor: pointer; to change the cursor to a hand icon.
92
92. What is the purpose of the filter property in CSS?
The filter property applies visual effects (e.g., blur, brightness, contrast) to an element, similar to graphical filters.
93
93. How do you apply a blur effect to an image using CSS?
Use filter: blur(5px); to apply a 5-pixel blur effect.
94
94. What is a CSS sprite and why is it used?
A CSS sprite combines multiple images into one to reduce HTTP requests and improve page load times. CSS background-position is then used to display the correct part of the image.
95
95. How do you vertically align inline elements using CSS?
Use vertical-align property, e.g., vertical-align: middle; for inline or table-cell elements.
96
96. What is the purpose of the max-width property in CSS?
max-width sets the maximum width an element can take, allowing it to shrink responsively without exceeding a set value.
97
97. How do you create a responsive image that scales with the browser window?
Set the image width to 100% and height to auto, e.g., img { width: 100%; height: auto; }.
98
98. What is the purpose of the clip-path property in CSS?
clip-path creates a clipping region that defines what part of an element is visible, allowing for non-rectangular shapes.
99
99. How do you apply a linear gradient background that transitions from red to blue in CSS?
Use background-image: linear-gradient(red, blue); to create a smooth gradient.
100
100. What does the CSS property white-space: pre; do?
white-space: pre; preserves whitespace and line breaks exactly as they are in the HTML source.
101
101. How can you align an image and text side by side in HTML/CSS?
Float the image (or use flexbox/grid) and let the text wrap around it, e.g., img { float: left; margin-right: 10px; }.
102
102. How do you clear floated elements in CSS?
Use clear: both; on the element that should appear below floated elements, or apply a clearfix hack on the container.
103
103. What is the difference between relative and absolute positioning in CSS?
Relative positioning moves an element relative to its normal position, while absolute positioning removes it from the document flow and positions it relative to its nearest positioned ancestor.
104
104. How do you center an element vertically and horizontally using absolute positioning?
Set the element’s position to absolute, then use top: 50%; left: 50%; and transform: translate(-50%, -50%); to center it.
105
105. What is the effect of setting display: none; on an element?
display: none; removes the element from the document flow so it is not visible and does not take up space.
106
106. How do you make an element's width adjust to its content using CSS?
Use display: inline-block; or set the width to auto, so the element only takes up as much space as needed.
107
107. What is a CSS vendor prefix and why might you need one?
A vendor prefix (e.g., -webkit-, -moz-) is added to CSS properties to ensure compatibility with specific browsers that implement experimental or proprietary features.
108
108. How can you style only the last child of a list using CSS?
Use the :last-child pseudo-class, e.g., li:last-child { margin-bottom: 0; }.
109
109. What does the overflow-x property control in CSS?
overflow-x controls the horizontal overflow of content, determining how content that exceeds the element’s width is handled.
110
110. How can you change the text color of an element on focus using CSS?
Use the :focus pseudo-class, e.g., input:focus { color: blue; }.
111
111. What is the function of the outline property in CSS?
The outline property draws a line outside the element’s border, often used for accessibility focus indicators. It does not take up space.
112
112. How do you remove the underline from a hyperlink using CSS?
Set text-decoration: none; on the element.
113
113. What does the CSS property font-variant: small-caps; do?
It transforms lowercase text into uppercase small capitals while leaving existing capitals unchanged.
114
114. How do you add a background image to an element using CSS?
Use background-image: url('image.jpg'); and optionally set background-size, background-position, and background-repeat.
115
115. What is the purpose of the CSS property line-height?
line-height controls the spacing between lines of text, improving readability and layout.
116
116. How can you force text to break onto a new line in CSS?
Use word-wrap: break-word; or overflow-wrap: break-word; to force long words or URLs to break and wrap onto the next line.
117
117. What is the purpose of the CSS property text-overflow?
text-overflow specifies how overflowed content that is not displayed is signaled to the user, often using ellipsis (… ) when combined with overflow: hidden and white-space: nowrap.
118
118. How do you set a background color for an element in CSS?
Use background-color: #RRGGBB; or a named color, e.g., background-color: lightblue;.
119
119. What does the CSS property font-weight control?
font-weight controls the boldness of text. Common values are normal, bold, bolder, lighter, or numerical values (e.g., 400, 700).
120
120. How do you apply a specific font style to a paragraph in CSS?
Use the font-family property, e.g., p { font-family: 'Times New Roman', serif; }.
121
121. What is the purpose of the CSS property text-transform?
text-transform changes the case of text, with values like uppercase, lowercase, and capitalize.
122
122. How do you add a shadow effect to text in CSS?
Use the text-shadow property, e.g., text-shadow: 2px 2px 4px #000000;.
123
123. What is the use of the CSS property word-spacing?
word-spacing adjusts the space between words, which can improve text legibility or create a stylistic effect.
124
124. How do you apply multiple background images to an element in CSS?
List multiple background images separated by commas in the background-image property, e.g., background-image: url('img1.png'), url('img2.png');.
125
125. What does the CSS property background-attachment: fixed; do?
It fixes the background image in place, so it does not scroll with the content.
126
126. How can you simulate a button press effect using CSS?
Using the :active pseudo-class, e.g., button:active { transform: translateY(2px); } to create a pressed effect.
127
127. What is a CSS shorthand property? Give an example.
A shorthand property allows you to set multiple related properties at once. For example, margin: 10px 5px; sets both the vertical and horizontal margins.
128
128. How do you change the font color of a heading element in CSS?
Apply the color property, e.g., h1 { color: navy; }.
129
129. What does the CSS property font-size control?
font-size determines the size of the text. It can be set in absolute units (px, pt) or relative units (em, rem, %).
130
130. How can you apply a CSS rule to all elements within a specific container?
Use a descendant selector, e.g., .container * { margin: 0; padding: 0; } to target every element inside a container with class 'container'.
-
Key Links
-
Subjects
-
Company
-
Find Us
-
