HansR on the Web - All quiz questions on CSS
Updated: 14-03-2018 23:42:08h
topics: css|less, level: 100
What is Less?
Please select exactly one correct alternative.

Answer

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Reading

Less
topics: css|sass, level: 100
What is Sass?
Please select exactly one correct alternative.

Answer

Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files. Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
topics: css, level: 100
Where do you put the link to your external style sheet in your HTML web page?
Please select exactly one correct alternative.

Answer

You put your link in the <head> section.

Reading

No resources given.
topics: css, level: 100
If you do not define a background color (using the
background-color
property), what will be used as default by your browser?
Please select exactly one correct alternative.

Answer

When no background color is defined, your background will default be transparent.

Reading

No resources given.
topics: css, level: 100
Which of the alternatives is the proper way to to change the background color?
Please select exactly one correct alternative.

Answer

The correct property used is background-color. color Changes the text color and bgcolor is not a valid property.

Reading

No resources given.
topics: css, level: 100
What is the correct way to to put a comment in your external style sheet?
Please select exactly one correct alternative.

Answer

Comments in external and internal style definitions must begin with /* and end with */.

Reading

No resources given.
topics: css, level: 100
Which of the alternative code fragments in your external CSS sheet is the correct syntax?
Please select exactly one correct alternative.

Answer

body { color: green; } is written in the correct syntax.

Reading

No resources given.
topics: css, level: 100
Some CSS properties are animatable. What does that mean?
Please select exactly one or more correct alternatives.

Answer

CSS properties that are animatable can be used in animations and transitions. These properties can change gradually from one value to another value, for example numbers, percentages, sizes and colors.

Reading

No resources given.
topics: css, level: 100
Will the "My title" header be printed in italics?
Suppose you have the following HTML web page implemented:
<!DOCTYPE html>
<html>
   <head>
      <style>
         h1.makemered {
            color:rgb(255,0,0);
            font-style: italic;
         }
      </style>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <h1 class="makemered" style="color:rgb(0,0,255)">My title</h1>
   </body>
</html>
   
And you have the following external CSS stylesheet (style.css) implemented:
h1.makemered {
   color:rgb(0,255,0);
}
Will the "My title" header be printed in italics?
Please select exactly one correct alternative.

Answer

The priority order is, generally speaking, from low to high:
  1. External style sheet
  2. Internal style sheet (in the head section)
  3. Inline style (inside an HTML element)
Only the color will be overridden by the external style sheet, so the italics style will still be used. The header will be printed green and in italics.

Reading

No resources given.
topics: css, level: 100
What HTML attribute is used to define an inline style?
Please select exactly one correct alternative.

Answer

Inline styles are defined within style tags.

Reading

No resources given.
topics: css, level: 100
What is the priority order from low to high in which the styles are applied?
Please select exactly one correct alternative.

Answer

The priority order is, generally speaking, from low to high:
  1. External style sheet
  2. Internal style sheet (in the head section)
  3. Inline style (inside an HTML element)
However: if you put the link to the external style sheet after the internal style sheet in your HTML <head>, and you do not use an inline style, your external style sheet will override your internal style sheet.
topics: css, level: 100
What is a correct example of a CSS inline style?
Please select exactly one correct alternative.

Answer

The correct way to use a CSS inline style is shown below:
<h1 style="color:red">My header</h1>
   
Alternative d is incorrect because the ending h1 tag is not correct, it should be </h1>.

Reading

No resources given.
topics: css, level: 100
There are multiple ways of inserting a style sheet in your web page. Which alternatives are valid?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.
topics: css, level: 100
Which of the alternative assertions are true?
Please select exactly one or more correct alternatives.

Answer

rgba(0, 255, 0, "red") is an illegal construction, "red" should be a decimal value indicating opacity. rgba(0, 255, 0, 0.3) results in a green transparent text.

Reading

No resources given.
topics: css, level: 100
What is the correct way to refer to an external CSS style sheet?
Please select exactly one correct alternative.

Answer

This is the correct way in which you refer to an external CSS style sheet:
<link rel="stylesheet" type="text/css" href="mystylesheet.css">

Reading

CSS How To...
topics: css, level: 100
What is an "alpha channel parameter" in the context of colors?
Please select exactly one correct alternative.

Answer

