wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

100Devs - LwL - Class03 - CSS Basics

Total questions: 49

Worksheet time: 25mins

Name
Class
Date
1.
Where should the CSS be written?
a)
in a separate file
b)
inline
c)
in the head
d)
all are correct
2.
Why should it be on a separate file?
a)
Separation of concern, better organization
b)
It should be inline
c)
Because it makes the page load faster
d)
Because it helps with critical path CSS
3.
When CSS MUST be used inline, when would it be ok?
a)
when its impossible to access an external stylesheet
b)
It should never be
c)
it should always be in the head
d)
all are correct
4.

Where could inline CSS be used?

a)

On emails

b)

it should never be

c)

only if it important

d)

In desperation mode due to deadlines

5.
What is critical path css?
a)
Is using a little bit of css on the header and initial content, so the above the fold content renders faster
b)
It is using CSS on a separate file
c)
It is a set o declarations
d)
It is declaring the css in the <head>
6.

css link tag syntax

a)

<link rel=”stylesheet” href=”css/style.css”>

b)

<a rel="stylesheet" href="css/style.css">

c)

<link rel="stylesheet" src="css/style.css">

d)

All should work

7.

What is this: p { color: red; }

a)

A CSS rule

b)

A selector

c)

A property

d)

A declaration block

8.
What is the css selector here: p { color: red; }
a)
p
b)
color
c)
red
d)
an id
9.

What is the css property here: p { color: red; }

a)

color

b)

p

c)

red

d)

a class

10.
What is the css value here: p { color: red; }
a)
red
b)
p
c)
color
d)
an id
11.
What is the css declaration block here: p { color: red; }
a)
{ color: red; }
b)
color: red;
c)
p { color: red;}
d)
p
12.
What is the css declaration here: p { color: red; }
a)
color: red
b)
{ color: red; }
c)
color
d)
red
13.
What p { color: red; } will do to a page?
a)
It will make all paragraphs on the page turn into (text) red
b)
it will make the background on <p>s turn red
c)
it will make letters p turn red
d)
it will make the html turn red
14.
How to separate properties from values in CSS, and close the declaration
a)
: and ;
b)
"= and ;"
c)
{ and }
d)
": and ,"
15.
What is the cascade?
a)
It means that a rule that comes below another on the CSS file will override the one above
b)
It is using CSS on a separate file
c)
It is styling the css inline on the tags
d)
It is using css to render above the fold faster
16.

This is the CSS:

p{

color: red;

font-weight: bold;

}


p{

color: blue;

}


What is the color and weight of the <p>s?

a)

blue and bold

b)

red and bold

c)

just blue

d)

just bold

17.
Four major color: values?
a)
colorName, HEX, RGBa and HSLa
b)
colorName, HEX, RGB and HSL
c)
colorName, rgb and HEX
d)
RGBa, HSLa and HEX
18.
rgb(255,255,255) is...
a)
white
b)
black
c)
I guess I'll have to try it :)
d)
it varies from reg to green to blue
19.
What is the alpha channel?
a)
It gives tranparency to a color
b)
I makes that color dominant on the element
c)
both are correct
20.
Alpha channel max and min values?
a)
1 and 0
b)
255 and 0
c)
100 and 0
d)
10 and 0
21.
Alpha channel 0 will render the color...?
a)
invisible
b)
fully visible
c)
fully solid
d)
completely black
22.
What is font-family?
a)
It is the typeface that will be displayed
b)
it is the font-style
c)
it allows the font to be underline
d)
It is what google fonts is for
23.
Where can we find new, web ready fonts?
a)
fonts.google.com
b)
mdn
c)
w3schools
d)
the font must be added as a separate file to be downloaded by the client-side device
24.
Where does the google font link tag goes?
a)
in the <head> above the css link tag
b)
In the <header> above the css link tag
c)
in the CSS file
d)
in the <head> below the css link tag
25.
How to use a font from google in your project?
a)
It must be called in a declaration block as font-family
b)
Once added to the HTML it is ready to go
c)
It should be called on the top of the CSS
d)
It must be called inline on the element
26.
Why are there many different fonts as the font-family value?
a)
They are fallbacks. If the called font doesnt work, it will load the next, and on
b)
Because we will want to be able to choose different fonts on the same element
c)
because it makes the page load faster
27.
What does font-weight do?
a)
It makes the font bold, bolder, lighter and more
b)
It makes the text be atached to the bottom of anelement
c)
It makes the font be underline and overline
d)
It allows us to make the font italic, bold or underline
28.
What should be considered when adding multiple font-weights?
a)
You must pick the font-weight that will be used at fonts.google, and mind that too many will make the site load slower
b)
The load time on the page
c)
The aestetics these font are able to produce
d)
The higher the font-weight, the higher will be the load time on the page
29.
How to make a text be underline?
a)
text-decoration: underline;
b)
font-style: underline;
c)
text-weight: underline;
d)
text-decoration = underline;
30.
How to remove any text decoration?
a)
text-decoration: none;
b)
font-style: none;
c)
text-decoration: ;
d)
text-decoration: zero;
31.
border shorthand three properties?
a)
border: width style color;
b)
border: 10 solid black;
c)
border-width: 1px; border-style: solid; border color:black;
d)
border: weight, solidity, rgb;
32.
What is a direct descendant kind of selector?
a)
It selects an element that is an immediate child of a parent element.
b)
It selects any element inside another element
c)
both are correct
33.
Which of these is a direct descendant kind of selector?
a)
section > p
b)
section p
c)
section p+p
d)
section+p
34.

