hello and welcome to another training
video from XM pro today we'll be looking
at how to use the block styling manager
the block styling manager is how you add
CSS styles to elements on your page to
get to the block styling manager click
on an element in the page and then click
on the block styling tab in the command
bar if you're on the blocks tab or the
page data tab when you click on an
element the tab will automatically be
changed to the block styling tab there
are several sections in the styling
manager the general section contains
options for the general positioning of
the element the dimension section
contains options for the size outer
margins and inner padding of the element
the Flex layout section contains options
for CSS flexbox Styles the typography
section contains options for affecting
text inside the element the decoration
section contains options for opacity
background borders and shadows and the
extra section contains options for
anything that doesn't fit in a different
category like transitions and rotations
how you would use these options is up to
you but as an example I can change the
font color size line height weight and
text alignment inside of this text
element
give a background color to the body of
the page there is a section at the top
of the styling manager that says style
group this is how you apply styles to
multiple elements at once so you've been
editing the Styles for one of these
paragraphs but you don't want to go into
each of them and do the same thing over
and over you can add a style group to
each of the elements I'll delete this
one and then and now the style that you
select applies to every element in the
style group any element that you add to
the style group later we'll get these
Styles as well if you want to add extra
Styles to one element of the style group
but not the others you can uncheck the
style group and change the Styles this
will apply the Styles to that element
only and not to the style group you can
then retake the style group to apply
styles to every element again and you
can remove the style group from an
element by clicking the X this will
remove the sales from this element which
have been applied to that style group
there is also the state drop down this
will apply Styles only when the state of
the element is whatever we select here
for instance select the hover State and
give a background color of green when
the hover is selected it will show a
preview but if we remove the hover
section selection it will behave
normally now when you hover over the
element the background color turns green
is also click which applies sales when
you click on an element
and even odd which will apply styles to
every odd element this is even odd even
odd even so it's every second element
that this applies to this has been how
to use the block styling manager
