CSS Panel Overview – Google Web Designer

CSS Panel Overview – Google Web Designer

August 21, 2019 3 By Bernardo Ryan


NATALIE: Hello My name is Natalie and I’m one of the engineers
that works on Google Web Designer. And in this video we’re going
to take a look at the CSS panel and how it works and what you can do with it. So when you edit an element’s appearance or position and layout
in Google Web Designer those changes end up as CSS which the tool automatically
generates for you. So for example when I draw a simple div if we go to Code view we can
see the element here in the HTML and the CSS style rule that was automatically applied to it via the CSS class name. And then if in Design view we for example
give it a background color then we can see that in Code view this color change was set as
the background-color CSS property on this element’s class. So as you make changes and edit your elements Google web designer will automatically make a lot of decisions for you under the hood regarding what CSS to create
and where to put it and this can be really powerful but sometimes you want a
little bit more control than that. Of course you can always go into Code view but as your file gets larger hunting for the right rules
can be pretty difficult. So this is where the CSS panel comes in The CSS panel is a CSS inspector and
editor tool and if you’ve ever used a tool like Google Chrome’s Developer tools
the Styles panel this is very similar
same idea. And any given point
the CSS panel is showing you all the style rules that apply to the element in an order of precedence maximum
to lowest precedence. The one at the top is special. This actually refers to
the inline style declaration so the style attributes on
the element. And the rest are just style rules. And so whether you want to edit
these style rules directly or whether you want to
have more fine-grained control over the hierarchy of your CSS rules the CSS panel can be very helpful. So let me delete this element and let’s walk through a use case. Let’s say I’d
like to create a button and what’s more it’ll be one of potentially multiple buttons that I’d like to create in my document and I’d like them all to be within the same visual language so let’s say I have
some style guide that I’m following and it presents a specification for all the
buttons let’s say they all have
to have rounded corners and a shadow and so on. And so I’d like to mirror that and create a hierarchy of styles and I can do all of this with the CSS panel without ever having to go into Code view. So I have a div drawn here
in the shape of a button and I’d like to create a generic
button class which will hold all the styles that should apply to all the
buttons on my page. So I’m going to click this Add rule button. Let me call it the
baseButton And let’s give it
some common button properties. I might have a
box-shadow say I want it to be translucent black. And let’s say I’d like it
to have rounded corners. and you can see that
the CSS panel automatically suggests standard CSS properties for me and I can use the up and down keys
to swipe through them. In this case I want border-radius. I can hit tab to accept and then
let’s say 20 pixels. The cursor should always be a pointer. and let’s give it
some kind of background color just so we have something to look at so just a generic gray button. So now let me define a couple of more specific buttons let’s say I’d like to have an OK button and a delete button and they should
inherit this baseButton style but also have more specific styles on top of it. So I’m going to select both of these new divs. Click the Add rule button again. and this time I would like to
rather than creating a new style I want to apply our
existing baseButton class. I’m just going to type that selector in and all the styles for that declaration
will get automatically pulled in. And now I can
just style each button one at a time with just the styles that should apply to that particular button
on top of this base style. So once again Add rule. Let’s call this one the okButton. And the only thing that I want to be
different about this button is that I want the background to be green. And then for the delete button same idea but the background should be let’s say maroon. Much like in Chrome’s developer
tools you can debug your CSS by using these blue check boxes
to temporarily turn off certain properties
as though they were never defined. This can be
helpful when you have a complex system of CSS rules and you want to see what your element looks like without certain style in play so if I uncheck this
background green we can see this element
as though only the base style and the other position properties applied and if I’d like to take a look
at all my buttons say without the border-radius I can toggle that on and off. So to recap
we’ve seen how we can use a CSS panel not only to directly edit styles but how to create
an extensible system of style classes all without ever having to go
into Code view. That’s it for this tutorial. Thanks for watching!