Linkedin Cascading Style Sheets (CSS) Assessment Test

In the shorthand example below, which individual background properties are represented?
background: blue url(image.jpg) no-repeat scroll 0px 0px;

background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-position: 0px 0px;

background-color: blue;
background-img: url(image.jpg);
background-position: no-repeat;
background-scroll: scroll;
background-size: 0px 0px;

background-color: blue;
background-src: url(image.jpg);
background-repeat: no-repeat;
background-wrap: scroll;
background-position: 0px 0px;

background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;

The flex-direction property is used to specify the direction that flex items are are displayed. What are the flex values used to specify the direction of the items in the following examples?

Example 1: flex-direction: row-reverse;
Example 2: flex-direction: row;
Example 3: flex-direction: column-reverse;
Example 4: flex-direction: column;

Example 1: flex-direction: column;
Example 2: flex-direction: column-reverse;
Example 3: flex-direction: row;
Example 4: flex-direction: row-reverse;

Example 1: flex-direction: row;
Example 2: flex-direction: reverse-row;
Example 3: flex-direction: column;
Example 4: flex-direction: reverse-column;

Example 1: flex-direction: row;
Example 2: flex-direction: row-reverse;
Example 3: flex-direction: column;
Example 4: flex-direction: column-reverse;

Review the HTML snippet below. What would be the most efficient way of using attribute selectors to select only the internal links?
<a href="#example1">Internal link</a>
<a href="#example2">Internal link</a>
<a href="#example3">Internal link</a>
<a href="https://example.com">example.com</a>

a[href^="#"] {...}

a[href="#"] {...}

a[href="#example1"],
a[href="#example2"],
a[href="#example3"]{...}

a[href*="example"] {...}

Using the following HTML and CSS example, what will the equivalent pixel value be for the .em and .rem elements?
html {font-size: 10px;}
body {font-size: 2rem;}
.rem {font-size: 1.5rem;}
.em {font-size: 2em;}

<body>
<p class="rem"></p>
<p class="em"></p>
</body>

The .rem value will be equivalent to 25px; the .em value will be 20px.
The .rem value will be equivalent to 15px; the .em value will be 40px.
The .rem value will be equivalent to 20px; the .em value will be 40px.
The .rem value will be equivalent to 15px; the .em value will be 20px.

There are currently four viewport-percentage lengths that can be used to define the value relative to the viewport size: vw, vh, vmin and vmax. If the current viewport size has a width of 800px and a height of 600px, what will the following values be equivalent to in pixels?
10vw = ?px
10vh = ?px
10vmin = ?px
10vmax = ?px

10vw = 8px
10vh = 6px
10vmin = 6px
10vmax = 8px

10vw = 60px
10vh = 80px
10vmin = 80px
10vmax = 60px

10vw = 6px
10vh = 8px
10vmin = 8px
10vmax = 6px

10vw = 80px
10vh = 60px
10vmin = 60px
10vmax = 80px

What element(s) do the following selectors match to?
1) .nav {...}
2) nav {...}
3) #nav {...}

1) An element with a class of "nav"
2) A nav element
3) An element with an id of "nav"

1) An element with an ID of "nav"
2) A nav element
3) An element with a class of "nav"

1) A div with a class of "nav"
2) A nav element
3) A div with an id of "nav"

They all target the same nav element.

CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?
.grid {
display: grid;
width: 500px;
grid-template-columns: 50px 1fr 2fr;
}

The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.
The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.
The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.

Using an attribute selector, how would you select an <a> element with a "title" attribute?

a.title {…}
a[title] {…}
a > title {…}
a=title {…}

Looking at the following HTML and CSS example, what color will Paragraph 1 be?
p:first-of-type { color: red; }
p { color: blue; }
.container { color: yellow; }
p:first-child { color: green; }

<div class="container">
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>

red
yellow
green
blue

In the following example, according to cascading and specificity rules, what color will the link be?
.example {color: yellow;}
ul li a {color: blue;}
ul a {color: green;}
a {color: red;}

