Category: CSS

To add a one-way transition with CSS, we use the transition property.

For instance, we write

input {
  background: white;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}

to transition the background to white with background: white;.

And we add the transition for 0.5 seconds with transition: background 0.5s;.

To add line break using only CSS, we display elements as block elements.

For instance, we write

h4 {
  display: block;
}

to display h4 elements as block elements.

To display HTML form as an inline element, we remove the padding and margin from the form element.

For instance, we write

<form style="margin: 0; padding: 0">
  <p>
    Read this sentence
    <input style="display: inline" type="submit" value="push this button" />
  </p>
</form>

to add a from and set the margin and padding to 0.

And we display the input as an inline element with display: inline.

To select an element that has a certain class with CSS, we use a period.

For instance, we write

.myClass {
  color: green;
}

to select the elements with class myClass with .myClass.

To change the bullet color of an HTML list without using a span with CSS, we set the list-style-image property.

For instance, we write

li {
  list-style-image: url(images/yourimage.jpg);
}

to set the list-style-image property to url(images/yourimage.jpg) to set the bullet to an image.

To fix "cursor: pointer" effect in CSS not working, we should set pointer-events to auto.

For instance, we write

.about > span {
  cursor: pointer;
  pointer-events: auto;
}

to add pointer-events: auto; to enable mouse events on the span.

Then we add cursor: pointer; to set the cursor to a pointer.

To get flexbox to include padding in calculations with CSS, we use flex-grow with padding.

For instance, we write

.item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

to make the elements with class item a flex container with display: flex;.

We add flex-direction: column; to make the flex direction vertical.

We add flex: 1; to make it stretch with flex-grow with padding being taken accoount in the height calculation.

And then we add padding with padding: 0 10px 10px 0;

To add horizontal list items with CSS, we display the li elements as inline block elements.

For instance, we write

<ul>
  <li><a href="#">some item</a></li>
  <li><a href="#">another item</a></li>
</ul>

to add a ul with some li elements.

Then we write

ul > li {
  display: inline-block;
}

to make the li’s display as inline block elements to make them display horizontally.

To apply styles to cells of the first row with CSS, we use the first-child selector.

For instance, we write

.category_table tr:first-child td {
  vertical-align: top;
}

to set the cells of the first table row of the tables with class category_table to have text aligned to the top with vertical-align: top;.

To add space between cells (td) using CSS, we set the border-spacing property.

For instance, we write

table {
  border-spacing: 10px;
}

to add spacing to the cells in the table with border-spacing: 10px;.