Sololearn CSS course CSS3 Basics answers

Here are all the questions and answers that I hope will help you learn CSS course.

Other course answers

Sololearn CSS course The Basics answers
Sololearn CSS course Working with Text answers
Sololearn CSS course Properties answers
Sololearn CSS course Positioning and Layout answers
Sololearn CSS course Gradients & Backgrounds answers
Sololearn CSS course Transitions & Transforms answers
Sololearn CSS course CSS Filters answers

44.1 Lesson

Introduction to CSS3

Question:

CSS3
Is it possible to have multiple backgrounds in CSS3?

Answer:

Yes

Question:

CSS3: New Features
CSS defines two types of gradients: linear and ...

Answer:

radial

Question:

CSS3: New Features
Which CSS3 feature allows animation from one CSS property value to another?

Answer:

Transitions

45.1 Lesson

Vendor Prefixes

Question:

CSS Vendor Prefixes
Fill in the blank to add the right prefix for Google Chrome.

Answer:

-webkit-border-radius: 15px;

Question:

Browser Prefixes
Drag and drop from the options below to support border-radius in Mozilla Firefox, as well as in Webkit-based browsers.

Answer:

<style>
  .test {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
  }
</style>

46.1 Lesson

Rounded Corners

Question:

The border-radius Property
Add the border-radius values to indicate 0 pixels to the top-left, 15 pixels to the bottom-left, 10 pixels to the bottom-right, 20 pixels to the top-right:

Answer:

<style>
  .test {
    border-radius: 0px 20px 10px 15px;
  }
</style>

Question:

Creating a Circle
To make a circle, the border radius should be ...

Answer:

equal to half of the height and the width

47.1 Lesson

box-shadow

Question:

The box-shadow Property
Add the box shadow property for a result of 10 pixels vertical offset, 20 pixels horizontal offset, and red for the color.

Answer:

box-shadow: 20px 10px red;

Question:

Blur and Spread
Which two choices indicate optional values for the box-shadow?

Answer:

Spread distance, Blur distance

Question:

Negative Values
Place the box-shadow property values in the correct order.

Answer:

Horizontal offset
Vertical offset
Blur
Spread
Color

48.1 Lesson

Box Shadow Techniques

Question:

Creating an Inner Shadow
Which keyword is used to create shadow within the element?

Answer:

inset

Question:

Layering Multiple Shadows
Multiple box shadows are separated by ...

Answer:

,

49.1 Lesson

Transparency Effect

Question:

Transparency Effect
Fill in the blanks to create a footer with an inset box-shadow and a 1 pixel border at the top.

Answer:

<style>
  #footer {
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
    height: 40px;
  }
</style>

50.1 Lesson

text-shadow

Question:

The text-shadow Property
Add a 25-pixel left and 15-pixel down blue text-shadow.

Answer:

<style>
  p {
    text-shadow: -25px 15px blue;
  }
</style>

Question:

Multiple Text Shadows
How many text-shadow properties can an element accept?

Answer:

Multiple

51.1 Lesson

Pseudo Classes

Question:

Working with Pseudo-Classes
Style the first child of the <p> element.

Answer:

<style>
  p:first-child {
    background-color: yellow;
  }
</style>

52.1 Lesson

Pseudo Elements

Question:

Working with Pseudo Elements
Which of the following is NOT a pseudo element in CSS?

Answer:

::heading

Question:

Working with Pseudo Elements
Add an image prior to the paragraph using a pseudo element.

Answer:

<style>
  p::before{
    content: url("img.jpg");
  }
</style>

53.1 Lesson

word-wrap

Question:

The word-wrap Property
Fill in the blanks to fit the text into the paragraph:

Answer:

<style>
  p {
    width: 300px;
    word-wrap: break-word;
  }
</style>

54.1 Lesson

@font-face

Question:

The @font-face Rule
Which two of the following font types are supported in Firefox, Safari, and Chrome?

Answer:

.ttf
.otf

Question:

Using the @font-face Rule
Define a new font named "test".

Answer:

<style>
  @font-face {
    font-family: "test";
    src: url("test.otf");
  }
</style>

55.1 Lesson

Module 5 Quiz

Question:

In the following code snippet, what value is given for the bottom-right corner? border-radius: 10px 20px 30px 40px;

Answer:

30

Question:

When defining a new font in CSS3, use…

Answer:

@font-face

Question:

Drag and drop from the options below to color the text in the paragraph with id "mytext" red. Also, add a black shadow to the text that is 5 pixels to the right and 3 pixels down.

Answer:

<style>
  #mytext {
    text-shadow: 5px 3px #000;
    color: red;
  }
</style>

Question:

Fill in the blanks so that the first line of the paragraph uses the newly defined font called "test".

Answer:

<style>
  @font-face {
    font-family: "test";
    src: url(test.ttf);
  }
  p::first-line {
    font-family: "test";
  }

</style>