Styling Elements with CSS

CSS allows you to customize the appearance of your website, from colors and fonts to sizes and positions of different elements. For additional information on CSS styling options, refer to the MDN CSS reference docs.

Add CSS to your site

To get started, add a global.css file in the CSS section of your Page Code. CSS styles added to this file will apply to the selected classes throughout your site. To select a class to style, use the name of the component as it's referred to in Velo.

For example, to change the background color of all buttons to red:

1

Use inner classes to style specific elements of a component class. For example, use .button__label to style only the labels of button elements.

Available classes

See which classes are already available for any element on your site by selecting the element and viewing CSS Classes in your code panel:

Or add your own classes in the custom classes field. For more information, see CustomClasslist.

For reference, here is a list of global classes:

• Accordion
• Anchor menu
• Audio player
• Box
• Breadcrumbs
• Button
• Captcha
• Checkbox
• Checkbox group
• Collapsible text
• Column strip
• Date picker
• Dropdown input
• Dropdown menu
• Footer
• Form
• Google map
• Header
• Horizontal line
• Horizontal menu
• Image
• Image button
• Language menu
• Lightbox
• Lottie
• Menu
• Menu container
• Multi-state box
• Page
• Pagination
• Progress bar
• Radio button group
• Ratings display
• Ratings input
• Repeater
• Rich text box
• Search bar
• Section
• Selection tags
• Signature input
• Slideshow
• Switch
• Table
• Tabs
• Text
• Text box
• Text input
• Time picker
• Upload button
• Vector image
• Vertical line
• Vertical menu
• Video box
• Video player

The following classes can be customized but don't have an associated $w API:

Image button classes

.image-button

Targets image button elements. For example:

1

Language menu classes

.language-menu

Targets language menu elements. For example:

1

.language-menu__option

Targets language menu option elements. For example:

1

Lightbox classes

.lightbox

Targets lightbox elements. For example:

1

.lightbox__close-button

Targets lightbox close buttons. For example:

1

Line classes

.horizontal-line

Targets horizontal line elements. For example:

1

.vertical-line

Targets vertical line elements. For example:

1

Search bar classes

.search-bar

Targets search bar elements. For example:

1

.search-bar__icon

Targets search bar icons. For example:

1

.search-bar__input

Targets search bar input boxes. For example:

1