An alpha channel parameter is a number indicating opacity (0.0 for fully transparent and 1.0 for fully opaque).
topics: css, level: 100
How do you define an internal style sheet in your HTML document?
Please select exactly one correct alternative.

Answer

Using the <style> tag, like in the following example:
<head>
<style>
body {
background-color: rgb(255,255,255);
}
</style>
</head>

Reading

No resources given.
topics: css,css|tables, level: 100
What is the
border-collapse
property used for?
Please select exactly one correct alternative.

Answer

The border-collapse property determines whether the table borders are collapsed into a single border or separated.
topics: css,css|box model, level: 100
Which of the statements below are correct on the CSS box model?
The CSS box model is a box that wraps around HTML elements. It consists of the actual content, surrounded by margins, borders and padding.

Which of the statements below are correct?
Please select exactly one or more correct alternatives.

Answer

In the CSS box model, the correct order of the boxes around the content is: padding, border, margin.
topics: css,css|border, level: 100
Which of the border-style values below are not valid?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.

Reading

CSS Border
topics: css,css|outline, level: 100
For the CSS outline, which of the statements below are correct?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.

Reading

CSS Outlines
topics: css,css|border, level: 100
What property of the div element is set with the 5px value in the given CSS code fragment?
Given the following code snippet:
div {
   box-shadow: 5px 10px 15px #ff00ff;
}
What property of the div element is set with the 5px value in the CSS code fragment below?
Please select exactly one correct alternative.

Answer

In shadowing an element, the following syntax is used:
 box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

h-shadow (a required parameter) is the position of the horizontal shadow. Negative values are allowed.
topics: css,css|text,css|texteffects, level: 100
What is the correct way of forcing text to keep on one (1) line?
Please select exactly one or more correct alternatives.

Answer

white-space: nowrap;
is the correct way to force a text to stay on one line (no wrapping).
topics: css,css|tables, level: 100
What is the correct equivalent of a table's rowspan in CSS?
Please select exactly one correct alternative.

Answer

There isn't a CSS equivalent for rowspan nor for colspan. The colspan and rowspan attributes make up the structure of the table, whereas CSS is for presentation, and HTML should be used for structural purposes.
topics: css, level: 100
What is the difference between PX, EM and Percent?
Please select exactly one correct alternative.

Answer

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.
topics: css|sizing, level: 100
What is the difference between EM and Pixel size?
Please select exactly one correct alternative.

Answer

1EM is equal to the current font-size. Px renders letters exactly that number of pixels in height.

Reading

css-font-size
topics: css, level: 100
What does the abbreviation CSS stand for?
Please select exactly one correct alternative.

Answer

CSS stands for Cascading Style Sheets. You can use CSS to control the style and layout of multiple web pages all at once.

Reading

CSS Tutorial
topics: css,css|margin, level: 100
Which property do you use to change the left margin of an element?
Please select exactly one correct alternative.

Answer

Padding is used to determine the inside margin of an element, and what we want is setting the outside margin of an element. "text-indent" is used for texts and only indents the first line of the text.
topics: css|text, level: 100
Which style should you use?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

No resources given.
topics: css,css|margin,css|padding, level: 100
Which of the following statements below are true?
Please select exactly one or more correct alternatives.

Answer

The margin does not have a background color, and is completely transparent. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

Reading

CSS Padding
topics: css,css|fonts, level: 100
Which alternative gives valid font variants?
Please select exactly one correct alternative.

Answer

normal, small-caps, initial, inherit Are valid font variants.
topics: css,css|fonts, level: 100
Which of the following code fragments are correct?
Please select exactly one or more correct alternatives.

Answer

1.75px is wrong because the amount of pixels can only be expressed in integer values. 0,75em is false because you have to use . instead of , for decimal values.

Reading

CSS Fonts
topics: css,css|fonts, level: 100
Why should you use
font-size
in
em
instead of pixels?
Please select exactly one correct alternative.

Answer

You use em to allow the user to resize the text in the browser menu themselves. 1em is the same as the current font size.

Reading

CSS Fonts
topics: css,css|fonts, level: 100
Which of the following statements are correct?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.

Reading

CSS Fonts
topics: css,css|fonts, level: 100
In CSS fonts, what is the difference between a "generic family" and a "font family"?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

CSS Fonts
topics: css,css|fonts, level: 100
What is a monospace font?
Please select exactly one correct alternative.

Answer

