Code has been added to clipboard!

CSS Code Examples

CSS Colors

​Assign background-color to an element using color names
Assign background-color to an element using RGB indicators
Assign background-color to an element using RGBA indicators
​Assign background-color to an element using HEX indicators
​Assign background-color to an element using HSL indicators
​Assign background-color to an element using HSLA indicators
​Specify how opaque or how transparent a color is

CSS Colors Tutorial

Backgrounds

Set background color
Use background image
Repeat background image
Specify background image position
Use background attachment property
Background shorthand example
Set multiple background images
Use shorthand to set multiple background images
Resize background image
Contain and cover background size
Set size for multiple background images
Full size background image
Specify background origin
Use background clip
Apply linear gradient for your background without specifying direction
Apply linear gradient for your background from left to right
Diagonal linear gradient from top left to bottom right
Linear gradient with a defined angle
Create linear gradient background with multiple colors (default direction)
Create linear gradient background with multiple colors from left to right
Linear gradient (left-right) with changing transparency
Create repeating linear gradient
Apply radial gradient with evenly spaced color stops
Apply radial gradient with differently spaced color stops
Set a circle shaped radial gradient
Manipulate radial gradient size parameters
Use a repeating radial gradient

CSS Background Tutorial

Borders

Set unique CSS border style to each element
Apply different CSS border style to individual walls
Specify CSS border width
Define CSS border color using different color value indicators
Use border-radius to create rounded borders
Assign individual styles to each wall of a CSS border
Use shorthand to define border-width, border-color, and border-style
Apply style to a single CSS border wall using the shorthand property
Use an image as a CSS border by stretching it
Use an image as a CSS border by repeating it
Use different slice values to create different borders from the same image

CSS Border Tutorial

Margins

Determine four different CSS margin values
Determine three CSS margin values
Determine only two CSS margin values
Define just one value for all margins to be equal
Specify all individual CSS margin values separately
Use auto value for CSS margin
Set CSS margin to inherit its value
Collapse vertical margins

CSS Margin Tutorial

Padding

Determine all four CSS padding values in one declaration
Specify CSS padding-top value individually
Specify CSS padding-right value individually
Specify CSS padding-left value individually
Specify CSS padding-bottom value individually
Use box-sizing: border-box to avoid width and padding conflict

CSS Padding Tutorial

Height & Width

Set height and width of an element using px
Set height and width of an element using %
Specify a max-width value of an element
Center an element using width and margin: auto
Understand difference between width and max-width

CSS Height & Width Tutorial

Box Model

Set all CSS properties that make up CSS box model
Compare elements with and without padding
Add box-sizing: border-box to manage dimensions of certain elements
Apply box-sizing: border-box to all elements at once

CSS Box Model Tutorial

Outline

Set different outline-style values
Specify outline color using a color keyword value
Specify outline width using a size in px or a predefined keyword value
Set outline offset property to create space between border and outline
Use outline shorthand for outline-width, outline-style, and outline-color

CSS Outline Tutorial

Text

Specify the color of your text using color keyword name and HEX indicator
Align text left, center, right or justified
Try all types of text decoration
Use text-transform to set all uppercase, lowercase or capitalized characters
Specify the indentation of your text
Use custom letter spacing to make your words more spacious out or compact
Use word spacing to make your text more spacious or compact
Adjust line height to create more space between lines
Set text direction right to left
Define shadow radius and color for your text
Specify how text overflow (text that doesn’t fit) is displayed
Display full overflow text when hovered on
Make long text wrap when it doesn’t fit in a line
Use word-break to break-all or keep-all words
Add multiple shadows to your text separated by commas

CSS Text Tutorial

Fonts

Specify font family for your text
Specify font style for your text
Define font size using predefined keywords, percentage or length indicators
Specify font weight to create bold effect
Use font variant to make characters appear as small caps
Use @font-face rule to apply non-CSS font family fonts
Use font-weight with @font-face rule

CSS Fonts Tutorial

Set a color for your link
Set different colors for different states of links
Specify custom link background colors for different states
Make your link a CSS button

CSS Link Tutorial

Lists

Specify item markers for lists
Use images for item markers of lists
Define item marker position outside the list
Use list-style shorthand to set type, position and image
Set various color and layout styles to your lists
Create lists with background and borders
Create a bordered list without item markers

CSS List Tutorial

Tables

Specify border width, color and style for a table
Collapse table borders
Use border spacing on uncollapsed borders
Create a caption text for the table
Add empty cells in a table
Define auto, fixed or initial table layout
Set specific table width and height
Specify text alignment in a table
Specify vertical content alignment in a table
Set padding for your table content
Set only horizontal borders for a table
Create table cells with a hover effect
Specify table colors
Create a zebra-striped table design

