CSS selftest

What is the difference between EM and Pixel size?

Please select exactly one correct alternative.

EM renders letters exactly that number of points in width. renders letters exactly that number of points in height. Px renders letters exactly that number of pixels in width. 1EM is the same as 1Px. Px renders letters exactly that number of pixels in height. 1EM is equal to the current font-size. None of the above.

Answer

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

Reading

px – em – % – pt – keyword

What is the difference between PX, EM and Percent?

Please select exactly one correct alternative.

Pixel is a relative measurement, while percent and EM are static measurements. Pixel is a static measurement, while percent and EM are relative measurements. Pixel and percent are relative measurements, while EM is a relative measurement. None of the above.

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.

Reading

Pixels to Ems Conversion

What is the correct equivalent of a table's rowspan in CSS?

Please select exactly one correct alternative.

column-span colspan span None of the above.

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.

Reading

HTML td rowspan Attribute

What is the correct way of forcing text to keep on one (1) line?

Please select none ore more correct alternatives.

space: nowrap;

nowrap;

white-space: nowrap;

None of the above.

Answer

white-space: nowrap;

is the correct way to force a text to stay on one line (no wrapping).

Reading

CSS white-space Property

What property of the div element is set with the 5px value in the given CSS code fragment?

You have following code fragment.

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.

The is the position of the vertical shadow of the div element. The is the position of the horizontal shadow of the div element. The blur distance of the shadow of the div element. None of the above.

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.

Reading

CSS3 box-shadow Property

For the CSS outline, which of the statements below are correct?

Please select none ore more correct alternatives.

An outline is drawn around elements (outside the borders). The outline affects the total width and height of the element. The outline is not a part of an element's dimensions. The element's total width and height is not affected by the width of it's outline. An outline is drawn directly inside the element's border.

Answer

See the correct answers above.

Reading

CSS Outlines

Which of the border-style values below are not valid?

Please select none ore more correct alternatives.

border-style: solid, dashed;

border-style: grooved;

border-style: ridged;

border-style: hidden;

Answer

See the correct answers above.

Reading

CSS Border

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 none ore more correct alternatives.

The box directly surrounding the content is the padding. The box directly surrounding the content is the margin. The box directly surrounding the padding is the border. The box directly surrounding the border is the margin.

Answer

In the CSS box model, the correct order of the boxes around the content is: padding, border, margin.

Reading

The CSS Box Model

What is the border-collapse property used for?

Please select exactly one correct alternative.

The border-collapse property determines that the table margins will be 0. The border-collapse property determines whether the table borders are collapsed into a single border or separated. The border-collapse property determines that the default table padding will be 0. The border-collapse property determines that the table borders are collapsed into a single border.

Answer

The border-collapse property determines whether the table borders are collapsed into a single border or separated.

Reading

CSS border-collapse Property

How do you define an internal style sheet in your HTML document?

Please select exactly one correct alternative.

Using the <style> tag. Using the <css> tag. Using the <script> tag. None of the above.

Answer

Using the <style> tag, like in the following example:

<head>
<style>
body {
background-color: rgb(255,255,255);
}
</style>
</head>

Where do you put the link to your external style sheet in your HTML web page?

Please select exactly one correct alternative.

Just beneath the <html> tag In the <head> section Just before the <html> tag On the top of your <body> section

Answer

You put your link in the <head> section.

What is the correct way to refer to an external CSS style sheet?

Please select exactly one correct alternative.

<link rel="css" type="text/css" href="mystylesheet.css">

<link rel="stylesheet" type="text" href="mystylesheet.css">

<link rel="stylesheet" type="text/css" href="mystylesheet.css">

None of the above.

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...

What does the abbreviation CSS stand for?

Please select exactly one correct alternative.

Cascading Style Sheets Cascading Style Sheet Correct Styling Sheets None of the above.

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

There are multiple ways of inserting a style sheet in your web page. Which alternatives are valid?

Please select none ore more correct alternatives.

