Categories
JavaScript Answers

How to load up CSS files using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to load up CSS files using JavaScript.

In this article, we’ll look at how to load up CSS files using JavaScript.

How to load up CSS files using JavaScript?

To load up CSS files using JavaScript, we create a link element with createElement.

For instance, we write

const element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.head.appendChild(element);

to create a link element with createElement.

Then we call setAttribute to set the rel, type, and href attribute values.

Finally, we call document.head.appendChild to append the link element as the last child element of the head element.

Conclusion

To load up CSS files using JavaScript, we create a link element with createElement.

Categories
CSS

How to set up fixed width for td with CSS?

Labrador retriever puppy walking on green grass

To set up fixed width for td with CSS, we set the width property.

For instance, we werite

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width: 8.33%">Col 5</th>
</tr>

to set the width of each th element to the width we want with the width property.

Categories
CSS

How to set CSS text-overflow in a table cell?

Labrador retriever puppy walking on green grass

To set CSS text-overflow in a table cell, we set the max-width of the cell.

For instance, we write

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

to set the max-width to 100px set the max width of the cells.

And we add the text-overflow: ellipsis; and white-space: nowrap; to keep the text to one row and put ellipsis after the truncated text.

We then add overflow: hidden; to hide text overflowing outside the cells.

Categories
CSS

How to align an element to the bottom with flexbox with CSS?

Labrador retriever puppy walking on green grass

To align an element to the bottom with flexbox with CSS, we set the flex-grow property.

For instance, we write

p {
  flex-grow: 1;
}

to make the p element fill all available space with flex-grow: 1;.

Categories
CSS

How to fix CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue?

Labrador retriever puppy walking on green grass

To fix CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue, we change the overflow-x and overflow-y properties.

For instance, we write

div {
  overflow-x: visible;
  overflow-y: clip;
}

to set overflow-y to clip to stop extra vertical scrollbar from showing in the wrapper element.