CSS Examples

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

Try it Yourself »

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:

Example

a.highlight:hover {
color: #ff0000;
}

Try it Yourself »

Hover on div

An example of using the :hover pseudo-class on a <div> element:

Example

div:hover {
background-color: blue;
}

Try it Yourself »

Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):

Example

p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}

Try it Yourself »

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first p element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

p:first-child {
color: blue;
}

Try it Yourself »

Match the first i element in all p elements

In the following example, the selector matches the first <i> element in all <p> elements:

Example

p i:first-child {
color: blue;
}

Try it Yourself »

Match all i elements in all first child p elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

Example

p:first-child i {
color: blue;
}

Try it Yourself »

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for <q> elements with lang="no":

Example

<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

Try it Yourself »

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no "required" attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a "readonly" attribute specified
:read-write	input:read-write	Selects <input> elements with no "readonly" attribute
:required	input:required	Selects <input> elements with a "required" attribute specified
:root	root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::selection	p::selection	Selects the portion of an element that is selected by a user

Pseudo-classes

Add different colors to a hyperlink
Add other styles to hyperlinks
Use of :focus
:first-child - match the first p element
:first-child - match the first i element in all p elements
:first-child - Match all i elements in all first child p elements
Use of :lang

Pseudo-classes explained

Pseudo-elements

Make the first letter special in a text
Make the first line special in a text
Make the first letter and first line special
Use :before to insert some content before an element
Use :after to insert some content after an element

Pseudo-elements explained

Opacity

Creating transparent images
Creating transparent images - mouseover effect
Reversed mouseover effect for transparent images
Transparent box/div
Transparent box/div with RGBA values
Creating a transparent box with text on a background image

Image opacity explained

Navigation Bars

Fully styled vertical navigation bar
Fully styled horizontal navigation bar

Navigation bars explained

Dropdowns

Dropdown text
Dropdown menu
Right-aligned dropdown menu
Dropdown image
Dropdown navigation bar

Dropdowns explained

Tooltips

Right tooltip
Left tooltip
Top tooltip
Bottom tooltip
Tooltip with arrow
Animated tooltip

Tooltips explained

Image Gallery

Image gallery
Responsive Image gallery

Image gallery explained

Image Sprites

An image sprite
An image sprite - a navigation list
An image sprite with hover effect

Image sprites explained

Attribute Selectors

Selects all <a> elements with a target attribute
Selects all <a> elements with a target="_blank" attribute
Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"
Selects all elements with a class attribute value that begins with "top" (must be whole word)
Selects all elements with a class attribute value that begins with "top" (must not be whole word)
Selects all elements with a class attribute value that ends with "test"
Selects all elements with a class attribute value that contains "te"

Attribute selectors explained

Forms

Full-width input field
Padded input field
Bordered input field
Bottom bordered input field
Colored input fields
Focused input fields
Focused input fields 2
Input with icon/image
Animated search input
Styling textareas
Styling select menus
Styling input buttons

Forms explained

Counters

Create a counter
Nested counters 1
Nested counters 2

Counters explained

Rounded Corners

Add rounded corners to elements
Round each corner separately
Create elliptical corners

CSS3 rounded corners explained

Border Images

Create an image border around an element, using the round keyword
Create an image border around an element, using the stretch keyword
Image border - Different slice values

CSS3 border images explained

Backgrounds

Add multiple background images for an element
Specify the size of a background image
Scale a background image using "contain" and "cover"
Define sizes of multiple background images
Full-size background image (completely fill the content area)
Use background-origin to specify where the background image is positioned
Use background-clip to specify the painting area of the background

CSS3 backgrounds explained

Gradients

Linear Gradient - top to bottom
Linear Gradient - left to right
Linear Gradient - diagonal
Linear Gradient - with a specified angle
Linear Gradient - with multiple color stops
Linear Gradient - color of a rainbow + text
Linear Gradient - with transparency
Linear Gradient - a repeating linear gradient
Radial Gradient - evenly spaced color stops
Radial Gradient - differently spaced color stops
Radial Gradient - set shape
Radial Gradient - different size keywords
Radial Gradient - a repeating radial gradient

CSS3 gradients explained

Shadow Effects

Simple shadow effect
Add a color to the shadow
Add a blur effect to the shadow
White text with black shadow
A red neon glow shadow
A red and blue neon glow shadow
White text with black, blue, and darkblue shadow
Add a simple box-shadow to an element
Add color to box-shadow
Add color and blur effect to box-shadow
Create paper-like cards (text)
Create paper-like cards (polaroid images)

CSS3 shadow effects explained

