Category: CSS

Sometimes, we want to apply CSS to iframe.

In this article, we’ll look at how to apply CSS to iframe.

How to apply CSS to iframe?

To apply CSS to iframe, we set the style attribute.

For instance, we write

<iframe
  name="iframe1"
  id="iframe1"
  src="empty.htm"
  frameborder="0"
  border="0"
  cellspacing="0"
  style="border-style: none; width: 100%; height: 120px"
></iframe>

to add the style attribute with the styles for the iframe.

Conclusion

To apply CSS to iframe, we set the style attribute.

Sometimes, we want to center text (horizontally and vertically) inside a div block with CSS.

In this article, we’ll look at how to center text (horizontally and vertically) inside a div block with CSS.

How to center text (horizontally and vertically) inside a div block with CSS?

To center text (horizontally and vertically) inside a div block with CSS, we use flexbox.

For instance, we write

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

to make the element with ID container a flex container with display: flex;.

Then we center items horizontally with justify-content: center;.

We center items vertically with align-items: center;.

Conclusion

To center text (horizontally and vertically) inside a div block with CSS, we use flexbox.

Sometimes, we want to add HTML entities using CSS content.

In this article, we’ll look at how to add HTML entities using CSS content.

How to add HTML entities using CSS content?

To add HTML entities using CSS content, we use escapedd Unicode.

For instance, we write

.breadcrumbs a:before {
  content: "\0000a0";
}

to set the content property to an escaped Unicode character.

Conclusion

To add HTML entities using CSS content, we use escapedd Unicode.

Sometimes, we want to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript.

In this article, we’ll look at how to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript.

How to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript?

To select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript, we can add a stylesheet dynamically.

For instance, we write

const str = "bar";
document.styleSheets[0].addRule("p.special:before", 'content: "' + str + '";');

to add a style rule for the part of the p element with class special.

We set the content property to the str string.

Conclusion

To select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript, we can add a stylesheet dynamically.

Sometimes, we want to make body have 100% of the browser height with CSS.

In this article, we’ll look at how to make body have 100% of the browser height with CSS.

How to make body have 100% of the browser height with CSS?

To make body have 100% of the browser height with CSS, we set its height to 100%.

For instance, we write

html,
body {
  height: 100%;
}

to set the html and body element’s heights to 100% to make them fill the browser’s height.

Conclusion

To make body have 100% of the browser height with CSS, we set its height to 100%.