CSS Tables Tutorial

Display

Override the default display value to inline
Override the default display value to block
Hide an element using display: none
Hide an element using visibility: hidden

CSS Display Tutorial

Position

Set static position for an element
Set relative position for an element
Set fixed position for an element
Set absolute position for an element

CSS Position Tutorial

Overflow

Set overflow text to ellipsis
Show overflown text when hovered on
Set overflow-y to hidden
Set overflow-x to hidden

CSS Overflow Tutorial

Float

Float an element to the left
Float an element to the right
Use float: none to keep an element in its original place
Use clear to determine where elements shouldn’t float
Use overflow: auto to fix issues with overflow

CSS Float Tutorial

Inline-Block

Basic use of CSS float
Basic use of CSS display: inline-block

CSS Inline-Block Tutorial

Align Elements

Center vertically with position and transform
Center vertically with line-height
Center vertically and horizontally using padding
Center vertically with padding
Fix image overflow with clearfix
Align an element to the left with float
Align an element to the left with position
Center an image my using auto margin on a block element
Center text using text-align
Center an element inside a container with margin

CSS Align Tutorial

Combinators

Select only direct child elements
Select all descending elements
Select all the sibling elements
Select only adjacent sibling elements

CSS Combinators Tutorial

Pseudo-Class

Set different link states using pseudo classes
Change element color upon CSS hover with pseudo classes
Change background color upon CSS hover with pseudo classes
Match pseudo class to the first child element
Match pseudo class to every first child element
Match pseudo class to all specified elements in all first child elements
Define special rules for different languages using pseudo class :lang

CSS Pseudo-Class Tutorial

Pseudo-Elements

Set style for the first line
Set style for the first letter
Insert specific content before an element
Insert specific content after an element
Style a specified portion of an element
Combine multiple pseudo elements in one document

CSS Pseudo-Elements Tutorial

Opacity

Specify opacity to make an image transparent
Apply opacity settings upon hover
Create transparent box
Specify transparency with RGBA
Manipulate text in a transparency box

CSS Opacity & Transparency Tutorial

Build a navigation bar from HTML links
Remove default browser settings from your navigation bar
Specify text and background colors for hover effect
Create basic vertical navigation bar
Specify the style for your active navigation links
Add borders and alignment to your navigation list
Create a fixed vertical navbar
Create a horizontal navigation bar
Create a horizontal navigation bar using float
Create a horizontal navbar with a changing color upon hover
Add a class to inform users about selected navigation item
Align navigation links to the right
Create a navbar with individual dividers
Create a fixed top horizontal navbar using position
Create a fixed bottom horizontal navbar using position
Create a fully functioning navigation bar

CSS Navigation Bar Tutorial

Create a basic dropdown menu
Create a dropdown menu with links
Align your dropdown menu to the right

CSS Dropdown Tutorial

Images

Create an image gallery using CSS styling properties
Define a part of image to display
Make a navigation bar using image sprite
Use image sprites with hover effect
Set image width to 100%
Set image max-width to 100%
Keep aspect ratio: contain background-size
Specify background-size to stretch and fill
Set background image to cover the area & keep aspect ratio
Display different images depending on screen size
Use @media rule to make images responsive
Use HTML5 <picture> element

CSS Image Tutorial

Attribute Selectors

Select all elements with specified attribute
Select elements with specified attribute & value
Select elements with specified value regardless of its placement
Select elements that start with a specified value
Select elements that start with a specified value describing just part of it
Select elements that end with a specified value
Select elements with a specified value anywhere in the attribute
Apply styling properties using CSS selector

CSS Attribute Selectors Tutorial

Forms

Select all input elements
Use padding to create space around input field
Add and style a border for a CSS form
Add only a bottom border for a CSS form
Specify a background color for your input field
Specify a background color for a focused input
Specify a border style for a focused input
Add an icon to your input field
Create an animated stretching input field
Style a text area
Style a dropdown menu
Style input buttons

CSS Form Tutorial

Counters

Create a simple list with CSS counters
Make a table of contents using CSS counters
Create an outlined list with CSS counters

CSS Counter Tutorial

Website Layout

Build a responsive website layout using CSS columns
Create a flexible website layout using flex properties

CSS Website Layout Tutorial

Transforms

Rotate an element around its horizontal axis
Rotate an element around its vertical axis
Rotate an element around its depth axis

CSS Transform Tutorial

Transitions

Create a width transition effect upon hover
Create a transition with width and height properties
Specify different speed curves for your transition
Create a transition with delay effect
Create a transition with transform and set its duration
Specify individual transition properties in separate declarations
Specify all transition properties in a single declaration