Text

Specify how hidden, overflowed content should be signaled to the user
How to display the overflowed content when hover over the element
Allow long words to be able to be broken and wrap onto the next line
Specify line breaking rules

CSS3 text explained

Fonts

Use your "own" fonts in @font-face rule
Use your "own" fonts in @font-face rule (bold)

CSS3 fonts explained

2D Transforms

translate() - move an element from its current position
rotate() - rotate an element clockwise
rotate() - rotate an element counter-clockwise
scale() - increase an element
scale() - decrease an element
skewX() - skews an element along the X-axis
skewY() - skews an element along the Y-axis
skew() - skews an element along the X and Y-axis
matrix() - rotate, scale, move, and skew an element

CSS3 2D transforms explained

3D Transforms

rotateX() - rotate an element around its X-axis at a given degree
rotateY() - rotate an element around its Y-axis at a given degree
rotateZ() - rotate an element around its Z-axis at a given degree

CSS3 3D transforms explained

Transitions

Transition - change width of an element
Transition - change width and height of an element
Specify different speed curves for a transition
Specify a delay for a transition effect
Add a transformation to a transition effect
Specify all transition properties in one shorthand property

CSS3 transitions explained

Animations

Bind an animation to an element
Animation - change background-color of an element
Animation - change background-color and position of an element
Delay an animation
Run animation 3 times before it stops
Run animation for ever
Run animation in reverse direction
Run animation in alternate cycles
Speed curves for animations
Animation shorthand property

CSS3 animations explained

Images

Rounded image
Circled image
Thumbnail image
Thumbnail image as link
Responsive image
Image text (top left corner)
Image text (top right corner)
Image text (bottom left corner)
Image text (bottom right corner)
Image text (centered)
Polaroid images
Grayscale image filter
Advanced - Image Modal with CSS & JavaScript

CSS3 Images explained

Buttons

Basic CSS buttons
Button colors
Button sizes
Rounded buttons
Colored button borders
Hoverable buttons
Shadow buttons
Disabled buttons
Button width
Button groups
Bordered button group
Animated Button (Hover Effect)
Animated Button (Ripple Effect)
Animated Button (Pressed Effect)

CSS3 Buttons explained

Pagination

Simple pagination
Active and hoverable pagination
Rounded active and hoverable pagination
Hoverable transition effect
Bordered pagination
Rounded bordered pagination
Pagination with space between links
Pagination size
Pagination with space between links
Centered pagination
Breadcrumbs

CSS3 Pagination explained

Multiple Columns

Create multiple columns
Specify the gap between columns
Specify the style of the rule between columns
Specify the width of the rule between columns
Specify the color of the rule between columns
Specify the width, style and color of the rule between columns
Specify how many columns an element should span across
Specify a suggested, optimal width for the columns

CSS3 multiple columns explained

User Interface

Let a user resize the width of an element
Let a user resize the height of an element
Let a user resize both the width and height of an element
Add space between an outline and the border of an element

CSS3 user interface explained

Box Sizing

Width of elements without box-sizing
Width of elements with box-sizing
Form elements + box-sizing

CSS3 box sizing explained

Flexbox

Flexbox with three flex items
Flexbox with three flex items - rtl direction
flex-direction - row-reverse
flex-direction - column
flex-direction - column-reverse
justify-content - flex-end
justify-content - center
justify-content - space-between
justify-content - space-around
align-items - stretch
align-items - flex-start
align-items - flex-end
align-items - center
align-items - baseline
flex-wrap - nowrap
flex-wrap - wrap
flex-wrap - wrap-reverse
align-content - center
Order the flex items
Margin-right:auto;
Margin:auto; = perfect centering
align-self on flex items
Specify the length of the flex item, relative to the rest of the flex items
Create a responsive website with flexbox

CSS3 flexbox explained

Media Queries

Change the background-color to lightgreen if the viewport is 480px wide or wider
Show a menu that will float to the left of the page if the viewport is 480px wide or wider

CSS3 media queries explained

Media Queries - More Examples

The HTML page
Width from 520 to 699px - Apply an email icon to each link
Width from 700 to 1000px - Preface the links with a text
Width above 1001px - Apply email address to links
Width above 1151px - Add icon as we used before
Use the list of email links on a sidebar in a web page

CSS3 media queries examples explained

Variables var() Function

Variables in CSS should be declared within a CSS selector that defines its scope.
For a global scope you can use either the :root or the body selector.
The variable name must begin with two dashes (--) and is case sensitive!
The syntax of the var() function is as follows:
var(custom-name, value)

Example
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
CSS Variables