Learn CSS

Modifying Text

Vertical Align

This is a sub line text example.

This is a super line text example.

This is a pixel example.

Here's another pixel example.

Text Decoration

This is underlined text.

This is overlined text.

This is lined-through text.

Text Indent

This text will be indented.
Notice that only the first line is affected by the text-indent property.

Text Shadow

The quick brown fox jumps over the lazy dog

This Text has two shadows.

Text Transform

This transforms only the first character in each word to uppercase

This transforms ALL characters to lowercase.

This transforms all characters to uppercase.

Letter-Spacing

This paragraph is letter-spaced at 4px.

This paragraph is letter-spaced at -1.5px.

Word-Spacing

This paragraph is word-spaced at 16px.

This paragraph is word-spaced at -8px.

Word-Wrap

Normal: Antidisestablishmentarianism

With Word-Wrap: Antidisestablishmentarianism

White-Spacing

Value	Description	Example
Normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
Nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered
Pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the < pre> tag in HTML
Pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
Pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

More CSS Properties

The Box Model

Here's how the Box's dimensions are calculated:

Borders

This is a dotted border.

This is a dashed border.

This is a double border.

This is a grooved border.

This is a ridged border.

This is an inset border.

This is an outset border.

Styling Lists

Disc (default) style
Square style
Circle style
Lower-Greek style
Style-Type set to none
Lower-Roman style
Upper-Roman style
Deciamal-Zero style
Deciamal style
Lower-Alpha style
Upper-Alpha style
Custom Image style

Styling Links

Clicking on the links will take you to a Blank Page.

Cupidatat veniam in elit anim dolore tempor sit enim sint eu cillum ex. Eu ad aute dolor aliquip dolore nisi ad. Adipisicing Another Link minim non est sunt reprehenderit eu pariatur cillum irure Lorem magna cillum eu.

Mouse Cursors

Don't even try to hover over this text!

Background Images

Background images have many more properties that can be customized. The most important ones will be showcased in the rest of this section. Let's start:

The standard value for background images' image-attach property is scroll. Changing the value to fixed instead of scroll, will lock the image to it's position instead of it moving with the page.
That's why the background-image of this section has a parallax effect when the page is scrolled.

Background-Repeat

The standard value is repeat. Other possible values are repeat-x, repeat-y and no-repeat.
The following boxes show examples for all values in the listed order.

Background-Size

The standard value is auto. Other possible values are cutom values, contain and cover.
The following boxes show examples for all values in the listed order. Hover over marked images for more details.

The image will be displayed in its original size, if this property is set to auto or not specified.

Use the slider to change the background-image's size:

Current Value:

The image will grow or shrink proportionally, but both width and height will not exceed the container's dimensions.

The image is scaled to fit the entire container; however, if that has a different aspect ratio, the image will be cropped.

Multiple Background Images

Multiple background images are specified using a comma-separated list of values for the background-image property. The first image will appear on the top, the last on the bottom.

Make sure to use other properties with comma-separated values aswell, in order to achieve the desired look.

Background-Clip

The standard value is border-box. Other possible values are padding-box and content-box.
The following boxes show examples for all values in the listed order.

The background is painted to the outside edge of the border, if this property is set to border-box or not specified.

The background is painted to the outside edge of the padding.

The background is painted within the content box.
Change the content box's size by changing the padding: Current Padding:

Positioning and Layout

Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Fixed positioned elements are fixed "on the screen" and therefore scroll with the page (eg. nav-bars or pop-ups).
A relative positioned element is positioned relative to its normal position. The properties top, right, bottom, and left can be used to specify how the box will be shifted, although a blank space will be left at it's normal position.
An absolute positioned element is positioned relative to the first parent that has a position other than static and is removed out of the normal flow.

Visibilty

Hover to make the word IRIDOCYCLITIS visible. The space for invisible elements is always preserved.

Overflow

The overflow property is set to auto. Customizing the scrollbars is always possible.

This is the most recommended setting.

The overflow property is set to scroll. Customizing the scrollbars is always possible.

This is a placeholder text.

The overflow property is set to hidden. Hover to see a practical application. This text dosn't fit in the box because it is too long.

This is very handy for hiding slide-up elements.

The overflow property is set to it's standard value visible. Overflowing parts will not be respected in the document flow.

Z-Index

Elements with a higher z-value will be drawn on top of the ones with lower z-values, regardless of the order in the HTML.
The z-index works only on positioned elements (position: absolute, relative, or fixed).

Floating

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Elements are floated horizontally, meaning that an element can only be floated left or right, not up or down. It is highly recommended to add a margin to images so that text does not get too close to the image.

Compare the images' positions in the HTML and how the text wraps around the images. Hover over them to see, how the text wraps around their borders.

This paragraph wraps around floating elements normally. However, for more specific wrapping settings...

Make use of the clear property, that prevents elements to wrap around other floating elements. This paragraph for instance, is set to clear on the right side only. That's why it's pushed under the right image, but still floats around the left one.

Placing several floating elements after another, will make them float next to each other if there's enough room.

That's why this entire paragraph dosn't wrap around the image.

FlexBox

In consectetur nostrud on cupidatat esse elit incididunt duis pariatur deserunt. Anim et nostrud fugiat officia nisi nisi consequat consequat enim ut.

Sunt et Lorem id esse. Minim Lorem do eiusmod non elit proident culpa nulla ea aliquip sunt consequat duis. Voluptate non cupidatat excepteur minim incididunt nostrud sit esse. Nulla elit mollit irure et incididunt consectetur excepteur qui laborum. Eu ex pariatur eu in nulla deserunt labore in.

In consectetur nostrud on cupidatat esse elit incididunt duis pariatur deserunt. Anim et nostrud fugiat officia nisi nisi consequat consequat enim ut.

Sunt et Lorem id esse. Minim Lorem do eiusmod non elit proident culpa nulla ea aliquip sunt consequat duis. Voluptate Guide cupidatat excepteur minim incididunt nostrud sit esse. Nulla elit mollit irure et incididunt consectetur excepteur qui laborum. Eu ex pariatur eu in nulla deserunt labore in.

Laborum duis nisi duis velit. Labore reprehenderit tempor elit nostrud ut voluptate. Quis qui velit non sit eu pariatur ullamco in proident magna ad. Adipisicing et anim Lorem non cupidatat pariatur dolore non.

Customize Current Sub-Division

Values:

CSS3 and even more CSS Properties

First of all...

Rounded Corners!

And they're
customizable too!

Corners can be so round, you get a circle:

wow.

Pseudo Classes

Pseudo-Classes let you access elements in the document tree more easily. They always start with a colon(:).
Here are some examples using the

:first-child and :last-child classes

First paragraph

Second paragraph

Third paragraph

Fourth paragraph

:nth-child() class

First paragraph

Second paragraph

Third paragraph

Fourth paragraph

:hover class

Hover me!

Pseudo Elements

Pseudo-Elements are used to select specific parts of an element. They always start with a double colon(::).
Here are some examples using the

::first-line pseudo-class

Only the first line will be red. Laborum nisi duis dolore ipsum culpa tempor laborum ad ullamco.

::first-letter class

The first letter will be styled only.

::selection class

[ Select me ]
Selection works with the color, background and text-shadow properties only.

See more on the topic

::before and ::after classes

The black text is in the HTML. Notice, how you cannot select the colored parts.

Importing custom fonts

Go to Google Web Fonts and choose fonts of your liking. Just embed them by adding link href=" [link given to you] " rel="stylesheet" in the head of the HTML and reference the fonts by their name in CSS using the font-family property.
Note that different fonts will have different sizes, which should be fitted to the context's size.

Find further instructions and tips here. Alternativly you can import local fonts from your computer with the @font-face property, although it is is highly unadvisable.

Examples using custom fonts

The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.

Opacity

The opacity property value must be a number between 1 (fully opaque) and 0 (fully transparent).

Play around with the slider to change the opacity:

Current Value:

Gradients

Linear

Normal

Colorstops

Rotation

Repeating

Radial

Normal

Shape: Circle

Position

Colorstops

Transitions and Animations

What can be animated?	When should animations be used?
Generally, you should only animate properties that have numeric values to get smooth transitions between states. This article explores performance-differences between animated properties, which should be considered on larger websites.	Animations can make a website more appealing, but shouldn' t be overused. As a rule of thumb, animations are only useful to give the viewer orientation or visual feedback, or indicate functional change, new elements or system status. See examples of the these cases here.

Transitions are ideal for one-time-use movements that only have two keyframes: start and end.
The standard template goes as follows: transition: property duration timing-function delay ;
Not all values must be included, not even the property value. Also make use of cubic-bezier-functions for an eye-catch.

Animations give you more playback options. Written as keyframe rules, animations can be reused and are more versatile since one can add as many keyframes as needed.
The standard template goes as follows: animation: name duration timing-function delay iteration-count direction ;
Not all values must be included, not even the property value.

Transitions

Width extends out to max and element is skewed by -10deg on hover

transform: rotate(-2deg) scale(1.1) on hover

The element moves using the translate() method.
You could also use 'top', 'bottom', 'left' and 'right' to move relative or absolute positioned elements.

Hover me for more info!

Animations

Colorchange that moves forwards then backwards and loops twice on hover

Here's a dropdown-menu example that uses different 3D-Transforms:

Style 1
- One
- Two
- Three
- Four
Style 2
- One
- Two
- Three
- Four
Style 3
- One
- Two
- Three
- Four

Here's a notification example that pops onto the screen:

Textytext