CSS Transition Tutorial

Animations

Assign animation rule to an element
Set changes using percentages for a smoother animation effect
Change animation position using percentage
Create fade in animation
Specify animation delay
Set animation to repeat
Set an infinite animation
Run animation in reverse
Run animation forwards then backwards
Run animation backwards then forwards
Specify an animation speed curve
Set animation fill mode forwards
Set animation fill mode backwards
Set animation fill mode forwards and backwards
Use six major animation properties
Use animation shorthand property

CSS Animation Tutorial

Tooltips

Create a basic tooltip
Create a tooltip on the right
Create a tooltip on the left
Create a tooltip above an element
Create a tooltip below an element
Create a tooltip with a bottom arrow
Create a tooltip with a top arrow
Create a tooltip with a left arrow
Create a tooltip with a right arrow
Create a tooltip with a fade in effect

CSS Tooltip Tutorial

Buttons

Assign colors to buttons
Define text size for buttons
Specify padding for buttons
Make your button corners rounded
Add different color borders to your buttons
Create a button with hover effect
Create buttons with a shadow
Make a button appear inactive
Define width of the button
Align several buttons together using float
Add borders to grouped buttons
Create a vertical button group
Add a button on an image using position
Create a button with an arrow animation
Create a pressed button effect
Create a fade in button
Create a button with a ripple effect

CSS Button Tutorial

Pagination

Create a simple pagination style
Assign hover and active effects on your pagination list
Apply border-radius to create rounded corners
Create a transition effect on hover
Create a pagination list with borders
Add space around page links
Specify pagination text size
Center your pagination list
Create breadcrumbs from an unordered HTML list

CSS Pagination Tutorial

Multiple Columns

Divide elements to separate columns
Specify the width of a column
Specify the width between columns
Set the style of column borders
Specify the weight of column borders
Specify the color of column borders
Use shorthand for column border style, weight and color
Span across multiple columns

CSS Multiple Column Tutorial

User Interface

Create an element with resizable width
Create an element with resizable height
Create an element with resizable width and height
Disable resizing on elements that are resizable by default

CSS User Interface Tutorial

Grid

Build a responsive grid with CSS columns

CSS Grid Tutorial

Flexbox

Create flexible boxes
Make image grid responsive using flexbox
Create a responsive website layout with flexbox
Set flex-direction: column
Set flex-direction: column-reverse
Set flex-direction: row
Set flex-direction: row-reverse
Define flex-wrap: wrap
Define flex-wrap: nowrap
Define flex-wrap: wrap-reverse
Use flex-flow shorthand for flex-direction and flex-wrap
Align flex items in a container with justify-content: center
Align flex items in a container with justify-content: flex-start
Align flex items in a container with justify-content: flex-end
Align flex items in a container with justify-content: space-around
Align flex items in a container with justify-content: space-between
Center flex items vertically using align-items: center
Align flex items at the top of a container with align-items: flex-start
Align flex items at the bottom of a container with align-items: flex-end
Stretch the container’s space to contain flex items using align-items: stretch
Use align-items: baseline
Set justify-content and align-items to center flex item perfectly
Align flex lines using align-content: space-between
Align flex lines using align-content: space-around
Align flex lines using the default option align-content: stretch
Align flex lines in the middle of a container using align-content: center
Align flex lines in the beginning of a container with align-content: flex-start
Align flex lines in the end of a container with align-content: flex-end
Create flexible items inside a container
Specify in what order flex items should be displayed
Specify how much a flex item should grow in relation to other flex items
Specify how much a flex item should shrink in relation to other flex items
Determine the initial length of a flex item
Use flex shorthand for flex-grow, flex-shrink, and flex-basis properties
Align an item inside a flexible container using align-self: center
Align individual flexible items with align-self: flex-start and flex-end

CSS Flexbox Tutorial

Media Queries

Change background color based on screen width
Create a responsive navigation menu
Align elements based on screen width
Create a responsive layout with flex properties
Hide unnecessary elements for small screen devices
Adjust font size based on screen size
Use media queries to create a flexible image gallery
Create a flexible website using media queries
Change layout orientation when a screen rotates
Assign several min- and max- properties to a single @media rule

CSS Media Queries Tutorial

Responsive

Set viewport meta tag
Keep the aspect ratio of an image when scaling
Set image to cover area but keep aspect ratio
Use different images based on device used
Set min-device-width to respond to device viewport width
Define HTML5 <picture>
Set a video player to scale up and down
Add a responsive video

CSS Responsive Web Design Tutorial