Frequently asked CSS questions

Question 1

CSS is a style sheet language used to style documents written in markup languages such as HTML and XML. CSS is developed by W3C, an organization that develops the standards for the web, such as HTML, XHTML, XML, and CSS.

Answer

CSS is a style sheet language used to style documents written in markup languages such as HTML and XML. CSS is developed by W3C, an organization that develops the standards for the web, such as HTML, XHTML, XML, and CSS.

Question 2

em is a CSS unit relative to an element's current font size.

Answer

em is a CSS unit relative to an element's current font size.

Question 3

rem is a CSS unit relative to the root font size of the document (<html>).

Answer

rem is a CSS unit relative to the root font size of the document (<html>).

Question 4

vh is a CSS unit relative to the viewport's height. More information about CSS unit vh.

Answer

vh is a CSS unit relative to the viewport's height. More information about CSS unit vh.

Question 5

fr is a CSS unit that represents a fraction. This unit is used in grid layouts exclusively.

The unit's value depends on the total fractions inside property values such as grid-template-columns, which can use CSS functions such as repeat(). Here is an example:

.container {
  grid-template-columns: 300px 1fr 2fr;
}

In the example above, 1fr is equal to the container's width minus 300px divided by 3. The first grid item takes up 300px, the second takes up 1 fraction and the third takes up 2.

This means that there are 3 fractions taking up the space thats left for the last two items.

The example above can also be written in the following, less ideal way:

.container {
  grid-template-columns: 300px calc((100% - 300px) / 3) calc((100% - 300px) / 3 * 2);
}

Answer

fr is a CSS unit that represents a fraction. This unit is used in grid layouts exclusively.

The unit's value depends on the total fractions inside property values such as grid-template-columns, which can use CSS functions such as repeat(). Here is an example:

.container {
  grid-template-columns: 300px 1fr 2fr;
}

In the example above, 1fr is equal to the container's width minus 300px divided by 3. The first grid item takes up 300px, the second takes up 1 fraction and the third takes up 2.

This means that there are 3 fractions taking up the space thats left for the last two items.

The example above can also be written in the following, less ideal way:

.container {
  grid-template-columns: 300px calc((100% - 300px) / 3) calc((100% - 300px) / 3 * 2);
}

Question 6

Padding is a CSS property that determines the space between the content of an element and it's border. Padding can be applied using a shorthand, simply called padding, which consists of the following properties in the following, clockwise order:

padding-top
padding-right
padding-bottom
padding-left

As you might know, buttons have spacing between it's border and the text: it's padding.

Besides these properties, there are lesser known properties such as padding-block-end. These properties are beyond the scope of this post.

Answer

Padding is a CSS property that determines the space between the content of an element and it's border. Padding can be applied using a shorthand, simply called padding, which consists of the following properties in the following, clockwise order:

padding-top
padding-right
padding-bottom
padding-left

As you might know, buttons have spacing between it's border and the text: it's padding.

Besides these properties, there are lesser known properties such as padding-block-end. These properties are beyond the scope of this post.

Question 7

WebKit is a web browser engine used by Safari. You might stumble accross -webkit- as a prefix for non-standard CSS properties or for the sake of compatibility with older browsers.

Answer

WebKit is a web browser engine used by Safari. You might stumble accross -webkit- as a prefix for non-standard CSS properties or for the sake of compatibility with older browsers.

Question 8

overflow is a CSS property that determines what happens to content that overflows a container. The most common use case for setting this property is to hide the overflowing content, to prevent horizontal scrolling on the entire web page.

An element can overflow it's container either by having either value absolute, relative, sticky or fixed for property position, a negative margin value, or by using CSS property transform.

CSS property overflow is a shorthand property for overflow-x and overflow-y with values:

