Frequently asked CSS questions

Buy Me a Coffee
Frequently asked CSS questions

This post covers questions about CSS which do not need a separate post to be answered.

What ...?

What is CSS?

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.

What is em?

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

What is rem?

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

What is vh?

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

What is fr?

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);
}

What is padding?

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:

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. 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.

What is WebKit?

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.

What is overflow?

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.

What is box-sizing: border-box?

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.

What is ::before and ::after?

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

How ... ?

How to center an image?

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.

How to center a div?

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.

How to center text?

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

How to remove underline from link?

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

How to change font?

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

How to change text color?

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.

How to change background color?

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;
}

How to make text bold?

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

How to center a button?

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.

Why ... ?

Why is there a gap between inline blocks?

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.

Why is border not showing?

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

  1. border-width with a value larger than 0px
  2. border-style with a value other than none
  3. border-color with a value other than transparent

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

Why are my divs overlapping?

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;
}

Why use id instead of class?

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

Why do margins overlap?

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.

Ready to turn your passion into profit?

Join the waiting list for our website builder with AI implementation.

If my post helped you out, and you're feeling generous, feel free to buy me a coffee.

Buy Me a Coffee