CSS Dimension,CSS Display Property,CSS float and CSS Align Property

0 108

CSS Dimension Display Property float Align Property Elements

in this tutorial, we will talk on CSS Dimension Display Property float Align Property Elements

Dimension

CSS Dimension property control height and width of and element.

CSS Dimension Properties..

Property Values Description
height Auto "Length" "%" "inherit" height property will define height of element.
max-height none "Length" "%" "inherit" max-height property will define max height of element.
max-width none "Length" "%" "inherit" max-width property will define max width of element.
min-height Length "%" "inherit" min-height property will define minimum height of element
min-width Length "%" "inherit" min-width property will define minimum width of element.
width Auto "Length" "%" "inherit" width element property defines width of an element.

CSS Display Property

Display property

Through display property we can control page layout it is important property to hide or show element through java in HTML page.
Display property specifies that how to show an element in a page.

Block-level Elements

Block level elements always take full width available by starting on a new line.

Example of block level elements are

  • <div>
  • <h1>
  • <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements

Inline Elements takes only width as much as necessary and it does not start on a new line.

Examples of inline elements are.

  • <span>
  • <a>
  • <img>

Display:none;

Display non property used to hide and show element with JavaScript.

Hide an Element – display:none or visibility:hidden?

By using display:none; we can hide any element is HTML page.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Display none property</title>

<style>
p {
display:none;
}
</style> 

</head>
<body>

<h1>this example will hide paragraph,</h1>
<p>This example explain about display property.</p>

</body>
</html>

Visibility:hidden also do the same work it will hide the element but it will take space on the page as before.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS visibility hidden property</title>

<style>
p {
visibility:hidden;
}
</style> 

</head>
<body>

<h1>visibility hidden hide's the paragraph,but takes space on page as before...</h1>
<p>This example explain about display property.</p>

</body>
</html>

CSS float

With float property, we can float our element on the page right or left to give the specific place on a page.

Float property

For example, if we need text around the image or while creating nav in HTML, we use float property on an image or on li list to float left or right.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Float property</title>

<style>
img {
float:left; 
}
</style> 

</head>
<body>

<img src="free_learn_css3_tutorials.gif" width="285" height="290" alt="css"/>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

</body>
</html>

The Clear property

In CSS clear property used to control the behavior of floating element.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS clear property</title>

<style>
img {
float:left; 
}
p.clear {
clear: both; 
}
</style> 

</head>
<body>

<img src="free_learn_css3_tutorials.gif" width="100" height="110" alt="css"/>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

</body>
</html>

The clearfix Hack – overflow: auto;

To stop any element which is floating outside the container overflow: auto; is used to stop its floating outside the container.

CSS Align Property

CSS Align

We can use several properties in CSS to align any text or element like margin:auto; will specify our element in horizontally in the center of within its container.

CSS align using margin

Through margin property, we can be an element within its container.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS align</title>

<style>
.paragraph{
margin: auto;
width: 30%;
border:2px solid indigo;
padding: 15px;
}
</style> 

</head>
<body>

<p class="paragraph">This example explains css align.</p>

</body>
</html>

Using position

Using position property we can align out element right and left. position: absolute; used to align.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS position property</title>

<style>
.paragraph{
position: absolute;
margin-left:150px;
margin-right:150px;
border:1px solid indigo;
}
</style> 

</head>
<body>

<p class="paragraph">This example explains position property.</p>

</body>
</html>

Using float Right and left alignment

Float property also can use to align Right and left.while using float property always define margin and padding for body This will avoid visual differences in different browsers.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Float Right and left alignment</title>

<style>
img {
float:left; 
}
</style> 

</head>
<body>

<img src="free_learn_css3_tutorials.gif" width="285" height="290" alt="css"/>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

</body>
</html>

Comments

comments

Leave A Reply

Your email address will not be published.