auto shows a scrollbar only if an element overflows the container.
clip clips the content. This value allows property overflow-clip-margin to determine how much an element can overflow the container before it gets clipped.
hidden hides the content, just like clip, but allows programmatic scrolling (unlike clip)
overlay is a value only supported by WebKit browsers and allows the content to extend beneath the scrollbar (the scrollbar overlays the content). This value is non-standardized.
scroll always shows a scrollbar, even if the container does not contain element that overflow it.
visible allows elements to overflow it's container without getting clipped or hidden at all.

Answer

overflow is a CSS property that determines what happens to content that overflows a container. The most common use case for setting this property is to hide the overflowing content, to prevent horizontal scrolling on the entire web page.

An element can overflow it's container either by having either value absolute, relative, sticky or fixed for property position, a negative margin value, or by using CSS property transform.

CSS property overflow is a shorthand property for overflow-x and overflow-y with values:

auto shows a scrollbar only if an element overflows the container.
clip clips the content. This value allows property overflow-clip-margin to determine how much an element can overflow the container before it gets clipped.
hidden hides the content, just like clip, but allows programmatic scrolling (unlike clip)
overlay is a value only supported by WebKit browsers and allows the content to extend beneath the scrollbar (the scrollbar overlays the content). This value is non-standardized.
scroll always shows a scrollbar, even if the container does not contain element that overflow it.
visible allows elements to overflow it's container without getting clipped or hidden at all.

Question 9

box-sizing: border-box is a CSS declaration that makes sure that any dimension-related CSS property takes the border, padding and content into account (the border-box).

If a box has a border of 1px thick, 30px of padding overal, and a declared width of 500px, then it's content would have 438px of space horizontally (500px - 30px - 30px - 1px - 1px) if property box-sizing is set to value border-box.

Answer

box-sizing: border-box is a CSS declaration that makes sure that any dimension-related CSS property takes the border, padding and content into account (the border-box).

If a box has a border of 1px thick, 30px of padding overal, and a declared width of 500px, then it's content would have 438px of space horizontally (500px - 30px - 30px - 1px - 1px) if property box-sizing is set to value border-box.

Question 10

::before and ::after are CSS pseudo-elements, which are basically elements that are inserted by CSS. They rely on the content property that allows a string value to display text.

More often than not these pseudo-elements are used to show icons by using a Unicode character that shows an icon as defined in a font file (by Font Awesome for instance).

An interesting feature of ::before and ::after is the use of function attr() which reads the value of an HTML attribute to be used for the content of the pseudo-element, like this:

td::before {
  content: attr(data-title);
}

Although this example shows a data-* attribute, regular attributes are also supported.

Answer

::before and ::after are CSS pseudo-elements, which are basically elements that are inserted by CSS. They rely on the content property that allows a string value to display text.

More often than not these pseudo-elements are used to show icons by using a Unicode character that shows an icon as defined in a font file (by Font Awesome for instance).

An interesting feature of ::before and ::after is the use of function attr() which reads the value of an HTML attribute to be used for the content of the pseudo-element, like this:

td::before {
  content: attr(data-title);
}

Although this example shows a data-* attribute, regular attributes are also supported.

Question 11

Assuming your image's display value is inline-block, you can center it by applying text-align: center to it's parent element. This centers all text and all elements with a value of either inline, inline-block, inline-flex, etc for property display, inside the image's parent element.

If you only want to center the image, consider wrapping it in a <div>-element or applying display: block and a specified width (50%, 300px, etc) if the image's intrinsic width is larger or equal to it's parent's rendered width.

Answer

Assuming your image's display value is inline-block, you can center it by applying text-align: center to it's parent element. This centers all text and all elements with a value of either inline, inline-block, inline-flex, etc for property display, inside the image's parent element.

If you only want to center the image, consider wrapping it in a <div>-element or applying display: block and a specified width (50%, 300px, etc) if the image's intrinsic width is larger or equal to it's parent's rendered width.

Question 12

There are multiple ways to center a <div>-element. Each situation has it's own approach:

If your <div>-element has a specified width (50%, 500px, etc) and is a block-element (display: block, display: table, display: flex, etc), then use margin-left: auto and margin-right: auto.

