Font size
WorksheetsWeb Development
Total questions: 29
Worksheet time: 16mins
Which word is best defined as "a language used to describe how HTML elements should be styled"?
HTML
CSS
Heading
Element
Which of these tasks are most appropriate for CSS?
Change the background color
Add an image
Add a link
Change the font size
Add text
Which are you more likely to find in a CSS file?
.clouds { height: 50px; }
body { background: mistyrose; }
Haikus
Given the following website, what would you add to the CSS file so the images of clouds and rainbows have a height of 50 px?
img.cloud, img.rainbow { height: 50px; }
img.cloud, img.rainbow { width: 50px; }
img.cloud, img.rainbow { size: 50px; }
img.cloud, img.rainbow { max-height: 50px; }
Given the following HTML code:
Which CSS code would set the height of the clouds and rainbow images to 50px?img-small { height: 50px; }
.weather { height: 50px; }
img { height: 50px; }
clouds { height: 50px; } rainbows { height: 50px; }
.clouds { height: 50px; } .rainbows { height: 50px; }
Given this webpage (showing 'My Pets' with 'Dog', 'Lula', and 'Slowpoke' listed), which of the following is the correct HTML?
Which of the following HTML code snippets is the most semantically correct way to structure the information about 'My Pets', 'Dog', 'Lula', and 'Slowpoke'?
My Pets
Dog
Lula
Slowpoke
My Pets Dog Lula Slowpoke
My Pets
Dog
Lula
Slowpoke
Which of the following HTML code snippets is correct or matches the required format?
Lula
Slowpoke
Debug the following image tag ![a rainbow](rainbow.jpg")
There should not be an alt attribute
img should be image
Add a starting quotation mark to the name of the rainbow.jpg file
Add a closing tag
Which of the following is an example of your digital footprint?
Your birthday
Your address
Your phone number
Your name
All of the above
Which of the following elements most likely increase a website's trustworthiness?
Posted anonymously
Images are high quality
When flex-wrap is set to wrap and flex-direction is column, how will flex items behave in a container that exceeds its height?
Items will wrap from top to bottom
Items will overflow the container without wrapping
Items will align vertically until reaching the container's maximum width
Items will wrap onto a new column beside the first
What Flex properties have been applied to create the layout pictured below?
flex-direction: row; justify-content: center; align-items: center;
flex-direction: column; justify-content: flex-start; align-items: stretch;
flex-direction: row; justify-content: space-between; align-items: flex-end;
flex-direction: column; justify-content: center; align-items: flex-start;
Which CSS properties would you use to center items vertically and distribute them evenly along the main axis in a flex container?
justify-content: space-between; and align-items: center;
justify-content: space-around; and align-items: flex-start;
align-items: space-evenly; and justify-content: center;
justify-content: center; and align-items: center;
In a flex container with align-items: flex-start, one child item has align-self: flex-end. What impact does align-self have on this item?
It has no effect since align-items is set to flex-start.
It overrides align-items, aligning the item at the end of the container.
It makes the item align in the center of the container.
It causes the item to grow to fill the container.
The purpose of copyright is:
to protect the rights of creators over their original works
to allow anyone to copy works freely
to prevent the creation of new works
to limit access to information
Copyright is intended to protect the rights of ________.
content creators
consumers
publishers
advertisers
What is one of the rights that copyright provides to content creators?
The right to ignore their work
The right to be recognized as the creator
The right to copy others' work
The right to hide their work
Where in the HTML document is the correct location to insert code to link to your external CSS?
In the <head> section
In the <body> section
At the very end of the document
At the very beginning of the document
</html>
Found after </h1>
Found after </style>
Found after </body>
Found at bottom of written code
The (a) section is not for the user to see.
Freya and Leo are helping Benjamin design a website for a local community center. What is the main purpose of web accessibility?
To make websites look more attractive
To ensure websites are usable by people with disabilities
To increase website loading speed
To improve website security
Priya and Oscar are working on a fun project to make their website accessible to everyone. Which of the following is a cool web accessibility feature they should include?
High-resolution images
Alt text for images
Flashy animations
Pop-up advertisements
Given the website image, what would you add to the CSS file so the images of clouds and rainbows have a height of 50 px?
</html>
Found after </h1>
Found after </style>
Found after </body>
Found at bottom of written code
The (a) section is not for the user to see.
WAI guidelines are used to identify the target of a link and not to use color alone to identify links
TRUE
FALSE
Given the website image, what would you add to the CSS file so the images of clouds and rainbows have a height of 50 px?
Where in the HTML document is the correct location to insert code to link to your external CSS?
In the <head> section
In the <body> section
At the very end of the document
At the very beginning of the document
