Styling Elements with CSS
This feature is not yet available to all users.
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:
css | Copy Code.button {background-color: red;}
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
Was this helpful?