If your <div>-element does not have a specified width (auto) then wrap the <div>-element inside of a new <div>-element and apply display: flex and justify-content: center to that new <div>-element. If your <div>-element is inside of a flexbox (display: flex), then you can also center it by using margin-left: auto and margin-right: auto.

Answer

There are multiple ways to center a <div>-element. Each situation has it's own approach:

If your <div>-element has a specified width (50%, 500px, etc) and is a block-element (display: block, display: table, display: flex, etc), then use margin-left: auto and margin-right: auto.

If your <div>-element does not have a specified width (auto) then wrap the <div>-element inside of a new <div>-element and apply display: flex and justify-content: center to that new <div>-element. If your <div>-element is inside of a flexbox (display: flex), then you can also center it by using margin-left: auto and margin-right: auto.

Question 13

Apply text-align: center to the element containing the text, for instance a <p>-element.

Answer

Apply text-align: center to the element containing the text, for instance a <p>-element.

Question 14

Apply text-decoration: none to the hyperlink (<a>-element).

Answer

Apply text-decoration: none to the hyperlink (<a>-element).

Question 15

Pick a font in Google Fonts. Click on Select this style for each style of the font you want to use. Copy the HTML-code in the sidebar and paste it in your <head>-element. Copy the CSS rules in the sidebar and apply them to the body to set the font for the whole document, or apply it to certain elements such as headings (<h1> through <h6>).

Answer

Pick a font in Google Fonts. Click on Select this style for each style of the font you want to use. Copy the HTML-code in the sidebar and paste it in your <head>-element. Copy the CSS rules in the sidebar and apply them to the body to set the font for the whole document, or apply it to certain elements such as headings (<h1> through <h6>).

Question 16

To set the text color for the whole document, apply color to the <body>-element like this:

body {
  color: #333333;
}

Elements such as paragraphs and headings inherit this color, so you do not have to apply the text color to them specifically. That's how CSS works: inheriting from parent elements.

Answer

To set the text color for the whole document, apply color to the <body>-element like this:

body {
  color: #333333;
}

Elements such as paragraphs and headings inherit this color, so you do not have to apply the text color to them specifically. That's how CSS works: inheriting from parent elements.

Question 17

To change the background color of the <body>-element (as an example), you apply background-color to the <body>-element element like this:

body {
  background-color: #f2f2f2;
}

Answer

To change the background color of the <body>-element (as an example), you apply background-color to the <body>-element element like this:

body {
  background-color: #f2f2f2;
}

Question 18

If the text that you want to make bold is considered important text, you should wrap it inside of a <strong>-element. If the text is not important, but you want to make it bold anyways, wrap it in a <b>-element.

If you want to make certain elements bold using CSS, you can do so by applying font-weight: bold on them. Property font-weight uses the following values to set the weight:

100 (thin)
200 (extra light)
300 (light)
400 (regular)
500 (medium)
600 (semi bold)
700 (bold)
800 (extra bold)
900 (black)

Not all fonts support all weights, so be sure to look into the styles that they support. Popular font Roboto, for instance, does not support weight 600 (semi bold).

Answer

If the text that you want to make bold is considered important text, you should wrap it inside of a <strong>-element. If the text is not important, but you want to make it bold anyways, wrap it in a <b>-element.

If you want to make certain elements bold using CSS, you can do so by applying font-weight: bold on them. Property font-weight uses the following values to set the weight:

100 (thin)
200 (extra light)
300 (light)
400 (regular)
500 (medium)
600 (semi bold)
700 (bold)
800 (extra bold)
900 (black)

Not all fonts support all weights, so be sure to look into the styles that they support. Popular font Roboto, for instance, does not support weight 600 (semi bold).

Question 19

Assuming your button's display value is either inline-block or inline-flex, you should apply text-align: center to the button's parent element. This causes all text and inline elements to be centered within the button's parent element.