<ul>
<li><a href="#" class="example">link</a></li>
<li>list item</li>
<li>list item</li>
</ul>

green
red
blue
yellow

In the following example, what color will paragraph one and paragraph two be?
<section>
<p>paragraph one</p>
</section>
<p>paragraph two</p>
section p {
color: red;
}
section + p {
color: blue;
}

Paragraph one will be blue, paragraph two will be red.
Both paragraphs will be red.
Both paragraphs will be blue.
Paragraph one will be red, paragraph two will be blue.

Based on the following CSS example, how will the elements be displayed?
.container {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-gap: 10px 20px;
/* OR */
gap: 10px 20px;
}

The child elements will be displayed in three columns widths, equal to defined grid-template-columns values. If the container is wide enough to fit more columns in the same row, then the pattern will repeat for each additional child element, until the columns wrap into a new row. There will also be a 10px gap/gutter between the columns and a 20px gap/gutter between the rows.
All child elements will be displayed in three columns, equal to the defined grid-template-columns values. There is also a 20px gap/gutter between the columns and a 10px gap/gutter between the rows.
The first three child elements will be displayed in three columns, equal to the defined grid-template-columns values. There will also be a 20px gap/gutter between the columns and a 10px gap/gutter between the rows.
All child elements will be displayed in three columns, equal to the defined grid-template-columns values. There will also be a 10px gap/gutter between the columns and a 20px gap/gutter between the rows.

You want to add a background circle behind a hosted icon, such as Google, Bootstrap, or Font Awesome, which of the following style declarations is correct?

.glyphicon-bgcircle {
radius-rounded: 50%;
margins: auto;
background-color: #fdadc6;
color: rgba(255,255,255,1.00);
font-size: 24px;
}

glyphicon-bgcircle {
border-circle: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255,255,255,1.00);
font-size: 24px;
}

.glyphicon-bgcircle {
circle-radius: 50%;
margins: 50px;
background-color: #fdadc6;
color: rgba(255,255,255,1.00);
font-size: 24px;
}

.glyphicon-bgcircle {
border-radius: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255,255,255,1.00);
font-size: 24px;
}

In the following HTML and CSS example, what color will the paragraphs be and why?
article p { color: blue; }
article > p { color: green; }

<article>
<p>Paragraph 1</p>

<aside>
<p>Paragraph 2</p>
</aside>
</article>

Both paragraphs will be green. article p uses a descendant combinator and will match to any p element contained within an article element. article > p uses a child combinator, which also matches to the descendant elements but has a higher specificity, therefore overriding the blue style.

Both paragraphs will be blue. article p uses a descendant combinator and will match to any p element contained within an article element, therefore overriding article > p which matches only to the direct descendant elements.

Paragraph 1 will be blue. Paragraph 2 will be green. article p uses a child combinator and will match to any p element contained within an article element. article > p uses a descendant combinator and will be applied only to the direct p descendant of the parent article element.

Paragraph 1 will be green. Paragraph 2 will be blue. article p uses a descendant combinator and will match to any p element contained within an article element. article > p uses a child combinator and will be applied only to the direct p descendant of the parent article element.

Which of the following is true of the SVG image format?

SVGs can be created as a vector graphic or coded using SVG specific elements such as <svg>, <line>, and <ellipse>.
SVGs work best for creating 3D graphics.
CSS can be applied to SVGs but JavaScript cannot be.
SVGs are a HAML-based markup language for creating vector graphics.

What is the line-height property primarily used for?

to control the height of the space between heading elements
to control the width of the space between characters
to control the height of the space between two lines of content
to control the height of the character size

Three of these choices are true about class selectors. Which is NOT true?

The same class can be used multiple times per page.
Multiple classes can be used within the same element.
Class selectors begin with a leading period.
Classes can be used multiple times per page but not within the same element.

Linkedin Cascading Style Sheets (CSS) Assessment Test 2020