HTML & CSS Practice Test 4
What symbol is used to denote a class in CSS?
.
In Bootstrap, which class provides a responsive fixed-width container?
.container
To include a standard navbar in your website using Bootstrap, which class should you primary use?
.navbar
Observe the CSS rule below. Which of the following statements is true?
::first-line is a pseudo element
Which viewport value instructs the browser to render the width of the page at the width of its own screen?
<meta name='viewport'content='width=device-width'>
Which CSS property allows you to set breakpoints of different screen sizes in responsive design?
@media
If you have multiple elements you want to style in the same manner, which selector would be most appropriate?
Class selector
When the display property of an element is set to flex, what kind of container does it become?
Flex container
When troubleshooting cross-browser compatibility issues with CSS, which of the following browsers has historically been known to pose unique challenges
Internet Explorer
What is the main advantage of using a CSS framework like Bootstrap?
It provides pre-styled components and a grid system for rapid development
In an HTML document, how many elements can be styled with a unique ID selector?
Only one element
Observe the following snippet of CSS Code and select the correct answer
The CSS is modifying the second largest heading
When making an element invisible, which of the following rules still holds true
The element still takes up space on the page
Observe the following CSS snippet and select the right answer:
The rule is being applied to the 'header' class
Observe the following code. Suggest one reason as to why there are 3 different classes in the snippet.
They can each have an individual style applied to them
What is the general purpose of CSS selectors?
To apply any rule to a particular HTML element
What is the primary purpose of using vendor prefixes in CSS?
To enable styles for specific browsers or versions
Where in an html document is it generally recommended to place the <link> tag for an external stylesheet?
Within the <head> section
Which of the following best describes a navigation bar on a webpage, from a HTML point of view?
a list of links
Which of the following is NOT a valid value of the display property in CSS?
block-inline
Observe the following code below which creates a small section of text on the webpage. Select the code snippet below which contains an error resulting in none of the CSS being applied to the header section
div.area h1{ font-family Arial, Helvetica, sans-serif; }
Observe the following code below which creates a small section of text on the webpage. Which of the following code snippets ill apply some padding and a thicker border around the text content.
div.area {border:5px solid; padding: 10px }
Observe the following the HTML code below. Which is the correct way to apply a CSS rule to set the margins to automatic?
div.section1 {width: 100px;margin:auto;}
Which display value allows for the easy creation of multi-column layouts without using floats?
grid
Select the correct way to apply a background colour of blue to the heading.
h1 {background-color:rbg<0,),255);}
Which attribute is essential for specifying the path to an external CSS file?
href
Which property in CSS is specifically used to control the inheritance of styles?
inherit
Which property in the CSS box model defines the space around the element and outside of any defined borders?
margin
Which property can help in identifying elements that exceed their containing elements' width, potentially causing layout issues?
outline: 1px solid red;
Which property determines the visible area of a box if it has an overflow?
overflow
In the CSS box model, which property defines the space between the border and the actual content?
padding
Observe the following code below which contains a simple, small navigation bar with 2 links. From the choices below, select the correct CSS to remove the bullets.
ul { list-style-type:none;}
Observe the code example below which creates two unordered lists containing some basic text. From the options below, select the snippet which will apply the same rule to both lists equally.
ul {font-family:arial;}
A heading tag exists within the HTML with an id of 'main_heading'. What would be correct way to color it in blue with the CSS selector?
#main_heading { color:blue; }