If you want to center only the button, you should wrap the button inside a new <div>-element and apply text-align: center to that new <div>-element.

Answer

Assuming your button's display value is either inline-block or inline-flex, you should apply text-align: center to the button's parent element. This causes all text and inline elements to be centered within the button's parent element.

If you want to center only the button, you should wrap the button inside a new <div>-element and apply text-align: center to that new <div>-element.

Question 20

It's because there is probably whitespace between your <div>-elements while you were writing the HTML code. This whitespace is placed inline, just like inline blocks.

Just like inline elements such as <strong>, <a>, and <em> are used in paragraphs to style text, inline blocks can also be used inside paragraphs and are also affected by whitespace.

Answer

It's because there is probably whitespace between your <div>-elements while you were writing the HTML code. This whitespace is placed inline, just like inline blocks.

Just like inline elements such as <strong>, <a>, and <em> are used in paragraphs to style text, inline blocks can also be used inside paragraphs and are also affected by whitespace.

Question 21

In order for a border to be shown, it needs the following properties:

border-width with a value larger than 0px
border-style with a value other than none
border-color with a value other than transparent

There are also elements that do not support borders, such as <tr>-elements (table rows).

Answer

In order for a border to be shown, it needs the following properties:

border-width with a value larger than 0px
border-style with a value other than none
border-color with a value other than transparent

There are also elements that do not support borders, such as <tr>-elements (table rows).

Question 22

There are multiple causes for this, the most common cause is because of using float: left or float: right on a <div>-element without using a clearfix to make the floating <div>-element's parent element take the floating <div>-element's height into account for it's own height (where it refers to the parent element of the floating <div>-element).

If an element has float: left or float: right, then it's height does not contribute to the height of it's parent element. Fix this by adding a clearfix as an ::after pseudo-element:

.parent-of-floating-div::after {
  content: '';
  display: block;
  clear: both;
}
.floating-div {
  float: left;
}

Answer

There are multiple causes for this, the most common cause is because of using float: left or float: right on a <div>-element without using a clearfix to make the floating <div>-element's parent element take the floating <div>-element's height into account for it's own height (where it refers to the parent element of the floating <div>-element).

If an element has float: left or float: right, then it's height does not contribute to the height of it's parent element. Fix this by adding a clearfix as an ::after pseudo-element:

.parent-of-floating-div::after {
  content: '';
  display: block;
  clear: both;
}
.floating-div {
  float: left;
}

Question 23

Classes are meant to be used on multiple elements. An ID is supposed to be used on a single element, such as the header. Selecting an element using an ID-selector (#id) carries more specificity and is more likely to overwrite class-selectors (.class).

Answer

Classes are meant to be used on multiple elements. An ID is supposed to be used on a single element, such as the header. Selecting an element using an ID-selector (#id) carries more specificity and is more likely to overwrite class-selectors (.class).

Question 24

Vertical margins overlap because that is what the intended behaviour is for margins between headings and paragraphs. CSS used to be intended to be used for simple documents, not for layouts. CSS can now make layouts; not just from top to bottom.

This is why vertical margins overlap/collapse, but not horizontal margins.

Answer

Vertical margins overlap because that is what the intended behaviour is for margins between headings and paragraphs. CSS used to be intended to be used for simple documents, not for layouts. CSS can now make layouts; not just from top to bottom.

This is why vertical margins overlap/collapse, but not horizontal margins.

Frequently asked CSS questions

What ...?

What is CSS?

What is em?

What is rem?

What is vh?

What is fr?

What is padding?

What is WebKit?

What is overflow?

What is box-sizing: border-box?

What is ::before and ::after?

How ... ?

How to center an image?

How to center a div?

How to center text?

How to remove underline from link?

How to change font?

How to change text color?

How to change background color?

How to make text bold?

How to center a button?

Why ... ?

Why is there a gap between inline blocks?

Why is border not showing?

Why are my divs overlapping?

Why use id instead of class?

Why do margins overlap?