W3.CSS Reference
W3.CSS Classes
This reference lists all classes and CSS variables available in W3.CSS 6.
Basic Styling
Components
Colors
Utilities
Customization
Container Classes
| Class | Defines | |
|---|---|---|
| w3-container | HTML container with 16px left and right padding | Try it |
| Used as header | Try it | |
| Used as footer | Try it | |
| w3-panel | HTML container with 16px left and right padding and 16px top and bottom margin | Try it |
| Used to display a note | Try it | |
| Used to display a quote | Try it | |
| w3-badge | Circular badge | Try it |
| w3-tag | Rectangular tag | Try it |
| w3-ul | Styles a list without bullets, with separator lines and padded items | Try it |
| w3-display-container | Container for w3-display-classes (enables positioning of elements inside the container) | Try it |
| w3-block | Class that can be used to define a full width for any element | Try it |
| w3-code | Code container | Try it |
| w3-codespan | Inline code container (for code snippets) | Try it |
| w3-content | Centers a page container horizontally with a default maximum width of 980px. It does not center text or inline images. | Try it |
| w3-auto | Centers a page container with a maximum width of 1140px above 1205px, 95% above 992px and up to 1205px, and 100% at 992px or less. | Try it |
| w3-stretch | Applies -16px inline margins to extend an element beyond its parent's content edges. | Try it |
| w3-rtl | Adjusts text direction for right to left (rtl) layout | Try it |
| w3-ltr | Adjusts text direction for left to right (ltr) layout | Try it |
Font and Text Classes
| Class | Defines | |
|---|---|---|
| w3-tiny | Specifies a font size of 10 pixels | Try it |
| w3-small | Specifies a font size of 12 pixels | Try it |
| w3-medium | Specifies a font size of 15 pixels | Try it |
| w3-large | Specifies a font size of 18 pixels | Try it |
| w3-xlarge | Specifies a font size of 24 pixels | Try it |
| w3-xxlarge | Specifies a font size of 36 pixels | Try it |
| w3-xxxlarge | Specifies a font size of 48 pixels | Try it |
| w3-jumbo | Specifies a font size of 64 pixels | Try it |
| w3-wide | Adds 4px letter spacing. | Try it |
| w3-serif | Changes the font to serif | Try it |
| w3-sans-serif | Changes the font to sans-serif | Try it |
| w3-cursive | Changes the font to cursive | Try it |
| w3-monospace | Changes the font to monospace | Try it |
| w3-center | Centers text and inline elements inside an element. | Try it |
Text Style and Direction Classes
| w3-rtl | Adjusts text direction for right to left (rtl) layout | Try it |
| w3-ltr | Adjusts text direction for left to right (ltr) layout | Try it |
| w3-text-center | Centers text and inline elements (without !important). | Try it |
| w3-bold | Changes the font to bold | Try it |
| w3-text-bold | Changes the font to bold (same as w3-bold) | Try it |
| w3-italic | Changes the font to italic | Try it |
| w3-text-italic | Changes the font to italic (same as w3-italic) | Try it |
Padding Classes
| Class | Defines | |
|---|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | Try it |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | Try it |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. | Try it |
| w3-padding-16 | Padding 16px top and bottom | Try it |
| w3-padding-24 | Padding 24px top and bottom | Try it |
| w3-padding-32 | Padding 32px top and bottom | Try it |
| w3-padding-48 | Padding 48px top and bottom | Try it |
| w3-padding-64 | Padding 64px top and bottom | Try it |
| w3-padding-top-64 | Padding 64px on top | Try it |
| w3-padding-top-48 | Padding 48px on top | Try it |
| w3-padding-top-32 | Padding 32px on top | Try it |
| w3-padding-top-24 | Padding 24px on top | Try it |
Margin Classes
| Class | Defines | |
|---|---|---|
| w3-margin | Adds a 16px margin to an element | Try it |
| w3-margin-top | Adds a 16px top margin to an element | Try it |
| w3-margin-right | Adds a 16px right margin to an element | Try it |
| w3-margin-bottom | Adds a 16px bottom margin to an element | Try it |
| w3-margin-left | Adds a 16px left margin to an element | Try it |
| w3-section | Adds a 16px top and bottom margin to an element | Try it |
Border Classes
| Class | Defines | |
|---|---|---|
| w3-border | Borders (top, right, bottom, left) | Try it |
| w3-border-top | Border top | Try it |
| w3-border-right | Border right | Try it |
| w3-border-bottom | Border bottom | Try it |
| w3-border-left | Border left | Try it |
| w3-border-0 | Removes all borders | Try it |
| w3-border-color | Displays defined borders in a specified color | Try it |
| w3-bottombar | Adds a thick bottom border (bar) to an element | Try it |
| w3-leftbar | Adds a thick left border (bar) to an element | Try it |
| w3-rightbar | Adds a thick right border (bar) to an element | Try it |
| w3-topbar | Adds a thick top border (bar) to an element | Try it |
| w3-hover-border-color | Hoverable border color | Try it |
Card Classes
| Class | Defines | |
|---|---|---|
| w3-card | Same as w3-card-2 | Try it |
| w3-card-2 | Adds a light box shadow. Does not assign a background color. | Try it |
| w3-card-4 | Adds a stronger box shadow. Does not assign a background color. | Try it |
Flex Classes
Item 1
Item 2
Item 3
| Class | Defines | |
|---|---|---|
| w3-flex | A flex container for flexible one-dimensional layouts. | Try it |
| w3-flex-column | A flex container with items arranged in a column. | Try it |
| w3-flex-mobile | Arranges flex items in a column on screens 600px wide or smaller when used with w3-flex or any other flex container class. | Try it |
| w3-flex-wrap | A flex container that allows items to wrap to a new line. | Try it |
Flex Item Classes
w3-flex-1
w3-flex-1
w3-flex-auto
| Class | Defines | |
|---|---|---|
| w3-flex-1 | A flex item that grows and shrinks from a zero basis. | Try it |
| w3-flex-auto | A flex item that grows and shrinks from an automatic basis. | Try it |
| w3-flex-none | A flex item that neither grows nor shrinks. | Try it |
| w3-flex-shrink-0 | A flex item that prevents shrinking. | Try it |
| w3-flex-spacer | An automatic margin at the inline start. In a row flex layout, it pushes this item and following items toward the inline end. | Try it |
Main Axis Flex Alignment
One
Two
Three
The main flex axis is horizontal by default, and the cross axis is vertical.
With w3-flex-column, the main axis is vertical and the cross axis is horizontal.
These helpers align flex items along the main axis:
| Class | Defines | |
|---|---|---|
| w3-flex-start | A flex container that aligns items at the start. | Try it |
| w3-flex-center | A flex container that centers its items. | Try it |
| w3-flex-end | A flex container that aligns items at the end. | Try it |
| w3-flex-around | A flex container with equal space around items. | Try it |
| w3-flex-between | A flex container with equal space between items. | Try it |
| w3-flex-evenly | A flex container with equal spaces between items and both ends. | Try it |
Cross Axis Flex Alignment
These helpers align flex items along the cross axis:
One
Two
Three
| Class | Defines | |
|---|---|---|
| w3-flex-align-start | A flex container that aligns items at the start of the axis. | Try it |
| w3-flex-align-center | A flex container that centers items. | Try it |
| w3-flex-align-end | A flex container that aligns items at the end of the axis. | Try it |
| w3-flex-align-stretch | A flex container that stretches automatically sized items to fill the cross axis of their flex line. | Try it |
Basic Grid Classes
| Class | Defines | |
|---|---|---|
| w3-grid | A grid container for flexible two-dimensional layouts. | Try it |
| w3-grid-padding | A grid container with a 16px gap between rows and columns. | Try it |
| w3-grid-2 | 2 equal-width columns for all screen sizes. | Try it |
| w3-grid-3 | 3 equal-width columns for all screen sizes. | Try it |
| w3-grid-4 | 4 equal-width columns for all screen sizes. | Try it |
Responsive Grid Classes
If the container is narrower than the listed minimum column width, the grid uses one column that fits the container.
| Class | Defines | |
|---|---|---|
| w3-grid-auto-xsmall | An auto-fitting grid with a 150px minimum column width. | Try it |
| w3-grid-auto-small | An auto-fitting grid with a 200px minimum column width. | Try it |
| w3-grid-auto | An auto-fitting grid with a 250px minimum column width. | Try it |
| w3-grid-auto-large | An auto-fitting grid with a 300px minimum column width. | Try it |
| w3-grid-auto-xlarge | An auto-fitting grid with a 350px minimum column width. | Try it |
| w3-grid-mobile | Changes a grid to one column on screens 600px wide or smaller when used with any grid container class. | Try it |
Grid Item Classes
| Class | Defines | |
|---|---|---|
| w3-grid-span-2 | A grid item that spans 2 columns. | Try it |
| w3-grid-span-3 | A grid item that spans 3 columns. | Try it |
| w3-grid-span-all | A grid item that spans all columns. | Try it |
Grid and Flexbox Gap Classes
Gap helpers set spacing between rows and columns in Grid and between items and lines in Flexbox. They do not create a layout container.
| Class | Defines | |
|---|---|---|
| w3-gap | A 16px gap between flex or grid items. | Try it |
| w3-gap-small | An 8px gap between flex or grid items. | Try it |
| w3-gap-large | A 24px gap between flex or grid items. | Try it |
Layout Classes
| Class | Defines | |
|---|---|---|
| w3-cell-row | Container for layout columns (cells). | Try it |
| w3-cell | Layout column (cell). | Try it |
| w3-cell-top | Aligns content at the top of a column (cell). | Try it |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). | Try it |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). | Try it |
Responsive Row Classes
| Class | Defines | |
|---|---|---|
| w3-row | Container for one row of fluid responsive content | Try it |
| w3-row-padding | Row where all columns have a default padding | Try it |
| w3-auto | Centers a page container with a maximum width of 1140px above 1205px, 95% above 992px and up to 1205px, and 100% at 992px or less. | Try it |
| w3-stretch | Applies -16px inline margins to extend an element beyond its parent's content edges. | Try it |
| w3-half | Column that uses half of the row and full width on small screens | Try it |
| w3-third | Column that uses 1/3 of the row and full width on small screens | Try it |
| w3-twothird | Column that uses 2/3 of the row and full width on small screens | Try it |
| w3-quarter | Responsive column that uses 1/4 of the row and full width on small screens | Try it |
| w3-threequarter | Responsive column that uses 3/4 of the row width | Try it |
| w3-col | Responsive column container for HTML content | Try it |
| w3-rest | Occupies the rest of the column width | Try it |
| l1 - l12 | Responsive sizes for large screens | Try it |
| m1 - m12 | Responsive sizes for medium screens | Try it |
| s1 - s12 | Responsive sizes for small screens | Try it |
| w3-hide-small | Hide content on small screens (less than 601px) | Try it |
| w3-hide-medium | Hide content on medium screens | Try it |
| w3-hide-large | Hide content on large screens (larger than 992px) | Try it |
| w3-image | Responsive image | Try it |
| w3-mobile | Displays an element as a full-width block on screens 600px wide or smaller | Try it |
Table Classes
| Class | Defines | |
|---|---|---|
| w3-table | Container for an HTML table | Try it |
| w3-striped | Striped table | Try it |
| w3-border | Bordered table | Try it |
| w3-bordered | Bordered lines | Try it |
| w3-centered | Centers text in table header and data cells. | Try it |
| w3-table-all | Full-width table with borders and alternating row backgrounds. | Try it |
| w3-hoverable | Hoverable table | Try it |
| w3-responsive | Adds horizontal scrolling when content, such as a table, is wider than its container. | Try it |
Bar Classes - Navigation
| Class | Defines | |
|---|---|---|
| w3-bar | Horizontal bar | Try it |
| w3-bar-block | Vertical bar | Try it |
| w3-bar-item | Provides common style for bar items | Try it |
| w3-sidebar | Side bar | Try it |
| A side bar can contain all types of content | Try it | |
| A side bar overlaying main content | Try it | |
| A side bar overlaying all main content | Try it | |
| A side bar shifting main content to the right | Try it | |
| A side bar with an overlay background | Try it | |
| A Side bar on the right side | Try it | |
| w3-collapse | Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class | Try it |
| w3-main | Container for page content when using the w3-collapse class for responsive side navigations | Try it |
| Fully automatic right-sided responsive side navigation | Try it |
Dropdown Classes
| w3-dropdown-click | Clickable dropdown element | Try it |
| w3-dropdown-hover | Shows dropdown content on hover or when keyboard focus is inside the dropdown. | Try it |
| Hoverable dropdown element (used in w3-bar) | Try it | |
| Hoverable dropdown element (used in w3-bar-block) | Try it | |
| Hoverable dropdown element (used in w3-sidebar) | Try it | |
w3-dropdown-content | Hidden, absolutely positioned dropdown content. Hover dropdowns reveal it automatically; click dropdowns require JavaScript. | Learn |
Button Classes
| Class | Defines | |
|---|---|---|
| w3-button | Rectangular button with grey background color on hover | Try it |
| w3-btn | Rectangular button with shadows on hover | Try it |
| w3-circle | Can be used to create a circular button | Try it |
| w3-ripple | Rectangular button with reduced opacity when pressed | Try it |
| Circular floating button with ripple effect | Try it | |
| w3-bar | Can be used to group elements (like buttons) in an horizontal bar | Try it |
| w3-block | Class that can be used to define a full width w3-button | Try it |
| Full width w3-btn | Try it | |
| Full width circular button | Try it |
Input Classes
| Class | Defines | |
|---|---|---|
| w3-input | Input elements | Try it |
| Input form as a card | Try it | |
| Input elements (top labels) | Try it | |
| Input elements (bottom labels) | Try it | |
| w3-check | Checkbox input type | Try it |
| w3-radio | Radio input type | Try it |
| w3-select | Input select element | Try it |
| w3-disabled | Gives an element a disabled appearance and a not-allowed cursor | Try it |
| w3-animate-input | Animates the width of an input to 100% | Try it |
Modal Classes
| Class | Defines | |
|---|---|---|
| w3-modal | Modal container | Try it |
| w3-modal-content | Modal pop-up element | Try it |
| w3-tooltip | Container for tooltip text shown on hover or keyboard focus. | Try it |
| w3-text | Tooltip text shown when its tooltip is hovered or contains keyboard focus. | Try it |
Animation Classes
| Class | Defines | |
|---|---|---|
| w3-animate-top | Animates an element from the top -300px to 0px | Try it |
| w3-animate-left | Animates an element from left -300px to 0px | Try it |
| w3-animate-bottom | Animates an element from the bottom -300px to 0px | Try it |
| w3-animate-right | Animates an element from right -300px to 0px | Try it |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 | Try it |
| w3-animate-zoom | Animates an element from 0 to 100% in size | Try it |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) | Try it |
| w3-spin | Spin an icon 360 degrees | Try it |
| Spin any element 360 degrees | Try it | |
| w3-animate-input | Animates the width of an input field to 100% | Try it |
When the user requests reduced motion, W3.CSS disables the listed animation effects and the input-width transition.
Display Classes
| Class | Defines | |
|---|---|---|
| w3-center | Centers text and inline elements inside an element. | Try it |
| w3-left | Floats an element to the left (float: left) | Try it |
| w3-right | Floats an element to the right (float: right) | Try it |
| w3-left-align | Left aligned text | Try it |
| w3-right-align | Right aligned text | Try it |
| w3-justify | Right and left aligned text | Try it |
| w3-block | Class that can be used to define a full width for any element | Try it |
| w3-circle | Circled content | Try it |
| w3-hide | Hidden content (display:none) | Try it |
| w3-show | Show content (display:block) | Try it |
| w3-show-block | Alias of w3-show (display:block) | Try it |
| w3-show-inline-block | Show content as inline-block (display:inline-block) | Try it |
| w3-top | Fixes an element at the top of the viewport with width:100%. Its horizontal position and maximum width can be customized. | Try it |
| w3-bottom | Fixes an element at the bottom of the viewport with width:100%. Its horizontal position and maximum width can be customized. | Try it |
| w3-display-container | Container for w3-display-classes (position: relative) | Try it |
| w3-display-topleft | Displays content at the top left corner of the w3-display-container | Try it |
| w3-display-topright | Displays content at the top right corner of the w3-display-container | Try it |
| w3-display-bottomleft | Displays content at the bottom left corner of the w3-display-container | Try it |
| w3-display-bottomright | Displays content at the bottom right corner of the w3-display-container | Try it |
| w3-display-left | Displays content to the left (middle left) of the w3-display-container | Try it |
| w3-display-right | Displays content to the right (middle right) of the w3-display-container | Try it |
| w3-display-middle | Displays content in the middle (center) of the w3-display-container | Try it |
| w3-display-topmiddle | Displays content at the top middle of the w3-display-container | Try it |
| w3-display-bottommiddle | Displays content at the bottom middle of the w3-display-container | Try it |
| w3-display-position | Displays content at a specified position in the w3-display-container | Try it |
| w3-display-hover | Shows content when its display container is hovered or contains keyboard focus | Try it |
| w3-clear | Clears floated children using clearfix pseudo-elements | Try it |
Effect Classes
| Class | Defines | |
|---|---|---|
| w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) | Try it |
| Add opacity/transparency to text | Try it | |
| w3-opacity-off | Turns off opacity/transparency (opacity: 1) | Try it |
| w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) | Try it |
| w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) | Try it |
| w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) | Try it |
| w3-greyscale | Alias of w3-grayscale | |
| w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) | Try it |
| w3-greyscale-max | Alias of w3-grayscale-max | |
| w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) | Try it |
| w3-greyscale-min | Alias of w3-grayscale-min | |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) | Try it |
| w3-sepia | Adds a sepia effect to an element (sepia: 75%) | Try it |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) | Try it |
| w3-overlay | Creates an overlay effect | Try it |
Background Color Classes
Red
Pink
Purple
Deep Purple
Indigo
Cobalt
Blue
Light Blue
Cyan
Aqua
Teal
Emerald
Green
Light Green
Lime
Khaki
Yellow
Amber
Orange
Deep Orange
Blue Gray
Blue Grey
Olive
Taupe
Sienna
Brown
Crimson
Sand
White
Paper
Light Gray
Light Gray
Gray
Grey
Dark Gray
Dark Grey
Asphalt
Black
Pale Red
Pale Yellow
Pale Green
Pale Blue
Gray and Grey
Where both spellings are listed, they produce the same color.
For example, w3-gray and w3-grey are identical.
Semantic Colors
Transparent
Note
The semantic color classes w3-danger, w3-warning, w3-success, w3-info, and w3-note use customizable variable CSS colors.
Fixed Colors and Dark Mode
Color classes such as w3-blue, w3-text-red, and w3-border-green keep the same colors when dark mode is enabled.
For example, w3-white always gives an element a white background, even inside a dark-mode container.
Dark mode changes the default page and component colors using variables:
--w3-page-bg- Default page background.--w3-text-color- Default text color.--w3-surface- Component background.--w3-surface-alt- Alternate background for table stripes and inline code.--w3-codespan-text- Inline code text color.--w3-border-color- Default border color.--w3-control-border- Input and select bottom border color.--w3-border-light- Table row and list separator color.--w3-badge-bg- Badge and tag background.--w3-badge-text- Badge and tag text color.--w3-hover-bg- Default hover background.--w3-hover-text- Default hover text color.--w3-danger-bg- Danger background.--w3-danger-text- Danger text color.--w3-note-bg- Note background.--w3-note-text- Note text color.--w3-info-bg- Info background.--w3-info-text- Info text color.--w3-warning-bg- Warning background.--w3-warning-text- Warning text color.--w3-success-bg- Success background.--w3-success-text- Success text color.--w3-focus-ring- Keyboard focus outline color.--w3-accent-color- Checkbox and radio accent color.
Text Color Classes
| Class | Defines | |
|---|---|---|
| w3-text-red | Text color red | Try it |
| w3-text-green | Text color green | Try it |
| w3-text-blue | Text color blue | Try it |
| w3-text-yellow | Text color yellow | Try it |
| w3-text-light-grey | Text color light-grey | Try it |
| w3-text-grey | Text color grey | Try it |
| w3-text-dark-grey | Text color dark grey | Try it |
| w3-text-black | Text color black | Try it |
| w3-text-white | Text color white | Try it |
| w3-text-pink | Text color pink | Try it |
| w3-text-purple | Text color purple | Try it |
| w3-text-teal | Text color teal | Try it |
| w3-text-light-green | Text color light green | Try it |
| w3-text-lime | Text color lime | Try it |
| w3-text-deep-purple | Text color deep purple | Try it |
| w3-text-indigo | Text color indigo | Try it |
| w3-text-light-blue | Text color light blue | Try it |
| w3-text-blue-grey | Text color blue grey | Try it |
| w3-text-cyan | Text color cyan | Try it |
| w3-text-aqua | Text color aqua | Try it |
| w3-text-amber | Text color amber | Try it |
| w3-text-orange | Text color orange | Try it |
| w3-text-deep-orange | Text color deep orange | Try it |
| w3-text-sand | Text color sand | Try it |
| w3-text-khaki | Text color khaki | Try it |
| w3-text-brown | Text color brown | Try it |
| w3-text-blue-gray | Same as w3-text-blue-grey | |
| w3-text-dark-gray | Same as w3-text-dark-grey | |
| w3-text-gray | Same as w3-text-grey | |
| w3-text-light-gray | Same as w3-text-light-grey |
Hover Color Classes
The color classes above can also be used as hover background:
| Class | Defines | |
|---|---|---|
| w3-hover-amber | Applies amber background and its text color on hover | Try it |
| w3-hover-aqua | Applies aqua background and its text color on hover | Try it |
| w3-hover-asphalt | Applies asphalt background and its text color on hover | Try it |
| w3-hover-black | Applies black background and its text color on hover | Try it |
| w3-hover-blue | Applies blue background and its text color on hover | Try it |
| w3-hover-blue-gray | Applies blue-gray background and its text color on hover | Try it |
| w3-hover-blue-grey | Applies blue-grey background and its text color on hover | Try it |
| w3-hover-brown | Applies brown background and its text color on hover | Try it |
| w3-hover-cobalt | Applies cobalt background and its text color on hover | Try it |
| w3-hover-crimson | Applies crimson background and its text color on hover | Try it |
| w3-hover-cyan | Applies cyan background and its text color on hover | Try it |
| w3-hover-dark-gray | Applies dark-gray background and its text color on hover | Try it |
| w3-hover-dark-grey | Applies dark-grey background and its text color on hover | Try it |
| w3-hover-deep-orange | Applies deep-orange background and its text color on hover | Try it |
| w3-hover-deep-purple | Applies deep-purple background and its text color on hover | Try it |
| w3-hover-emerald | Applies emerald background and its text color on hover | Try it |
| w3-hover-gray | Applies gray background and its text color on hover | Try it |
| w3-hover-green | Applies green background and its text color on hover | Try it |
| w3-hover-grey | Applies grey background and its text color on hover | Try it |
| w3-hover-indigo | Applies indigo background and its text color on hover | Try it |
| w3-hover-khaki | Applies khaki background and its text color on hover | Try it |
| w3-hover-light-blue | Applies light-blue background and its text color on hover | Try it |
| w3-hover-light-gray | Applies light-gray background and its text color on hover | Try it |
| w3-hover-light-green | Applies light-green background and its text color on hover | Try it |
| w3-hover-light-grey | Applies light-grey background and its text color on hover | Try it |
| w3-hover-lime | Applies lime background and its text color on hover | Try it |
| w3-hover-olive | Applies olive background and its text color on hover | Try it |
| w3-hover-orange | Applies orange background and its text color on hover | Try it |
| w3-hover-pale-blue | Applies pale-blue background and its text color on hover | Try it |
| w3-hover-pale-green | Applies pale green background and its text color on hover | Try it |
| w3-hover-pale-red | Applies pale-red background and its text color on hover | Try it |
| w3-hover-pale-yellow | Applies pale-yellow background and its text color on hover | Try it |
| w3-hover-paper | Applies paper background and its text color on hover | Try it |
| w3-hover-pink | Applies pink background and its text color on hover | Try it |
| w3-hover-purple | Applies purple background and its text color on hover | Try it |
| w3-hover-red | Applies red background and its text color on hover | Try it |
| w3-hover-sand | Applies sand background and its text color on hover | Try it |
| w3-hover-sienna | Applies sienna background and its text color on hover | Try it |
| w3-hover-taupe | Applies taupe background and its text color on hover | Try it |
| w3-hover-teal | Applies teal background and its text color on hover | Try it |
| w3-hover-white | Applies white background and its text color on hover | Try it |
| w3-hover-yellow | Applies yellow background and its text color on hover | Try it |
Hover Text Color Classes
The color classes above can also be used as hover text classes:
| Class | Defines | |
|---|---|---|
| w3-hover-text-red | Hover text color red | Try it |
| w3-hover-text-green | Hover text color green | Try it |
| w3-hover-text-blue | Hover text color blue | Try it |
| w3-hover-text-yellow | Hover text color yellow | Try it |
| w3-hover-text-amber | Hover text color amber | Try it |
| w3-hover-text-aqua | Hover text color aqua | Try it |
| w3-hover-text-black | Hover text color black | Try it |
| w3-hover-text-blue-gray | Hover text color blue gray | Try it |
| w3-hover-text-blue-grey | Hover text color blue grey | Try it |
| w3-hover-text-brown | Hover text color brown | Try it |
| w3-hover-text-cyan | Hover text color cyan | Try it |
| w3-hover-text-dark-gray | Hover text color dark gray | Try it |
| w3-hover-text-dark-grey | Hover text color dark grey | Try it |
| w3-hover-text-deep-orange | Hover text color deep orange | Try it |
| w3-hover-text-deep-purple | Hover text color deep purple | Try it |
| w3-hover-text-gray | Hover text color gray | Try it |
| w3-hover-text-grey | Hover text color grey | Try it |
| w3-hover-text-indigo | Hover text color indigo | Try it |
| w3-hover-text-khaki | Hover text color khaki | Try it |
| w3-hover-text-light-blue | Hover text color light blue | Try it |
| w3-hover-text-light-gray | Hover text color light gray | Try it |
| w3-hover-text-light-green | Hover text color light green | Try it |
| w3-hover-text-light-grey | Hover text color light grey | Try it |
| w3-hover-text-lime | Hover text color lime | Try it |
| w3-hover-text-orange | Hover text color orange | Try it |
| w3-hover-text-pink | Hover text color pink | Try it |
| w3-hover-text-purple | Hover text color purple | Try it |
| w3-hover-text-sand | Hover text color sand | Try it |
| w3-hover-text-teal | Hover text color teal | Try it |
| w3-hover-text-white | Hover text color white | Try it |
Other Hover Classes
| Class | Defines | |
|---|---|---|
| w3-hover-border-color | Hover border color | Try it |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | Try it |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | Try it |
| w3-hover-shadow | Adds shadow to an element on hover | Try it |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | Try it |
| w3-hover-greyscale | Adds a black and white (100% greyscale) effect to an element | Try it |
| w3-hover-sepia | Adds a sepia effect to an element on hover | Try it |
| w3-hover-none | Makes the background transparent and removes the shadow on hover. Does not reset every hover property. | Try it |
Round Classes
| Class | Defines | |
|---|---|---|
| w3-round | Element rounded (border-radius) 4px | Try it |
| w3-round-small | Element rounded (border-radius) 2px | Try it |
| w3-round-medium | Element rounded (border-radius) 4px | Try it |
| w3-round-large | Element rounded (border-radius) 8px | Try it |
| w3-round-xlarge | Element rounded (border-radius) 16px | Try it |
| w3-round-xxlarge | Element rounded (border-radius) 32px | Try it |
Dark Mode Class
| Class | Defines |
|---|---|
| w3-dark-mode | Applies a dark background, light text, and dark-mode colors to a page or section. |
Add w3-dark-mode to the <body> element for a dark page, or to a container for a dark section.
The class changes selected variables used by components such as tables, forms, and dropdowns.
Explicit color classes such as w3-blue, w3-text-red, and w3-border-green keep their fixed colors.
It also tells the browser to use a dark appearance for built-in controls, such as form controls and scrollbars.
See W3.CSS Dark Mode for examples.
CSS Variables
Override these variables in your own CSS after loading W3.CSS. You do not need to edit the framework stylesheet.
The table lists the default light-mode values. Dark mode supplies different values for page, surface, border, inline-code, and hover colors.
| Variable | Default Light Value | Controls |
|---|---|---|
| --w3-font-family | Verdana,sans-serif | Default body font family |
| --w3-heading-font-family | "Segoe UI",Arial,sans-serif | Default heading font family |
| --w3-font-size | 15px | Default font size |
| --w3-line-height | 1.5 | Default line height |
| --w3-content-max-width | 980px | Default max-width for w3-content |
| --w3-page-bg | #fff | Default page background |
| --w3-text-color | #000 | Default text color |
| --w3-surface | #fff | Component surface background |
| --w3-surface-alt | #f1f1f1 | Alternate surface background, including table stripes and inline code |
| --w3-codespan-text | #d2143a | Inline code text color |
| --w3-border-color | #ccc | Default border color |
| --w3-border-light | #ddd | Table row and list separator color |
| --w3-control-border | #808080 | Bottom border of inputs and select elements |
| --w3-hover-bg | #ccc | Default hover background |
| --w3-hover-text | #000 | Default hover text color |
| --w3-badge-bg | #000 | Badge and tag background |
| --w3-badge-text | #fff | Badge and tag text color |
| --w3-focus-ring | #2196F3 | Keyboard focus outline |
| --w3-accent-color | #2196F3 | Checkbox and radio accent color |
| --w3-danger-bg | #dd0000 | Danger background color |
| --w3-danger-text | #fff | Danger text color |
| --w3-note-bg | #fff599 | Note background color |
| --w3-note-text | #000 | Note text color |
| --w3-info-bg | #0a6fc2 | Info background color |
| --w3-info-text | #fff | Info text color |
| --w3-warning-bg | #ffb305 | Warning background color |
| --w3-warning-text | #000 | Warning text color |
| --w3-success-bg | #008a00 | Success background color |
| --w3-success-text | #fff | Success text color |
Override dark-mode colors on .w3-dark-mode after loading W3.CSS.
See W3.CSS Variables for examples.
