Category: CSS

To set width/height as a percentage minus pixels with CSS, we use calc.

For instance, we write

div {
  height: calc(100% - 18px);
}

to set the div’s height to 100% minus 18px with calc.

To center a position: fixed element with CSS, we set the transform property.

For instance, we write

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

to set the left and top to 50% to move the element near the center.

Then we add transform: translate(-50%, -50%); to move the div to the center.

To hide an element when printing a web page with CSS, we use the @media print query.

For instance, we write

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

to hide elements with class .no-print and everything inside them with display: none when the page is being printed with the @media print rule.

To change the checkbox size using CSS, we set the zoom property.

For instance, we write

<input type="checkbox" />

to add a checkbox.

Then we write

input[type="checkbox"] {
  zoom: 1.5;
}

to set the zoom to 1.5 to increase the checkbox size.

To select elements by attribute in CSS, we use the attribute selector.

For instance, we write

[data-role="page"] {
  //...
}

to select the elements with the data-role attribute equal to page.