Styling Elements with CSS
Note: This feature is only available to Wix Studio 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:
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:
Language menu classes
.language-menu
Targets language menu elements. For example:
.language-menu__option
Targets language menu option elements. For example:
Lightbox classes
.lightbox
Targets lightbox elements. For example:
.lightbox__close-button
Targets lightbox close buttons. For example:
Line classes
.horizontal-line
Targets horizontal line elements. For example:
.vertical-line
Targets vertical line elements. For example:
Search bar classes
.search-bar
Targets search bar elements. For example:
.search-bar__icon
Targets search bar icons. For example:
.search-bar__input
Targets search bar input boxes. For example: