Sometimes the content shown is too large to be visible in a single line or division of the website. So, to avoid loss of that information we can use overflow property.
&nbsp;
<h4 dir="ltr">Overflow Visible</h4>
This makes the whole text visible irrespective of the container size.
Eg:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-overflow/visible overflow.webp" width="1500" height="981">
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-overflow/visible overflow output.webp" width="600" height="1075">
<h4 dir="ltr">Overflow Hidden</h4>
It hides the content which doesn&rsquo;t fit the box.
Eg:
<pre class="language-css"><code>div {
 background-color: rebeccapurple;
 width: 200px;
 height: 60px;
 border: 2px solid;
 overflow: hidden;
 }</code></pre>
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-overflow/hidden overlfow output.webp" width="600" height="485">
<h4 dir="ltr">Overflow Scroll</h4>
It adds an automatic scroller in the container so for the seeing the content it can be scrolled without affecting the container dimensions.
&nbsp;
Eg:
<pre class="language-css"><code>div {
 background-color: rebeccapurple;
 width: 200px;
 height: 60px;
 border: 2px solid;
 overflow: scroll;
 }</code></pre>
&nbsp;
Output:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-overflow/scroll overflow output.webp" width="600" height="480">
<h4 dir="ltr">Overflow Auto</h4>
It is quite similar to scroll but the scroller is only added when the content starts getting out of the container. Mostly this option is used to avoid unnecessary scroll bars if the content already is within the content dimensions.
&nbsp;

CSS Overflow

As we know CSS follows a style sheet sequence to decide the order of rules to be applied on the website, and inline CSS overrides all the rules of the internal and external stylesheet.&nbsp;
&nbsp;
But if we want a particular rule to be prioritised at all costs in the stylesheet we can use !important tag with it.
&nbsp;
Syntax:&nbsp;
<pre class="language-css"><code>{property:value !important;}</code></pre>
&nbsp;

CSS !important

Just like how &ldquo;wrap through&rdquo; works in MS Word, the float property allows the balance between text and the image shown beside it.&nbsp;
&nbsp;
Eg:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-float/float none.webp" width="1500" height="969">
&nbsp;
This is how your image looks without float property.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-float/float none output.webp" width="1901" height="687">
When we add, &ldquo;float: right;&rdquo;, the style of the website changes drastically.
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-float/float right output.webp" width="1901" height="585">

CSS Float

CSS 2D Transform

CSS Transitions

CSS Border Images

CSS Gradients

CSS Inherit

CSS Shadows

CSS ToolTip Text

CSS Masking

CSS Pagination

CSS Media Queries Advanced

CSS Animations

CSS Display

CSS FlexBox

CSS Grid

CSS Media Queries

Questions

CSS Colors

CSS Backgrounds

CSS Borders

CSS Images

CSS Video Embedding

CSS Fonts

CSS Text Styling

CSS Box Model

CSS Padding

CSS Margin

CSS Hover

CSS Cursors

CSS List Styles

CSS Links

CSS Combinators

CSS Pseudo-classes

CSS Buttons

CSS Maths Functions

CSS Size

CSS Positioning

CSS Z-index

CSS Forms

CSS Navigation Bar

Information & History 

Your first CSS website

How CSS works?

Syntax of CSS

Ways to add CSS

CSS Selectors

CSS Comments

CSS Specificity