Some Basic But Advanced Topics In CSS

Learn Advanced CSS online

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

so hi everyone welcome back i news article in this article i am going to tell about Some Basic But Advanced Topics In CSS these topics are the topics that came in the basic tutorials but these play an important role in CSS advanced as well lets take a look in the basic topics. As you know that CSS help us very much to style on web pages but the problem is we are not familiar to some basic and some advanced topics of CSS and this problem harm us when we are going to create a beautiful web design to web development.

Some Basic But Advanced Topics In CSS

In so many causes web designer give you a amazing design but we are not understand how to do that and at this point CSS help us very much so lets take a look on all these topics

OverFlow In CSS

as you know that The CSS overflow property controls what happens to content that is too big to fit into an area. The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values

1. visible - Default. The overflow is not clipped. The content renders outside the element's box
2. hidden - The overflow is clipped, and the rest of the content will be invisible
3. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
4. auto - Similar to scroll, but it adds scrollbars only when necessary

Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

CSS Layout - float and clear

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

The clear Property

The clear property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent

The most common way to use the clear property is after you have used a float property on an element.

When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

The following example clears the float to the left. Means that no floating elements are allowed on the left side (of the div):

No Comments Yet