 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson-38.
In the previous lesson, we have learned to design a web page layout using CSS float property.
Today we will study CSS overflow property.
CSS overflow property
We know that we can define dimensions for an element to be displayed in a web page. If contents of an element do not fit in the size specified then they overflow. We can specify how to display contents in this situation using CSS overflow property.CSS overflow visible
Let us write CSS overflow property in our script. Open a new Notepad file. In this file write the following style.
.heading1 {
text-align: center;
color:red;
}
For para1 write the following style.
.para1 {
background-color: rgb(200 200 200);
width: 35vw;
height: 9vw;
border: 0.5vw solid red;
overflow:visible;
}
Here we have given height 9vw and width 35vw for displaying the paragraph. Also we have specified
overflow:visible;
Therefore, if contents of paragraph overflow then they will be displayed in default manner.
CSS overflow hidden
If we specify value "hidden" for overflow property then the text that overflows is not displayed.
Copy all above style written for para1. Name this as para2. In para2 change overflow property to hidden.
overflow: hidden;
In body for second paragraph write
<p class="para1">
You can open the PDF file and use for copying text written in para1.
Copy same paragraph once again. For this new paragraph write
<p class="para2">
 |
| Figure 38-1 CSS overflow property - visible and hidden |
Save this file as "Lesson-38-1" and "Lesson-38-1.html". Double click on HTML document. See the output.
 |
| Figure 38-2. CSS overflow property - visible and hidden |
Note that in the second paragraph content that overflows is visible and in the third paragraph it is not displayed.
CSS Overflow scroll
When we specify scroll for CSS overflow property, scroll bars are displayed around the dimension that we specify for that element. As we scroll, we can see the contents of the element.
CSS overflow auto
When we specify this value, scroll bars are automatically displayed on if contents overflow, otherwise scroll bars are not displayed.
Let us write Overflow scroll in our script. Once again open a new Notepad file. Copy all code from lesson-38-1. Copy the style written for para2. Now in the style of para1 make only one change. Replace previous "overflow visible" with "overflow scroll".
We have written third paragraph in lesson-38-1. Delete that paragraph. Our final code will look as shown in the following figure. You can download PDF file of this source code and use it.
Now save this file as "Lesson-38-2" and "Lesson-38-2.html".
 |
| Figure 38-3. CSS overflow - scroll |
Double click on HTML document and see the output.
 |
| Figure 38-4. CSS overflow property - scroll |
We have displayed a red border for our element, so that we can clearly identify the space that we have mentioned in our code for this element. Note that now a scroll bar is displayed. You can scroll and read all contents of the element.
CSS Overflow x and overflow y
Note an important point. We can specify overflow-x or overflow-y for any overflow property. For example
overflow-x: scroll; or overflow-x: visible; or overflow-x: hidden;
In this case these properties are applied horizontally.
Similarly if we specify overflow-y then overflow properties are applied vertically.
Important Points:
1. CSS overflow property specifies what to do if contents of an element do not fit in the area defined for that element and overflow.
2. Three values for CSS overflow property are visible, hidden, and scroll.
3. Scroll displays a scroll bar so that one can scroll through the contents of the element.
Lesson-37 Lesson-39
