CSS Basic and Esoteric

Fonts

Blue Verdana 200%

Red Courier 125%

Borders

Border 1px solid black

Border 1px solid black with padding 30px

Border 1px solid black with margin 50px

Colors

Class style error for paragraph

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Display vs Visibility

This is a visible paragraph

Notice that the paragraph element with "display: none;" does not take up any space.

This is another visible paragraph

This is an invisible paragraph

Notice that the paragraph element with "visibility: hidden;" still takes up space!

Float

In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.

Overflow

The overflow property is set to visible.The overflow property specifies what happens if content overflows an element's box.

The overflow property is set to hidden. The overflow property specifies what happens if content overflows an element's box.

The overflow property is set to scroll. The overflow property specifies what happens if content overflows an element's box.

Positioning

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

An element with position: relative; is positioned relative to its normal position.

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled

This div element has position: relative.

This div element has position: absolute.

Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.