In a monospace font, all characters have the same width.

Reading

CSS Fonts
topics: css,css|selectors, level: 100
You want to change the color of h2 elements into red. Which of the CSS code fragments below are incorrect?
Please select exactly one or more correct alternatives.

Answer

You should not start classnames and id's with a number.

Reading

CSS Selectors
topics: css,css|selectors, level: 100
To select only the element with class ThisClass on a web page and change the color to red, which of the following alternatives can you use?
Please select exactly one correct alternative.

Answer

For all elements of a certain type on a page, you use the
.ThisClass
class Selector.

Reading

CSS Selectors
topics: css,css|selectors, level: 100
To select only the element with id ThisOne on a web page and change the color to red, which of the following alternatives can you use?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

CSS Selectors
topics: css, level: 100
In which ways, colors can be specified Colors in CSS?
Please select exactly one or more correct alternatives.

Answer

All alternatives, except predefined or cross-browser floating point colour values, are valid.
topics: css,css|padding, level: 100
Are negative values allowed in the padding property?
Please select exactly one correct alternative.

Answer

Negative values of the padding property are just not allowed.
topics: css, level: 100
What is the correct way to use the external mystyle.css file (located in de css subfolder) in your HTML file?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

No resources given.
topics: css,css|border, level: 100
How do you display a border?
Please select exactly one correct alternative.

Answer

Border properties have the following sequence: top, right, bottom and left (anti clockwise).

Reading

CSS Border
topics: css,css|text, level: 100
Which of the following alternatives makes your text bold?
Please select exactly one or more correct alternatives.

Answer

"boldest" Is not a valid value for font-weight. Both "strong" and "em" adds so called "semantic importance" to the text. This is not specifically a style, but means that the text is "important".
topics: css,css|text, level: 100
Which of the CSS alternatives makes your text bold?
Please select exactly one or more correct alternatives.

Answer

Only the "font-weight: 1000;" is incorrect because the value used is not valid. This value must be on of the following values: 100, 200, 300, 400, 500, 600, 700, 800, 900.
topics: css,css|text, level: 100
Why might it not be a good idea to underline text in your web page?
Please select exactly one correct alternative.

Answer

An underlined text looks much like a hyperlink, which may confuse the use when clicking it.

Reading

No resources given.
topics: css,css|text, level: 100
How do you make each word in a text start with a capital letter?
Please select exactly one correct alternative.

Answer

"text-transform: uppercase" transforms all characters to capital letters. caps Is not a valid transformation.
topics: css,css|links, level: 100
Which of the below alternatives are valid link states?
Please select exactly one or more correct alternatives.

Answer

The following are valid link states:
  • a:link : an unvisited link
  • a:visited : a visited link
  • a:hover : link state when the user mouses over it
  • a:active : link state on the moment it is clicked by the user
a:default is not a valid link state.

Reading

CSS Links
topics: css,css|text, level: 100
How can you display hyperlinks without an underline?
Please select exactly one correct alternative.

Answer

text-decoration is mostly used to remove underlines from links.

Reading

CSS Links
topics: css|color,css|text, level: 100
To change the text color of an element, which CSS property do you use?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

No resources given.
topics: css|selectors, level: 100
How do you add a background color for all
<h3>
elements?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

No resources given.
topics: css|color, level: 100
Which of the standard CSS color names are valid?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.

Reading

CSS Color Names
topics: css|color, level: 100
Which of the following alternatives are true?
Please select exactly one or more correct alternatives.

Answer

See the correct answers above.
topics: css,css|selectors, level: 100
To select all
<h2>
elements on a web page and change the color to red, which of the following alternatives can you use?
Please select exactly one correct alternative.

Answer

See the correct answer above.

Reading

CSS Selectors
That's all folks!

Congratulations, you've made it to the end! I'll try to add more questions and topics on a regular basis.

More questions?

If you have enjoyed the quiz and you want more, you can select other tests by clicking the green buttons below.

Other resources

There are many quizzes and learning resources on the internet. Below you'll links to a selection of these. I'll add more. Quizzes from others
Learning resources
Take a look at my blog

Contact

Please contact me for feedback, suggestions and questions. hansrontheweb@live.com
Other quizzes

all topics
latest questions
html
css
javascript
jquery
bootstrap
architecture
software engineering
c#
sharepoint
xml
powershell
angular