By using an external style sheet. By using an internal style sheet. By using an XSLT transformation. By using an inline style.

Answer

See the correct answers above.

Reading

Three Ways to Insert CSS

What is a correct example of a CSS inline style?

Please select exactly one correct alternative.

<style>
body {
   background-color: black;
}
</style>
     

<h1 style="color:red">My header</h1>
     

<link rel="stylesheet" type="text/css" href="mystylesheet.css">
     

<h1 styles="color:red">My header<h1>
     

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>.

What is the priority order from low to high in which the styles are applied?

You can use a CSS style sheet in three different ways:

• External style sheet
• Internal style sheet
• Inline style

When you use all three ways at once, what is the priority order from low to high in which the styles are applied?

Please select exactly one correct alternative.

External style sheet, internal style sheet, inline style. Inline style, internal style sheet, external style sheet. The priority order depends on the browser you are using. None. If styles are defined in multiple ways, your browser will use the default styles.

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.

Reading

Three Ways to Insert CSS

What will be the color of the "My title" header?

Suppose you have the following HTML web page implemented:

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1.makemered {
            color:rgb(255,0,0);
         }
      </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);
}
   

What will be the color of the "My title" header?

Please select exactly one correct alternative.

Red Green Blue None of the above, the browser will use the default style, which is black.

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)

So, the color of the "My title" header will be red.

Please note: 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.

What will be the color of the "My title" header?

Suppose you have the following HTML web page implemented:

<!DOCTYPE html>
<html>
   <head>
   <style>
   h1.makemered {
   color:rgb(255,0,0);
   }
   </style>
   <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
   <h1 class="makemered">My title</h1>
   </body>
</html>
      

And you have the following external CSS stylesheet (style.css) implemented:

h1.makemered {
   color:rgb(0,255,0);
}
      

What will be the color of the "My title" header?

Please select exactly one correct alternative.

Red Green Blue None of the above, the browser will use the default style, which is black.

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)

But: 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 (as in our example), your external style sheet will override your internal style sheet.

So: the color of the "My title" header will be green.

What HTML attribute is used to define an inline style?

Please select exactly one correct alternative.

styles style class css

Answer

Inline styles are defined within style tags.

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.

Yes No That depends on the browser. The browser will use it's own default style.

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.

Some CSS properties are animatable. What does that mean?

Please select none ore more correct alternatives.

It means that these properties can be used in animations. It means that these properties can be used in tables. It means that these properties can be used in transitions. It means that these properties can be used in sprites.

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.

Which of the alternative code fragments in your external CSS sheet is the correct syntax?

Please select exactly one correct alternative.

{ body; color:red; }

{ body:color=black; }

body { color: green; }

body:color=yellow;

Answer

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

Suppose you want to put a comment in your external style sheet. What is the correct way to do it?

Please select exactly one correct alternative.

<!-- Put your comments here -->

/* Put your comments here */

// Put your comments here

' Put your comments here

Answer

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

Which of the alternatives is the proper way to to change the background color?

Please select exactly one correct alternative.

{ bgcolor: red; }

{ background-color: red; }

{ color: red; }

None of the above.

Answer

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

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.

No color is used, your background will default be white. No color is used, your background will default be transparent. No color is used, your background will default be grey. None of the above, it really depends on your browser's default.

Answer

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

In which ways, colors can be specified Colors in CSS?

Please select none ore more correct alternatives.

Hexadecimal colour values RGB colour values RGBA colour values HSL colour values Predefined or cross-browser floating point colour values HSLA colour values Predefined or cross-browser colour names

Answer

All alternatives, except predefined or cross-browser floating point colour values, are valid.

Reading

CSS Legal Color Values

Which of the alternative assertions are true?

Please select none ore more correct alternatives.

color: #00f; has the same effect as color: #0000ff; Using color: rgba(0, 255, 0, "red"); results in a the colour being overridden by blue. Using color: rgb(255); on texts results in a red text. Using color: rgba(0, 255, 0, 0.3); results in a red opaque coloured text.

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.

