Style Makes Things Beautiful

All things in RZ Designer have style but maybe you want to be even more stylish.

The notion of teaching someone everything about styling is sort of like trying to eat an elephant. But like the saying goes, take one bite at a time. Let us take a few bites.

In previous articles we have said that the RZ Designer (designer) is building HTML code under the hood. Well a vital cohort of HTML is CCS (styling) which is responsible for describing how things look and some aspects of how things behave. There is a ton of resources on the Internet regarding HTML and CSS and so-called web design. But as we have said all along, you don’t need to be an expert on these topics in order to create great things with the RZ Designer. 

This article is going to cover just enough so you feel confident tweaking some of the things in your designs. 

To get started, let us take a simple text box for example. Drag a new text box onto your design canvas and make sure it is selected. The color of the text in that text box is probably black. Do you know why? Go the things style panel. Can you find where to change that text color to green? Scroll down in the thing styles panel to the Typography section. There you will find the Color ditty. Type in a color name or use the popup color picker. Change it to green. Did the text actually change to green in the designer? Probably but what if didn’t? Why would it not change? Well the answer is because in CSS, there is a precedence system and a higher precedent may be trumping your color setting. This is a great segue to a necessary CSS lesson.

To keep it simple, in CSS, something like color is applied to a thing according to a couple of factors. The first factor is akin to “last man wins”. For example, if in the HTML code, there are two directives trying to set the color, the last instance in the HTML code wins. The second factor is sort of akin to intimacy. For example, if the CSS color directive appears right in the HTML element itself e.g. the text box, that is considered pretty intimate as compared to anything else. You may be wondering what else? Enter stage right CSS’s ability to define directives from afar. Located just about anywhere in the HML code there may exist pieces of CSS code inside <style> tags which have the ability to effect far away HTML elements because they know something intimate about the things. One of these CSS directives can affect the color of not just one, but any number of and including all, text boxes and on the other hand, can target just one text box out of all text. The more intimate details that are known about an element, the higher the precedence will be. By the way, “last man wins” is considered only in cases where more than one directive has an equal intimacy score. Got all that?  

What does this so-called intimacy looks like? We already said that the most intimate CSS can get is to be right in the HTML element. For those CSS directives in style tags, they employ many ways to express their intimacy for example…

• ID – a unique identity assigned to each HTML element.

• Type – the type of HTML element e.g. the text box type.

• Class – sort of like tags. An HTML element can have multiple class tags.

Class is very important in the RZ Designer as you will soon see.

Back to the RZ Designer. Take notice of first ditty in the things style panel labeled Class. It is probably empty, but you can add one or more class tags to it. A Class tag is always one word meaning no spaces and may contain a dash or two.

Let us imagine you have several text boxes in your design and all of them have the same class tag of “my-dog”. Go ahead and add my-dog and then duplicate the text box a few times. Back in the things style panel you will notice that your class tag my-dog has a tiny-tiny check mark at its left. When this checkbox is checked, any/all changes you make to the style will affect any/all elements with the my-dog class tag. Go ahead and change the text color. You will see the text color changes for all of the text boxes. On the other hand, if you uncheck the class tag’s checkbox, then any/all styling you make will only affect the selected thing, and nobody else. As you are styling things, if the label of a style e.g. color is orange, that means there is perhaps something else contributing to the color of that thing, most likely class tags.

When a thing has more than one tag on it, each individual class tag can have its own affect and the combination can also have an effect. For example, on one text box there are two tags (my-dog and rover). On another text box, there are two class tags (my-dog and spot). Check one or the other and see what happens. Uncheck both and see what happens.

We could keep going but this a good stopping point. Practice on your own. Styles and class tags can really super-charge your designs when used properly. 

We hope you found this article valuable and we encourage you to read our other articles pertaining to RZ Designer and styling.