Chapter 03, Learn how to display various elements on your HTML page
To control how various elements are displayed on your HTML, we can use the CSS display property.
Display property
<![CDATA[
.element {
display: block;
}
]]>
The CSS display property has three values.
Value 1: block, which is the default value for various elements including heading elements (<h1> through <h6>), <p>, <div>, and <footer>.
Value 2: inline, which is the default value for some elements,such as <em>, <strong>, and <a>.
Value 3: inline-block , which is the default value for <img> tags.
CSS Display property values
<![CDATA[
.container1 {
display: block;
}
.container2 {
display: inline;
}
.container3 {
display: inline-block;
}
]]>
1- Block: Elements take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted.
2- Inline: Elements take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted.
3- Inline-block: Elements can appear next to each other, and can have their width and height manually adjusted.
z-index property
<![CDATA[
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: -1;
}
]]>
The CSS z-index property specifies how far back or how far forward an element will appear on a web page when it overlaps other elements.
The z-index property uses integer values, which can be positive or negative values. The element with the highest z-index value will be at the foreground, while the element with the lowest z-index value will be at the back.
In the above example element1 will overlap element2.
CSS position
<![CDATA[
.element {
position: absolute;
}
]]>
Value 1: absolute, this will enable an element to ignore sibling elements and instead be positioned relative to its closest parent element that is positioned with relative or absolute. The absolute value removes an element entirely from the document flow. By using the positioning attributes top, left, bottom and right, an element can be positioned anywhere as expected.
Value 2: relative, this will enable an element to be positioned relative to where it would have originally been on a web page. The offset properties can be used to determine the actual position of the element relative to its original position. Without the offset properties, this declaration will have no effect on its positioning, it will act as the default value static of the position property.
CSS float
<![CDATA[
/* Float to the left side of the container. */
.left {
float: left;
}
/* Float to the right side of the container. */
.right {
float: right;
}
]]>
To determine how far left or how far right an element should float within its parent element we use the CSS float property. The value left floats an element to the left side of its container and the value right floats an element to the right side of its container. For the property float, the width of the container must be specified or the element will assume the full width of its containing element.
CSS clear
<![CDATA[
/*No other elements within the same containing element are allowed to float on the left side of this element.*/
.element {
clear: left;
}
/*No other elements within the same containing element are allowed to float on the right side of this element.*/
.element {
clear: right;
}
/*No elements within the same containing element are allowed to float on either side of this element.*/
.element {
clear: both;
}
/*Other elements within the same containing element are allowed to float on both side of this element.*/
.element {
clear: none;
}
]]>
To specify how an element should behave when it bumps into another element within the same containing element we use the CSS clear property.
The 'clear' is usually used in combination with elements having the CSS float property. This determines on which sides floating elements are allowed to float.
MS Access
1109
C++
1222
HTML
584
JavaScript
616
Vbscript
873
Oracle
473
VC++
875
SQL
2959
XML
514
Java
814
Perl
455
Linux
451
