A Sorted List of CSS Code Examples: Master Styling HTML Elements

Color

All CSS styles include the color property. You can pick color codes from our useful Pickeristic tool.

​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

Backgrounds

The following list of CSS code examples illustrates different actions you can perform on page backgrounds. Learn to set colors or images as backgrounds and control the way they look on web sites.

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 the linear gradient for your background without specifying direction
Apply the 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 the linear gradient background with multiple colors (default direction)
Create the linear gradient background with multiple colors from left to right
Linear gradient (left-right) with changing transparency
Create repeating linear gradient
Apply the radial gradient with evenly spaced color stops
Apply the radial gradient with differently spaced color stops
Set a circle shaped radial gradient
Manipulate radial gradient size parameters
Use a repeating radial gradient

Borders

These CSS code examples manipulate borders of HTML elements.

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

Margins

Practice setting the margin property for HTML elements in these CSS examples:

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

Padding

The CSS code examples below show the options for setting padding. You can use the shorthand or declare values in separate declarations:

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

Height and Width

Learn to set unique height and width properties for HTML elements.

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

Box Model

CSS box model indicates that browsers see HTML elements as rectangular boxes.

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
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

Outline

The following CSS code examples show the ways to control the outline property.

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

Text

CSS styles the text content with the following options:

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

Fonts

CSS code examples below show how to use fonts, specify font families, apply bold or italic effects, and so much more.

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

Links

You can also style links by setting colors, controlling states, etc.

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

Lists

Control the way lists are presented on your web pages by following the CSS code examples below.

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

Tables

The following CSS code examples help you change the default settings of 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

Display

Practice hiding HTML elements and otherwise manipulating them with display with these CSS code examples:

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

Position

The following CSS code examples control the position of HTML elements.

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

Overflow

Learn to deal with text overflowing its content box.

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

Float

The CSS code examples below float elements to specified sides.

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

Inline-Block

These CSS code examples show the use of inline-block.

Setting CSS display: inline block and setting width and height
Another basic use of CSS display: inline-block

Align Elements

CSS styles elements by indicating their alignment.

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

Combinators

By using combinators, you can select specific HTML elements to style according to their relations to other elements.

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

Pseudo-Class

Practice using pseudo classes for styling elements in certain states.

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

Pseudo-Elements

The following CSS codes show how pseudo-elements style specific parts of 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

Opacity

Set opacity for HTML elements and make them transparent.

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

Navigation Bars

The following CSS code examples show how to create and style navigation bars.

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

Dropdowns

By following the CSS codes below, you can create dropdown menus for your websites.

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

Images

CSS styles images as galleries, lets you create image sprites and manipulate such content in other ways.

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

Attribute Selectors

These CSS code examples teach you how to select and style elements according to their attributes.

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

Forms

CSS styles forms by indicating how input fields, submit buttons and text areas look.

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

Counters

The following code examples show the use of counters.

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

Website Layout

Control website layout by following the examples below.

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

Transform

Learn to use the transform property to rotate elements and create simple animations.

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

Transition

The CSS code examples below reveal the use of transitions to create animation effects on elements.

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

Animations

CSS can create animations for HTML elements by making them fade out, fade in, etc.

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

Tooltips

The following CSS codes illustrate the creation, styling, and positioning of 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

Buttons

Learn to create and style buttons with different properties.

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

Pagination

Learn to organize many links with these CSS pagination examples.

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

Multiple Columns

These CSS code examples show how content can be divided into columns and styled with additional properties.

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

Grid

These code examples show how to manipulate grid (the layout of a web page).

Build a responsive grid with CSS columns
Build a responsive grid with two CSS columns
Build and style CSS columns
Set the box-sizing property to create CSS columns

Flexbox

Analyze these CSS code examples to learn how to create responsive websites by using 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

Media Queries

Learn to make your website mobile-friendly by including @media and breakpoints.

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

Responsive

These CSS code examples reveal additional options for creating responsive web pages.

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