Styles
The Styles tab is a dedicated panel where you define the CSS properties for the currently selected Block or Global Style.
Including responsive controls, selector choices and the most commonly used CSS properties provides unparalleled design control.
The Styles panel can be viewed under the Block settings tab in the editors right sidebar and within the dedicated Global Styles panel in GenerateBlocks Pro.
Every Style panel is identical regardless of the block or global style that is selected.

To help learn the advanced styling settings the panel is broken into 4 parts:
- Selector
- Responsive Design Controls
- Style Search & Filter
- Style Inspector
Selector
More information on Selectors
You can read more about Selectors, how they work and how to use them in this related article on Style Selectors


Each GenerateBlock is automatically assigned a unique CSS class called a selector . For example:
gb-text-2c526fef
This class, known as the block’s Main Selector, is used in CSS rules to apply styles directly to the block.
The Main Selector can be altered using the More options, some of the options available are:
:hover
– applies the styles to the block when it is being hovered:hover & :focus
– applies the styles to the block when it is being hovered or focusedlinks
– applies the style the links within the blockhovered links
– applies the styles links within the block when they are hoveredSVG Icon
– applies the styles to the SVG icon contained within the block
Pro Selectors and Global Styles
GenerateBlocks Pro users have access to advanced selector controls allowing them to build any CSS selector for a selected block or a chosen Global Style.
Responsive design controls

The Responsive Design controls allow you to set and change Styles based on a specific screen sizes. The default options available are:
-
All Devices
-
Tablet & Mobile
defaults to:@media(max-width: 768px)
-
Mobile
defaults to:@media(max-width: 767px)
-
Open All AT-Rule Settings
to see the additional sizes below -
Desktop only
@media (min-width:1025px) -
Tablet only
@media (max-width:1024px) and (min-width:768px)
Advanced controls in GenerateBlocks Pro
In GenerateBlocks Pro the Open All AT-Rule settings allows you to register your own custom @media and @container queries.
Styles search and filter

The Style Search and Filter greatly simplify finding specific style properties. With them you can:
- Find specific properties
Simply type in a style property name or a comma delimited list eg.margin, padding, border
to reduce the list to just matching styles. - Hide Empty Controls
Quickly see only the Style properties that have a value. - Show inherited values
Show any property this is currently inheriting a style.
Style inspector
The Style Inspector is the main part of the styles panel and provides controls for over 80 commonly used CSS properties.



Style Groups
To simplify navigation through the extensive range of styles, the Style Inspector organizes the controls into 11 collapsible panels:
Style Inspector Controls
The Style Inspector Controls are for setting CSS Property values for a block or Global Style.



Each control is a direct representation of that CSS Style Property and accept values that meet the properties specification. To assist with setting the correct property value, the UI provides various control types including unit controls, option select boxes, color pickers and more advanced repeater fields.
Unit Control

The Unit Control is used for properties where the computed value is a number or percentage eg. Padding, Margin, Width, Height, Font size etc.
Most unit controls have a preset unit type of pixels ( px
). Users can:
- choose a commonly used unit type using the drop down menu inside the input field
the?
icon will provide more information on the available types. - enter a property value including any support unit type e.g
rem, px, % etc.
Group values
Padding, Margin, Borders, Border Radius and Inset all support 4 values relating to the sides ( or corners ) of the block. In these instances the controls provide options to link input fields.
Link 1 input value to ALL 4 sides
Link 1 input value for top & bottom and 1 value for left & right
Max width
The Sizing > Max Width input control incorporates an additional input filed button: the Global Max Width. This toggle button inserts the global max width CSS Variable var(--gb-container-width)
. The variables value is set in GenerateBlocks >Settings, which can be manually set or in GeneratePress Theme it auto syncs with the Customiser Container Width.
Color Picker

The Color provides options for color, background color and gradient values. It supports HEX and RGBA color values as well as CSS Variables.
Color Transparency can only be used where a RGB or HEX color value is present.
Select Box

Provides a list of pre-defined options to choose from. Used for properties that have a very strict value list such as display
.
The More Options may provide more information relating to the field or allow you to Enter Custom Value.
The default value
the default
option is available in certain select box options, such as the Layout > Display property,
To clarify, default is not a CSS property value. Selecting this option tells GenerateBlocks not to assign a value, allowing the block to follow standard CSS inheritance rules or the default behavior of its HTML tag.
Advanced Repeater Fields

Certain properties like box-shadow
and background
may require a multi value property and may be stacked ie. more than property value, For this we use an advanced repeater field option.
Custom properties (–*): CSS variables and CSS Math Functions
In addition to all the supported unit types and static property values , the GenerateBlocks Styles Engine supports:
Custom properties (–*): CSS variables
eg. var(--gb-container-width)
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
CSS Math Functions
including: calc()
, max()
, min()
, clamp()
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions
Basic Math Functions such as calc()
or clamp()
More information on using these advance values will be covered in future topics and tutorials.