CSS Properties

Common CSS Properties

CSS properties allow you to control virtually every visual aspect of your web pages. This page demonstrates some of the most commonly used properties and their effects.

Border Properties

The border property allows you to specify the style, width, and color of an element's border.

Solid

Dashed

Dotted

Double

                .border-solid { border: 3px solid #3498db; }

                .border-dashed { border: 3px dashed #3498db; }

                .border-dotted { border: 3px dotted #3498db; }

                .border-double { border: 3px double #3498db; }

Background Properties

Background properties let you control the background of elements with colors, gradients, or images.

Color

Gradient

Image

                .bg-color { background-color: #e74c3c; }

                .bg-gradient { background: linear-gradient(to right, #3498db, #2ecc71); }

                .bg-image { background-image: url('images/pattern.png'); background-size: cover; }

Text Alignment

The text-align property specifies the horizontal alignment of text in an element.

This text is aligned to the left.

This text is centered.

This text is aligned to the right.

This text is justified. It will stretch the lines so that each line has equal width. This is often used in newspapers and magazines. Notice how the spacing between words is adjusted to ensure the text spans the entire width.

                .text-left { text-align: left; }

                .text-center { text-align: center; }

                .text-right { text-align: right; }

                .text-justify { text-align: justify; }

Display Properties

The display property specifies the display behavior of an element.

Inline Element Another Inline Element

Inline-Block 1

Inline-Block 2

Flexbox Example:

Flex Item 1

Flex Item 2

Flex Item 3

                .display-block { display: block; width: 100%; }

                .display-inline { display: inline; }

                .display-inline-block { display: inline-block; width: 150px; }

                .display-flex { display: flex; justify-content: space-between; }

Position Properties

The position property specifies the type of positioning method used for an element.

Parent (position: relative)

Child (position: absolute)

                .pos-relative { position: relative; height: 150px; width: 100%; }

                .pos-absolute { position: absolute; top: 20px; right: 20px; }

Float Properties

The float property specifies whether an element should float to the left or right, or not at all.

Float Left

Float Right

This text flows around the floated elements. Notice how the text wraps around the boxes that are floated to the left and right. This technique is commonly used for text wrapping around images.

                .float-left { float: left; margin-right: 15px; }

                .float-right { float: right; margin-left: 15px; }

                .clear-both { clear: both; }

Transform Properties

The transform property applies a 2D or 3D transformation to an element. (Hover over the boxes)

Scale

Rotate

Skew

                .transform-scale:hover { transform: scale(1.2); }

                .transform-rotate:hover { transform: rotate(45deg); }

                .transform-skew:hover { transform: skew(10deg); }

Transition Properties

The transition property specifies the duration and timing function of the transition effect. (Hover over the box)

Hover Me

                .transition-demo { transition: all 0.5s ease; }

                .transition-demo:hover { background-color: #e74c3c; transform: translateY(-10px); }