Styling your elements

Once you've added elements to your page, the next step is to style them to match your design vision. WeWeb provides a visual way to apply CSS properties without writing code.

Accessing the styling panel

To style an element:

1. Select any element on your canvas
2. Look for the Styling tab in the right panel (the pen icon)
3. Use the available options to customize the element's appearance

Understanding style categories

The styling panel is organized into several categories:

Specific

This section shows the most commonly used properties for the selected element type. Different elements will show different options here, such as:

• Typography — Settings for text elements
• Image fit — Options for images
• Direction — Settings for containers

Text

Options for controlling text appearance:

• Font family And Size
• Text color And Decoration
• Line height And Letter spacing
• Text alignment And Transformation

Sizing

Control the dimensions of your element:

• Width And Height
• Min width/height And Max width/height constraints

Spacing

Manage the space around and within elements:

• Padding (Space inside the element)
• Margin (Space outside the element)

Display

Control how elements appear and behave:

• Position (Relative, absolute, fixed)
• Display (Show/hide) and Opacity
• Z-index (Stacking order)
• Overflow

Background

Add visual backgrounds to elements:

• Background color
• Background image Or Background gradient

Borders & shadows

Define the edges and depth of elements:

• Border width, Border style, And Border color
• Border radius (Rounded corners)
• Background shadow For depth

Advanced

For more sophisticated styling:

• Transformation (Rotate, scale, skew)
• Transition For animations
• Custom CSS

Learn about all available styling properties →

Responsive styling

WeWeb makes it easy to create designs that look great on all devices:

1. Use the breakpoint selector in the top bar to switch between desktop, tablet, and mobile views
2. When in a mobile or tablet view, any styling changes will apply only to that specific breakpoint
3. Use percentage widths and max-width constraints for fluid layouts

CONTINUE LEARNING

Now that you know how to style your elements, learn how to make them interactive:

Adding Interactivity →