Class - 3

Css Layouts

Other Properties

The Display Property

display: none:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiamsemper diam at erat pulvinar, at pulvinar felis blandit.

This is a paragraph tag

Vestibulum volutpat tellus diam, consequat gravida liberorhoncus ut.

display: inline:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiamsemper diam at erat pulvinar, at pulvinar felis blandit.

This is a paragraph tag

Vestibulum volutpat tellus diam, consequat gravida liberorhoncus ut.

display: block:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiamsemper diam at erat pulvinar, at pulvinar felis blandit.

This is a paragraph tag

Vestibulum volutpat tellus diam, consequat gravida liberorhoncus ut.

display: inline-block:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiamsemper diam at erat pulvinar, at pulvinar felis blandit.

This is a paragraph tag

Vestibulum volutpat tellus diam, consequat gravida liberorhoncus ut.

Width and Max-Width

This div element has width: 768px;

This div element has max-width: 768px;

See the Result: Drag the browser window to smaller than 768px wide, to see the difference between the two divs!

The Position Property

position: static;

The Parent1 element has position: static, and will remain in the natural flow of the page. It will NOT act as anchor point for the absolutely positioned Child1 element:

Parent1: position: static.
Child1: position: absolute, right: 15px, top: 70px

position: relative;

The Parent2 element has position: relative, and will remain in the natural flow of the page. It will also act as anchor point for the absolutely positioned Child2 element:

Parent2: position: relative.
Child2: position: absolute, right: 15px, top: 70px

position: absolute;

The Parent3 element has position: absolute, and will NOT remain in the natural flow of the page. It will position itself according to the closest positioned ancestor. It will also act as anchor point for the absolutely positioned Child3 element:

Parent3: position: absolute, top: 750px, right: 15px.
Child3: position: absolute, right: 15px, top: 70px

position: fixed;

The Parent4 element has position: fixed, and will NOT remain in the natural flow of the page. It will position itself according to the viewport. It will also act as anchor point for the absolutely positioned Child4 element:


Like the header

The Z-Index

1
Z-index 1

If you set z-index (-1) of the Z-index 1 div, then it will be placed behind the 1 div.

Overflow

Overflow: visible

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Overflow: scroll

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Overflow: auto

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Overflow: X and Y

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Float and Clear

Without Clearfix

This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

With New Modern Clearfix

Add the clearfix hack to the containing element, to fix this problem:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

Horizontal & Vertical Align

Center with position and transform

In this example, we use positioning and the transform property to vertically and horizontally center the div element:

I am vertically and horizontally centered.

Combinators

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Child Selector

The child selector (>) selects all elements that are the children of a specified element.

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div (inside a section element).

Paragraph 4 in the div.

Paragraph 5. Not in a div.

Paragraph 6. Not in a div.

Adjacent Sibling Selector

The + selector is used to select an element that is directly after another specific element.

The following example selects the first p element that are placed immediately after div elements:


Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3. After a div.

Paragraph 4. After a div.

Paragraph 5 in the div.

Paragraph 6 in the div.

Paragraph 7. After a div.

Paragraph 8. After a div.

General Sibling Selector

The general sibling selector (~) selects all elements that are next siblings of a specified element.


Paragraph 1.

Paragraph 2.

Paragraph 3.

Some code.

Paragraph 4.

Pseudo Classes

Styling a link depending on state

This is a link


Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

Attribute Selector

CSS [attribute] Selector

The links with a target attribute gets a yellow background:

Google.com disney.com wikipedia.org

CSS [attribute="value"] Selector

The link with target="_blank" gets a yellow background:

Google.com disney.com wikipedia.org

CSS [attribute|="value"] Selector

Welcome

Hello world!

Are you learning CSS?

CSS [attribute^="value"] Selector

Welcome

Hello world!

Are you learning CSS?

CSS [attribute$="value"] Selector

The first div element.
The second div element.
The third div element.

This is some text in a paragraph.

CSS [attribute*="value"] Selector

The first div element.
The second div element.
The third div element.

This is some text in a paragraph.

Form

Using CSS to style an HTML Form

Male Female