css screening test

css screening test

How long does it take for a red background to fade to blue?1

You will be expected to have a strong knowledge of CSS, so please make sure you have that before applying.

  • How long does it take for a red background to fade to blue?

10 seconds 10 minutes 1 hour the time is specified in milliseconds

How do you transition a border width?2

  • Use the transition property to animate the border width
  • The transition property takes four parameters: the property to be transitioned, the duration, the timing function and the delay
  • The duration is defined using seconds or milliseconds

One of the following is an incorrect usage of the box-sizing property.3

In CSS, the box-sizing property determines whether an element’s total width and height should be calculated with or without borders and padding.

  • The border-box value includes the element’s content, padding, and borders.
  • The content-box value is the default. It only includes the element’s content and its padding.
  • The padding-box value is a legacy option that represents (you guessed it) a combination of content and padding. It is rarely supported in modern browsers, so you can ignore it for now.

What’s another name for absolute positioning in CSS?4

When setting the position of an element in CSS, you have four main options: static, fixed, relative, and absolute.

Fixed positioning is when an element’s position is set to be relative to the browser window itself (which remains static). Fixed positioning will always stay at the same place on a page even if it means that certain content gets pushed out of view.

In contrast, absolute positioning can be thought of as “relative to its first parent”: if the first parent has a position set to anything other than static (i.e., fixed or relative), then absolutely positioned elements will be placed based on that parent instead of the browser window.

In general, fixed positioning works fine for most websites and/or apps—and it is more widely used than absolute positioning—but there are some situations where absolute positioning may be appropriate. For example, if you want to dynamically generate a new element and make sure it appears in exactly the same spot every time (rather than moving with the rest of your site as you scroll), you could use absolute positioning for this purpose.

What is rem and when is it used?5

In CSS, the rem unit is a unit of length. 1rem is equal to the font size of the root element. If there’s no font size on the root element, then 1rem will defualt to 16px (the browser default).

The rem unit is useful because it allows your components to be sized relative to something you can control. If you set all elements to be 2rem tall, they’ll always be twice as tall as text in paragraphs regardless of what font-size you’re using on those paragraphs or other headings.

What happens when you apply font-style italic to some text, but then override that style with font-weight bold later on?6

Oops! Click Regenerate Content below to try generating this section again.

In this example code, what will the second list item look like?7

In this example code, what will the second list item look like?

body {

list-style-type: square; list-style-position: inside;


ul { list-style-type: circle; } li { list-style-position: outside; }

First Second

Which of the following is not a valid CSS unit?8

  • Percent: A unit of measurement that’s relative to another value. For example, if you have a document with a body element width of 100%, then the total width of the page will be 100% of the browser window. This is useful when creating responsive designs, as it allows style rules to adjust based on the size of the viewport.
  • Em: A measurement type in CSS that’s relative to other text sizes. If you set an element’s font-size to 70% and then set its font-size using ems, it would be 70% smaller than normal.
  • Rem: The root em unit is similar to em except instead of being relative to parent elements’ font sizes, it’s always equal to 1em (16px). This means all rem values are relative only to each other and not affected by anything else around them like percentages or points (pt) might be.
  • Vh: A CSS unit that represents 1/100th of viewport height (vh). This makes it easy for designers who want their design elements scaled proportionately across different devices with various screen sizes or resolutions such as tablets vs smartphones.”

What does flex-direction do?9

Flex-direction determines the direction in which flex items are laid out. By default, flex items are placed in a row, left to right. If you want the flex items to be displayed the other way around—that is, right to left—use the value *row-reverse*. The values *column* and *column-reverse* will have your flex items displayed top to bottom and bottom to top respectively. CSS Grid is a two-dimensional grid-based layout system that allows you to easily place blocks of content in both rows and columns. In this section we’ll go through a simple demo that uses Flexbox and then replicate it using CSS Grid.

A grid container has two child elements which are set to occupy two columns each. How many gutters are there between these elements in total?10

In a grid layout, the gutter is the space between the columns. In this example there are four columns (two on the left and two on the right). You must count both sides of the column to find out how many gutters there are. The answer is two: one on each side of the column.

Stacking contexts are drawn in_____ order.11

The answer is:

  • from bottom to top

It’s all about boxes!

CSS is a very visual language. The CSS properties you apply to an element define how that element looks and behaves in your design, so it’s helpful to think of those properties as telling the browser which box model to use for each element and how that box should be displayed on the page. The term _box_ simply refers to how each individual HTML element appears in your layout, or “box” (see what we did there?).

So far we’ve covered some of the most important things you need to know about positioning elements within the viewport with CSS, including:

  • How stacking contexts are drawn in reverse order
  • How an element’s position is determined by its offset from its containing block
  • What collapsing margins are and why they matter when considering spacing between elements on a web page

Add a Comment

Your email address will not be published. Required fields are marked *