CSS QUIZ
Which CSS keyword can you use to override standard source order and specificity rules?
!important
A universal selector is specified using a(n) _____.
"*" character
Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?
.header.clear {}
Which width specification is relative?
10vw
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"); }
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.
What is the benefit of troubleshooting grid issues in Firefox compared to other browsers?
Firefox has a dedicated grid visualization tool.
What is an advantage of using inline CSS?
It can be used to quickly test local CSS overrides.
What is one disadvantage of using a web font service?
It is not always a free service.
What is the outcome of setting a grid container as an inline-grid?
It will display inline next to other inline elements.
For your site to work on two screen sizes, you create a base CSS for larger screens. For screens of 800px or less, you enclose another CSS section inside the media query below. Will this query work, and if not how would you fix it?
No, change to @media (max-width: 800px) {}.
Which statement is true regarding flexboxes?
They are used for space distribution across a single axis.
What is a CSS reset?
a set of CSS rules that resets all styles to a clean and consistent baseline
Which color will look the brightest on your screen, assuming the background is white?
background-color: rgba(170,170,170,0.2);
Use the CSS _____ property on an element to prevent other elements from floating beside it.
clear
While HTML controls document structure, CSS controls _____.
content appearance
Remembering the CSS selector rules can be concatenated, which CSS rule can you apply to the HTML below so that only the "color me!" text is colored? <div> <section><div>leave alone</div></section> <section><div>color me!</div></section> </div>
div > section + section { color: blue; }
Which properties are included in the box model?
height, padding, and border
What is the recommended name you should give the folder that holds your project's images?
images
Where will you have little expectation to see that the float property is used?
on sites where the grid property is used
In the following CSS code, 'h1' is the _____, while 'color' is the _____. h1 { color: red; }
selector; property
Generally speaking, _____ typefaces are used for formal content, decorative details, and code sections, respectively.
serif, script, and monospace
In Chrome's Developer Tools view, where are the default styles listed?
under the User Agent Stylesheet section on the right
When will you want to use an explicit grid and an implicit grid together?
when you know the minimum number of grid items, but not the maximum
What is responsive web design?
the thought process behind using CSS to optimize site viewing experiences on any device
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; }
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
A flex container is set with a width of 200px and flex-wrap: wrap;. It has 3 flex items set with flex: 1 0 100px;. What is the effective width of the third flex item?
200px
What is the vertical size of a div element styled with the CSS below, assuming that this div resides within a container whose height is 1000px? div { height: 15%; width: 80%; border: 10px dotted red; padding: 10px 30px 20px; margin: 50px 20px; }
200px
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
You need to add responsive CSS to your project. What is considered a bad practice in doing so?
Enclose all responsive CSS inside a @media query, placed at the top of your master CSS.
How does the display: inline-flex option differ from display: flex?
It sets the flex container width to be like its content.
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.
Which W3C status code represents a CSS specification that is fully implemented by modern browsers?
Recommendation
You change a certain CSS rule in your browser's Developer Tools view. When is this change reflected inside the browser?
The change is seen immediately.
What behavior does this CSS cause? max-width: 400px; width: 50%;
The content width will be 400px, or lower if the window width decreases below 800px.
What does the following grid template define, if the grid container is set with a 700px width? grid-template-columns: repeat(2, 2fr) 100px repeat(2, 1fr);
The first two columns will each be 200px wide, and the last three columns will be 100px.
You have two consecutive span elements on your page, and you see a small gap between them. Is it possible to eliminate this gap?
The gap can be eliminated by changing the font size of the container element to zero.
What is one concern with using the CSS below on an image that is supposed to fill a container? background-size: cover;
The image may be clipped.
Your page has two consecutive div elements styled per the CSS below. Which statement is true? div { display: inline-block; height: 80px; }
The second div will show to the right of the first div.
Your flexbox container is set with the justify-content: space-between; property. Should you be concerned about increasing the padding of the flex items?
Yes, large padding values will cause the items to overflow the container.
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.
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
You want to add an image as the background to your responsive design. The important part of the image is its top-right corner. Which CSS rule should you add?
background-position: top right;
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
What are the missing values you need to have in a box model fix? html { box-sizing: ???; } *, *:before, *:after { box-sizing: ???; }
border-box; inherit
How do you add Google fonts to your project?
by using an HTML link element referring to a Google-provided CSS
What gets reversed when using the flex-wrap: wrap-reverse option?
cross start and cross end
Which CSS rule takes precedence over the others listed?
div#sidebar2 p {}
You want your flex items to have a maximum width of 300px. Which flex rule will set this?
flex: 0 1 300px;
What is an alternate way to define the following CSS rule? font-weight: bold;
font-weight: 400;
Which shorthand font specification is invalid?
font: oblique 24px bold "my font", sans-serif;
Which CSS rule will you use to place a grid item into the grid so that it starts from the second column and second row, and spans three columns and two rows?
grid-column: 2/5; grid-row: 2/4;
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
What is considered an advanced selector?
h1 ~ p {}
Which flexbox alignment option distributes the items evenly across the main axis, with the first item at the start of the axis and the last item at the end?
justify-content: space-between;
What is a valid usage of the 'auto' value in a CSS rule?
margin: 0 auto;
While an absolute element is positioned _____, a fixed element is positioned _____.
relative to its closest positioned ancestor; relative to the viewport
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