What is an "alpha channel parameter" in the context of colors?

Please select exactly one correct alternative.

An alpha channel parameter is a text indicating which predefined opacity definition is used. An alpha channel parameter is a number indicating opacity (1.0 for fully transparent and 0.0 for fully opaque). An alpha channel parameter is a number indicating opacity (0.0 for fully transparent and 1.0 for fully opaque). None of the above.

Answer

An alpha channel parameter is a number indicating opacity (0.0 for fully transparent and 1.0 for fully opaque).

Reading

CSS Legal Color Values

Which of the following alternatives are true?

Please select none ore more correct alternatives.

rgb(0,0,255) and rgb(0%,0%,100%) are equal. rgb(0, 0, 255) defines the color red. An HSL color value is defined by the following parameters: hue, saturation and lightness. An HSLA color value is an extension of HSL color values extended with an alpha channel.

Answer

See the correct answers above.

Reading

CSS Legal Color Values

Which of the standard CSS color names are valid?

Please select none ore more correct alternatives.

AliceBlue BlueViolet DarkGreen DarkMargenta

Answer

See the correct answers above.

Reading

CSS Color Names

How do you add a background color for all <h3> elements?

Please select exactly one correct alternative.

h1.all { background-color: #00ff00; }

h1 { background-color: #00ff00; }

all.h1 { background-color: #00ff00; }

None of the above.

Answer

See the correct answer above.

To change the text color of an element, which CSS property do you use?

Please select exactly one correct alternative.

fgcolor text-color color colour

Answer

See the correct answer above.

How can you display hyperlinks without an underline?

Please select exactly one correct alternative.

a { underline: none; }

a { decoration: no-underline; }

a { text-decoration: no-underline; }

a { text-decoration: none; }

Answer

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

Reading

CSS Links

Which of the below alternatives are valid link states?

Please select none ore more correct alternatives.

a:link

a:visited

a:hover

a:default

a:active

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

How do you make each word in a text start with a capital letter?

Please select exactly one correct alternative.

text-transform: uppercase

text-transform: capitalize

text-transform: caps

None of the above.

Answer

"text-transform: uppercase" transforms all characters to capital letters. caps Is not a valid transformation.

Reading

CSS text-transform Property

Which property should you use to change the font of an element?

Please select exactly one correct alternative.

font-family

font

font-height

Arial

Answer

font-family Defines the font name you are using. Arial is not a font property. Using font, you can change all possible properties of the font being used, like in the example below:

font: 15px arial, sans-serif;

Reading

CSS font Property

Why might it not be a good idea to underline text in your web page?

Please select exactly one correct alternative.

Because underlining text is not supported. Because an underlined text looks much like a hyperlink. Because underlining text make the font applied look larger. None of the above.

Answer

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

Which of the CSS alternatives makes your text bold?

Please select none ore more correct alternatives.

font-weight: bolder;

font-weight: bold;

font-weight: 900;

font-weight: 1000;

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.

Reading

HTML Text Formatting Elements
CSS font-weight Property

Which of the following alternatives makes your text bold?

Please select none ore more correct alternatives.

font-weight: boldest;

<b>This is my text</b>

<strong>This is my text</strong>

<em>This is my text</em>

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".

Reading

HTML Text Formatting Elements
CSS font-weight Property

How do you display a border?

How do you display a border with the following properties:

• Top border: 10 pixels
• The bottom border: 20 pixels
• The left border: 1 pixel
• The right border: 19 pixels

Please select exactly one correct alternative.

border-width: 10px 19px 1px 20px;

border-width: 10px 19px 20px 1px;

border-width: 10px 1px 20px 19px;

border-width: 10px 19px 20px 10px;

Answer

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

Reading

CSS Border

Which property do you use to change the left margin of an element?

Please select exactly one correct alternative.

padding-left

margin-left

indent

None of the above.

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.

Reading

CSS margin-left Property
CSS padding-left Property
CSS text-indent Property

Are negative values allowed in the padding property?

Please select exactly one correct alternative.

Yes No That depends on the browser that you are using.

Answer

Negative values of the padding property are just not allowed.

Reading

CSS padding Property

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.

.h2 { color: red; }

#h2 { color: red; }

h2 { color: red; }

None of the above.

Answer

See the correct answer above.

Reading

CSS Selectors

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.

.ThisOne { color: red; }

#ThisOne { color: red; }

ThisOne { color: red; }

None of the above.

Answer

See the correct answer above.

Reading

CSS Selectors

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.

.ThisClass { color: red; }

#ThisClass { color: red; }

ThisClass { color: red; }

None of the above.

Answer

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

Reading

CSS Selectors

You want to change the color of h2 elements into red. Which of the CSS code fragments below are incorrect?

Please select none ore more correct alternatives.

.1stClass { color: red; }

#1stElement { color: red; }

h2 { color: red; }

h2.FirstClass { color: red; }

Answer

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

Reading

CSS Selectors

What is a monospace font?

Please select exactly one correct alternative.

A font in which all characters have the same width. A font in which all characters have the same height. A font in which all characters have the same width and height. A font in which all characters have the same space between characters and all characters have the same height.

Answer

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

Reading

CSS Font

In CSS fonts, what is the difference between a "generic family" and a "font family"?

Please select exactly one correct alternative.

Both "generic family" and "font family" have the same meaning. Fonts in a generic family have the same name a font family have the same looks. Fonts in a generic family have a similar look and a font family has a specific font name. None of the above.

Answer

See the correct answer above.

Reading

CSS Fonts

Which of the following statements are correct?

Please select none ore more correct alternatives.

"Serif" and "Monospace" are both generic families. "Serif" and "Monospace" are both font families. "Times New Roman" and "Arial" are both specific font families. "Times New Roman" and "Arial" are both generic families.

Answer

See the correct answers above.

Reading

CSS Fonts

Why should you use font-size in em instead of pixels?

Please select exactly one correct alternative.

To let the users resize the text in the browser menu themselves. To withhold the users resize the text in the browser menu themselves. To fix the font size to 32 pixels. None of the above.

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

Which of the following code fragments are correct?

Please select none ore more correct alternatives.

font-size: 16px;

font-size: 1.75px;

font-size: 0,75em;

font-size: 0.75em;

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

Which alternative gives valid font variants?

Please select exactly one correct alternative.

normal, large-caps, initial, inherit normal, small-caps, initial, inherit normal, small-caps, initial normal, small-caps, inherit

Answer

normal, small-caps, initial, inherit Are valid font variants.

Reading

CSS font-variant Property

Which of the following statements below are true?

Please select none ore more correct alternatives.

The margin doesn't have a background color; it is transparent. The padding clears an area around the content of an element (inside the border). The padding is affected by the background color of the element. The margin has a background color. The margin is affected by the background color of the element. The padding clears an area outside the border of an element. The padding is affected by the background color of the element.

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

Which style should you use?

Consider the following HTML:

<div>jan jansen</div>
   

You want this to be displayed on the screen as Jan Jansen, in red letters.

Please select exactly one correct alternative.

div  {
   text-transform : italic;
   font-style: capitalize;
   color: red; 
}
    

div  {
   text-transform : capitalize;
   font-style: italic;
   color: red; 
}

    

div  {
   text-transform : capitalize;
   font: italic;
   font-color: red; 
}

    

div  {
   text-transform : italic;
   font-style: capitalize;
   font-color: red; 
}

    

Answer

See the correct answer above.

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.

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

<link rel="stylesheet" href="css/mystyle.css">

<link rel="stylesheet" href="mystyle.css">

<style type="stylesheet" href="css/mystyle.css">

<style type="stylesheet" src="mystyle.css">

Answer

See the correct answer above.