CSS stands for Cascading Style Sheets, a style sheet language used for adding style to HTML web documents. CSS panel is the instrument in the Boxmode editor that allows you to manipulate CSS properties of different HTML elements on the page. 

In the Boxmode editor, you can also find the HTML iFrame widget, which allows you to embed HTML, CSS, and JavaScript code. This way, you can add content from external sources.

Caution!

You won’t be able to manipulate CSS properties of embedded content using the CSS panel.

To start changing CSS properties, you need to select the element on canvas by clicking on it or choosing it in the Layers menu.

CSS properties in the CSS panel are grouped into six categories: 

  • Layout 
  • Display 
  • Flex
  • Background 
  • Typography 
  • Adjustments
Note:

Different elements have different CSS properties available to customize.

Layout

In the Layout category, you can customize the element’s width, height, margins, and paddings. Click on the disclosure control next to each CSS property and adjust additional settings (minimal and maximum width and height; top, right, bottom, and left paddings and margins.)

If you want to reset the settings of margins or paddings, click the Refresh icon.

Important:

All inputs take integer values. If you use floating-point numbers, they will be rounded. You can use pixels or percentage units. Other units are not acceptable.

You can see the factual width, height, paddings, and margins of a given element on the current viewport size, which may vary depending on the device.

Display

The Display category allows you to manage such CSS properties as:

  • Display. This property defines how the elements should display. It can take the following values: Inline block, Block, Inline, Flex, and Default. 
  • Float. It specifies how the element should float. It can take the following values: None, Left, Right, and Default.
  • Clear. The property specifies what should happen with the element that is next to the floating element. It can take the values: None, Left, Right, Both, Default. 
  • Overflow. The property controls the behavior of the element’s content if it’s too long to fit into an area. It can take the values: Hidden, Visible, Scroll, Auto, and Default. You can also control the element’s overflow along the X and Y axes separately. Click on the disclosure control and change corresponding X and Y inputs. 
  • Opacity. The Filter submenu includes the CSS Opacity property that controls the degree to which content in the element is opaque. It can take 0 to 100% values, where 0 is completely transparent and 100% is completely opaque. If you want to reset the setting of the CSS opacity property, click the Refresh icon.

Flex

In the Flex category, you can change different CSS properties related to the CSS Flexible Box Layout (a module of CSS that defines a CSS box model optimized for user interface design.)

Important:

You need to set the value Flex of the CSS display property in the Display category before you can apply any CSS properties in the Flex category.

By switching between Horizontal and Vertical tabs, you can change the value of the CSS flex-direction property to row or column, respectively. By choosing icons in these two rows, you can define the CSS “justify-content” property that aligns items along the main axis and the “align-items” property that aligns items along the cross axis.

In the first row, you can choose the CSS “justify-content” property’s value:

  • Flex-start
  • Center
  • Flex-end
  • Space-between
  • Space-around

In the second row, you can pick the CSS “align-items” property value:

  • Flex-start
  • Center
  • Flex-end
  • Stretch
  • Baseline

The Reverse Layout option permutes the starting and ending points of the container’s main axis. If flex-direction is set to row, it resets it to row-reverse. If flex-direction is set to the column, it resets it to column-reverse.

The Wrap Children option sets the flex-wrap CSS property to wrap.

Note:

When the Reverse Layout option is switched on, the flex-wrap CSS property doesn’t change to wrap-reverse.

The Grow option sets the flex-grow CSS property, which specifies how much the item will grow relative to the rest of the items inside the same flex container.

The Shrink option sets the flex-shrink CSS property, which specifies how much the item will shrink relative to the rest of the items inside the same flex container.

The Basis option sets the flex-basis CSS property, which specifies the initial width of the flex container’s child.

The Order option sets the order CSS property, which specifies the order of the item relative to the rest of the items inside the same container. 

The Self-align option specifies the alignment for the selected item inside the flexible container.

If you want to reset the settings in the Flex category, click the Refresh icon.

Background

In the Background category, you can set the background color or image.

The element’s background color can be defined using hexadecimal, RGBA color declaration, or the toggle options on color canvas.

If you want to add the background image, you will see the following options:

  • Attachment. It sets the background-attachment CSS property, which specifies whether a background image’s position is fixed within the viewport or scrolls with its containing element. It can take the following values: Scroll, Fixed, and Default.
  • Position. It sets the background-position CSS property, which specifies the starting position of the background image within a container along X and Y axes using respective keywords. It can take the following values: Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  • Repeat. It sets the background-repeat CSS property, which specifies how to repeat the background image if its size does not match the container’s dimensions. It has the following choices: Repeat, Horizontally, Vertically, No repeat, and Default.
  • Size. It sets the background-size CSS property, which specifies the size of the background image. It has the following choices: Auto, Cover, Contain, and Default.

Typography

In the Typography category, you can change font-related CSS properties.

  • In the Typeface option, you can change font-family and font-weight CSS properties using drop-down menus.
  • In the Style option, you can set the text’s size, italicize the text, and choose the text’s color. 
  • In the Line height option, there are two inputs: Line and Letter.
    The Line input allows you to change the line-height CSS property, which sets the distance between the text lines.
    The Letter input allows you to change the letter-spacing CSS property, which sets the horizontal spacing between the text characters.
  • In the Alignment option, you can specify the horizontal alignment of the text.

Adjustments

The Adjustments category includes four options:

  • In the Border option, you can specify the element’s borders’ style (solid, dashed, or dotted), width, and color. 
    You can customize each border separately. To do this, select the corresponding side of the square input by clicking on the dot and set the style, width, and color.
  • In the Radius option, you can make borders rounded by increasing the px or % value of the input. 
    You can customize the border radius of each side of the element separately by selecting the corresponding corner of the rounded square input and setting the required value.
  • In the Box Shadow option, you can attach a shadow to the element. The box-shadow CSS property can take values for the X and Y axes. You can also set the shadow’s blur, spread, and color.
  • In the Text Shadow option, you can attach a shadow to the text. The text-shadow CSS property can take values for the X and Y axes. You can also set the text shadow’s blur and color.

If you want to reset any adjustments, click the Refresh icon. 

We hope this article helped you understand how to use the СSS panel.

Now, it’s time to try the CSS panel’s options and customize your website as you wish.

Go to Editor