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 Style 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:

• Placeholder color and Input type — Settings for form inputs
• Fit — Options for images

Text

Options for controlling text appearance:

• Font family and Size
• Text color and Decoration
• Line height and Letter spacing
• Alignment and Character case

Layout

Arrange the elements inside a container:

• Direction (vertical or horizontal)
• Row gap and Column gap
• Justify and Alignment

Sizing

Control the dimensions of your element:

• Width and Height
• Min-width, Max-width, Min-height and Max-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:

• Display (for example block or flex, or none to hide the element)
• Align Self (how the element aligns inside its parent)

Background

Add visual backgrounds to elements:

• Color
• Image or Gradient

Borders & shadows

Define the edges and depth of elements:

• Borders (width, style, and color) and Outline
• Radius (rounded corners)
• Shadows for depth

Effects

For more sophisticated styling:

• Opacity and Position (normal, sticky, absolute, fixed)
• Z axis (stacking order) and Overflow
• Transform (rotate, translate, scale)
• Transitions for animations

Animation and custom CSS

• Animation — Animate an element with keyframes, a duration, and a delay (available on most elements)
• Custom CSS — Add your own CSS to the element

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 canvas header 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 →