<section>

<p>Hello, Twitch!</p>

</section>


How to select the <p> by direct descendant relationship?

a)

section > p

b)

section

c)

p

d)

section p

35.

What is selection by relationship?

a)

It selects an element that exists inside another element.

b)

It selects an element that is an immediate child of a parent element.

c)

Both are correct

36.
What is the difference between "section > p" and "section p"
a)
In the first: the selected p must be a direct child of the section. On the second case any p inside the section will be selected
b)
In the first: any p inside the section will be selected. In the second the p must be a direct child of the section
c)
Both are correct
37.
What is the sibling relationship?
a)
You must have at least 2 elements inside a parent element, and the second sibling element is targeted
b)
You must have at least 2 elements inside a parent element, and the first sibling element is targeted
c)
You must have at least 2 elements inside a parent element, and the parent element is targeted
d)
Two are correct
38.

<section>

<p>Hello, Twitch!</p>

<p>Hello, Youtube!</p>

</section>


and


p + p {

color: red;

}


What gets red?

a)

The second <p> tag

b)

The first <p> tag

c)

The <section>

d)

It wont work because there are two <p>s

39.
How are IDs used in CSS?
a)
IDs are used for selecting only one single unique distinct element
b)
IDs are use for selecting multiple elements
c)
They are only used in JavaScript
d)
They are used in critical path CSS
40.
What are classes in CSS?
a)
Classes can be used for selecting multiple elements
b)
Classes can be used for selecting a single element
c)
Classes are used in critical path CSS
41.
How many classes can an element have?
a)
As many as necessary
b)
One per element
c)
Only one per <section>
d)
All are correct
42.
Order of specificity?
a)
!important > id > class > tags
b)
id > class > tags
c)
class > tags > ids
d)
!important > class > id > tag
43.
Why is selector specifity important?
a)
Because it will override the cascade. Declarations with higher specificity will be rendered likewise.
b)
Because classes are more important than ids
c)
Because it overrides the specificity
d)
All are correct
44.

In this example, what is the CSS rule:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

section > div {

border: 1px solid black;

margin: 2em;

}

b)

section > div

c)

{

border: 1px solid black;

margin: 2em;

}

45.

In this example, what is the CSS selector:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

section > div

b)

section > div {

border: 1px solid black;

margin: 2em;

}

c)

{

border: 1px solid black;

margin: 2em;

}

46.

In this example, what is the CSS declaration block:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

{

border: 1px solid black;

margin: 2em;

}

b)

border: 1px solid black; and margin: 2em;

c)

section > div {

border: 1px solid black;

margin: 2em;

}

d)

border and margin

47.

In this example, what is the CSS declaration:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

border: 1px solid black; and margin: 2em;

b)

border and margin

c)

1px solid black and 2em

d)

section > div {

border: 1px solid black;

margin: 2em;

}

48.

In this example, what is the CSS property:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

border and margin

b)

border: 1px solid black; and margin: 2em;

c)

section > div {

border: 1px solid black;

margin: 2em;

}

d)

1px solid black and 2em

49.

In this example, what is the CSS value:

section > div {

border: 1px solid black;

margin: 2em;

}

a)

1px solid black and 2em

b)

border: 1px solid black; and margin: 2em;

c)

{

border: 1px solid black;

margin: 2em;

}

d)

section > div

Similar Resources on Wayground

TEST EXCEL

50 questions

TEST EXCEL

quiz

Worksheet

•

9th - 12th Grade

LATIHAN PAT INFORMATIKA KELAS X

50 questions

LATIHAN PAT INFORMATIKA KELAS X

quiz

Worksheet

•

9th - 12th Grade

HAM_SUM_MAX_MIN_AVG_OR_AND_DIACHITUONGDOI_TUYETDOI_ABS_UPPER_LOW

50 questions

HAM_SUM_MAX_MIN_AVG_OR_AND_DIACHITUONGDOI_TUYETDOI_ABS_UPPER_LOW

quiz

Worksheet

•

11th Grade

VỢ CHỒNG A PHỦ

54 questions

VỢ CHỒNG A PHỦ

quiz

Worksheet

•

12th Grade - University

US INFORMATIKA SEMUA JURUSAN 2025

50 questions

US INFORMATIKA SEMUA JURUSAN 2025

quiz

Worksheet

•

12th Grade

Pemrograman Dasar

50 questions

Pemrograman Dasar

quiz

Worksheet

•

10th - 12th Grade

ôn tập 12k1

44 questions

ôn tập 12k1

quiz

Worksheet

•

12th Grade

Tin 10_cấu trúc rẽ nhánh IF

48 questions

Tin 10_cấu trúc rẽ nhánh IF

quiz

Worksheet

•

10th Grade