unit 2 css practice questions
How do you select an element with id 'demo'?
#demo
Which vendor prefix will you use for iOS?
-webkit-
Which of these is not an element selector?
.content
Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?
.header.clear {}
The parent container (assigned with the class "parent") of a floating element is showing as collapsed. Which fix will fail to address the problem?
.parent { height: auto; }
How do you select elements with class name 'test'?
.test
How do you insert a comment in a CSS file?
/* this is a comment */
What is the total width of a paragraph on your page if you apply the following rule? p { width: 150px; padding: 10px 15px; border: 1px solid blue; }
182 pixels
What is the font size of an element in pixels, given that this element's parent has a font size set to 32px and the element's font size is set to 0.5625em?
18px
If the browser's default font size is set to 12 pixels, what is the font size of an h1 header based on the following ruleset? h1 { font-size: 2em; }
24 pixels
You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?
800 x 400 pixels
What is the correct HTML for the following selector? article.col-1.col-end
<article class="col-1 col-end">...</article>
What is the correct HTML for referring to an external style sheet?
<link rel="stylesheet" type="text/css" href="mystyle.css">
How can you author the below rule as an inline style? <html><head> <style> p { color: blue; } </style> ...
<p style="color: blue;">...</p>
Are any of the following declarations invalid? color: red; /* declaration A */ font-size: 1em; /* declaration B */ padding: 10px 0; /* declaration C */
All declarations are valid.
A declaration is a single property-value pair within a declaration block, the group of styles between the curly brackets.
True
Floated elements are removed from a document's normal flow.
True
Is there any issue with the following CSS rules applied to a paragraph element? font-size: 16px; line-height: 0.5em
Yes, the lines of text may overlap in certain scenarios.
For the provided HTML, write a selector to choose E only. <div id="a">a <div lang="en-us">b <div title="c">c</div> <div data-test="d">d</div> </div> <div dir="ltr">e</div> <div style="color: purple;">f</div> </div>
[dir]
Write a CSS selector that will select all links that go offsite.
[href^="http"]
In a grid layout, what does a grid area refer to?
a space enclosed between four grid lines
How do you display hyperlinks without an underline?
a {text-decoration:none;}
Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?
a:link { background: #0000ff; } a:hover { background: rgba(0,0,255,0.5); }
You can use the _____ pseudo-class to set a different color on a link if it was clicked on.
a:visited
How do you make a list that lists its items with squares?
list-style-type: square;
Which property is used to change the left margin of an element?
margin-left
What is a browser's default layout method?
normal flow
Where will you have little expectation to see that the float property is used?
on sites where the grid property is used
IDs can be used _____ per page. Classes can be used _____ per page.
once; many times IDs may be used one time per page, while classes may be used many times per page.
What are the missing values you need to have in a box model fix? html { box-sizing: ???; } *, *:before, *:after { box-sizing: ???; }
order-box; inherit
What is the correct CSS syntax for making all the <p> elements bold?
p {font-weight:bold;}
How can you simplify the following set of CSS rules? Pay close attention to the usage of spaces in the answer options p { color: red; } .callout { color: red;}
p, .callout { color: red; }
Which rule is equivalent to the rule below? padding: 5px 10px 10px 10px;
padding: 5px 10px 10px;
Which position option would you use to place an element in a specific location regardless of screen size or scrolling?
position: fixed;
Which two terms can be used interchangeably in CSS?
property-value pair declaration A property-value pair and declaration are interchangeable terms.
While an absolute element is positioned _____, a fixed element is positioned _____.
relative to its closest positioned ancestor; relative to the viewport
In the following CSS code, 'h1' is the _____, while 'color' is the _____. h1 { color: red; }
selector; property
What does this selector select? #warning, .danger, article
selects any element with an id attribute of warning, or any element with a class of danger, or any article element Comma-separated selectors are evaluated individually as "or" selectors. This selector elects any element with an "id" attribute of "warning", or any element with a class of "danger", or any "article" element.
Generally speaking, _____ typefaces are used for formal content, decorative details, and code sections, respectively.
serif, script, and monospace
What is the default value of the position property?
static
Which HTML attribute is used to define inline styles?
style
How do you make each word in a text start with a capital letter?
text-transform:capitalize
Borders affect the overall size of an element.
true
Flexbox is a one dimensional, flexible box model that lets you distribute content evenly and flexibly to fill the available space.
true
In Chrome's Developer Tools view, where are the default styles listed?
under the User Agent Stylesheet section on the right
When would you put adjacent text elements in two containers and float them both?
when you want to show the elements in two separate columns
Which CSS keyword can you use to override standard source order and specificity rules?
!important
A universal selector is specified using a(n) _____.
"*" character
A 3D transformation matrix has _____ cells.
16 A 3D transformation matrix has 4 rows and 4 columns.
What does CSS stand for?
Cascading Style Sheets
What does this matrix function do: matrix(-1, 0, 0, 1, 0, 1)
Flips the object horizontally.
Where in an HTML document is the correct place to refer to an external style sheet?
In the <head> section
What is one disadvantage of using a web font service?
It is not always a free service.
What does this transformation style do: transform: rotateY(180deg) translateZ(100px);
Moves the object 100 pixels away from the user along the z-axis. Correct When the object is rotated 180 degrees around the y-axis, positive z-values point away from the user.
What does this transformation style do: transform: rotateX(90deg) translateZ(100px);
Moves the object 100 pixels upwards along the y-axis.
What does this matrix function do: matrix(-1, 0, 0, 1, 30, 40)
Moves the object to the right 30 pixels and down 40 pixels. The last two entries in the matrix() function specify the horizontal and vertical translation
Which format is valid to use for defining a color value?
RBG,HSL,Hex
What does this transformation do: transform: rotate(45deg) translateY(-30px);
Rotates the object 45 degrees clockwise and then moves it up 30 pixels. A positive angle rotates the object clockwise and a negative value moves the object up.
Multiple transformations are applied in the order in which they are listed.
True
To creating a card that can be flipped, the front face and backface should occupy the same position within a container.
True
To rotate an object around the top border of the 3D space, what should you do?
Use the rotateX() function with transform-origin set to top.
Which selector will select only Patty? <ul> <li><a href="" title="friend met">Peter</a></li> <li><a href="" title="friend">Patty</a></li> <li><a href="" title="met contact frilly">Priscilla</a></li> </ul>
[title="friend"] The exact attribute selector looks for an exact match. Therefore "[title="friend"]" matches only Patty, since that is the full value of the title attribute. Peter is not a match since his title attribute has more than "friend" as a value.
What is a CSS Reset?
a set of CSS rules that resets the default browser styling to a consistent baseline
What should you use to present the backface of an object from being displayed?
backface-visibility: hidden; Setting the backface-visibility property to "hidden", hides the backface.
Small perspective values cause the 3D space to _____.
be greatly foreshortened Small perspective values reduce the space between the xy plane and the user's eye.
Which type of selector is used in the following rule? .container { font-size: 14px; }
class selector
Which CSS property is used to change the text color of an element?
color
Transitions timings can be modeled by a _____ curve.
cubic-bezier
How do you select all p elements inside a div element?
div p
The style rules to apply a 2 second transition when entering a hover event and a 4-second transition away from a hover event are _____.
div {transition: all 4s;} div:hover {transition: all 2s;}
Where are the rescaling factors for an object found?
in the main diagonal of the 3D matrix
Which of the following will NOT trigger a transition?
loading a web page Loading a web page is not a transition event.
Which of these represents the space between elements?
margin
To combine several matrix transformations, you _____.
multiply them Matrix transformations are combined through multiplication
When using the padding property; are you allowed to use negative values?
no
Which setting defines a pure blue color at full brightness and half opacity?
rgba(0, 0, 255, 0.5);
To double the width of an object and cut its height in half, apply the function: _____.
scale(2, 0.5) The scale factor for the horizontal direction is listed before the factor for the vertical direction.
Positive values along the z-axis move the object _____.
towards the user's eye The z-axis is aligned towards the user (positive values) or away from the user (negative value.)
How would you pass the properties of the 3D space onto a child element?
transform-style: preserve-3D; The preserve-3D keyword preserves the 3D space for child elements.
To rotate an object 90 degrees around the bottom-left corner, apply the style rule(s): _____.
transform: rotate(90deg); transform-origin: bottom left; Use the transform-origin property to set the location of any transformation.
To change the background color over a 2-second interval after a 4-second delay, apply this style:
transition: background-color 2s 4s; Always place the delay time after the transition time.
To change the background color over a 5-second interval, apply this style:
transition: background-color 5s; This style changes the background color over a 5-second interval.
How can you move an object to a point that is 30 pixels to the left, 20 pixels down, and 10 pixels forward from the origin?
translate3D(-30px, 20px, 10px); The translate3D() function can move an object to any point in 3D space
How can you translate an object 30 pixels up and rotate is around the y-axis by 45 degree counter-clockwise?
translateY(-30px) rotateY(-45deg) To move an object up, use a negative translateY() value. To rotate an object counterclockwise, use a negative angle.
If multiple CSS rules apply to the same element, what will determine which rule wins?
The most specific rule wins.
What is the recommended name you should give the folder that holds your project's images?
images
In terms of specificity, which one of these carries the most weight?
inline styles
Which HTML tag is used to define an internal style sheet?
<style>
Your CSS is located in the 'css' folder under the root folder. Which is the correct code to add the font file 'my font.woff' located in the 'fonts' folder under the root folder?
@font-face { font-family: "my font"; src: url("../fonts/my font.woff"); }
Which approach offers the first true two-dimensional page layout option?
CSS Grid
Which of these statements is true?
CSS is a stylesheet language used to identify elements in a document and specify what style should be applied.
When referring to simple selectors in CSS, the ID selector starts with _____, the class selector with _____ , and the element selector with _____.
ID: #;Class: .;Element: nothing, just the tag name ID selectors start with #, classes with a period, and HTML elements with the tag name.
What is an advantage of using inline CSS?
It can be used to quickly test local CSS overrides.
You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified?
It should be the last one on the list.
Given the following rule, which statement is true regarding the header element? #header { width: 200px; box-sizing: border-box; }
Its total width will be at most 200 pixels.
Which W3C status code represents a CSS specification that is fully implemented by modern browsers?
Recommendation
Describe what this selector selects: .primary-color a, a:hover
Selects any a element that is a descendant of any element with a class of primary-color, or any a element which is in a hover state. Comma-separated selectors are evaluated individually as "or" selectors. Remember to read selectors from the right, but write them from the left.
How do you group selectors?
Separate each selector with a comma
All browsers have a default style sheet that apply basic styles to HTML markup.
TRUE
Which statement is true when you define the following rule for an image on the page? img { float: right; }
The image will be removed from the normal document flow.
Which selector will select only Peter? <ul> <li><a href="" title="friend met">Peter</a></li> <li><a href="" title="friend">Patty</a></li> <li><a href="" title="met contact frilly">Priscilla</a></li> </ul>
[title$="met"] The ending substring selector selects the string "met" at the end of the "title" attribute. In this case, only Peter is a match.
Which selector will select only Priscilla? <ul> <li><a href="" title="friend met">Peter</a></li> <li><a href="" title="friend">Patty</a></li> <li><a href="" title="met contact frilly">Priscilla</a></li> </ul>
[title^="met"] The beginning substring selector selects the string "met" at the beginning of the "title" attribute. In this case, only Priscilla is a match.
Which selector will select Patty and Peter? <ul> <li><a href="" title="friend met">Peter</a></li> <li><a href="" title="friend">Patty</a></li> <li><a href="" title="met contact frilly">Priscilla</a></li> </ul>
[title~="friend"]
Which property is used to change the background color?
background-color
Which color will look the brightest on your screen, assuming the background is white?
background-color: rgba(170,170,170,0.2);
The body of your page includes some HTML sections. How will it look with the following CSS applied? body { background: #ffffff; /* white */ } section { background: 0000ff; /*blue*/ height: 200px; }
blue sections on a white background
Which set of CSS rules implements the following? All text on the page should be blue except the text in any paragraph under the header class, which should be red.
body { color: blue; } .header p { color: red; }
Which is the correct CSS syntax?
body {color: black;}
How do you display a border like this: The top border = 10 pixelsThe bottom border = 5 pixelsThe left border = 20 pixelsThe right border = 1pixel?
border-width:10px 1px 5px 20px;
How do you add Google fonts to your project?
by using an HTML link element referring to a Google-provided CSS
Use the CSS _____ property on an element to prevent other elements from floating beside it.
clear
Which CSS property is used to specify text color?
color
While HTML controls document structure, CSS controls _____.
content appearance
Which CSS rule takes precedence over the others listed?
div#sidebar2 p {}
When using a flexbox layout, which rule sets the flow of the main axis to horizontal?
flex-direction: row;
Which property is used to change the font of an element?
font-family
Which CSS property controls the text size?
font-size
Which CSS rules will you use to show a bold version of a specific font?
font-weight and font-face
What is an alternate way to define the following CSS rule? font-weight: bold;
font-weight: 700;
How do you make the text bold?
font-weight:bold;
Which shorthand font specification is invalid?
font: oblique 24px bold "my font", sans-serif;
You want to reduce an excessive vertical gap between an h1 element and the text below it. Of the different settings you can tweak, which one has no impact?
h1 text align
How do you add a background color for all <h1> elements?
h1 {background-color:#FFFFFF;}
Which rule sets a margin of 5px above and 0px for all other sides of all h1 and h2 headers?
h1, h2 { margin: 5px 0 0; }
