How to Style Anvil Apps with CSS



About Anvil

Anvil is a platform for constructing full-stack net apps with nothing however Python. No have to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – simply construct all of it in Python. Get began with one among our tutorials or try an instance app. For extra assist, we’ve got detailed developer documentation and a pleasant Group Discussion board.

Anvil enables you to construct net apps totally in Python. You may construct your UI by dragging and dropping Python elements and styling them with Python code. However if you wish to have much more management over the looks of your Anvil apps, you need to use CSS.

CSS is a language used to fashion net pages. This information will present an introduction to CSS and the way we are able to use it to vary the looks of net pages. We’ll see how we are able to goal elements on an internet web page with CSS and write guidelines to change how these elements look. You’ll check your abilities with some challenges as we go alongside. We’ll then experiment with CSS on the dwell Anvil homepage utilizing the developer instruments constructed into your browser. Then, we’ll work by an instance of utilizing CSS to customise the looks of an Anvil app with the Materials Design theme.

On this information to utilizing CSS in Anvil, we are going to:

  1. Check out HTML and its relationship to CSS
  2. Look at CSS syntax in additional element, together with:
  3. Use the browser’s developer tools on the Anvil homepage to:
  4. Be taught extra about using CSS to style Anvil apps, together with:

The most effective exterior useful resource for studying extra about CSS and HTML is the Mozilla Developer Network Web Docs. The MDN Net Docs are an open-source venture that present reference guides and tutorials for net languages and applied sciences. They’ve detailed and clear sources for newcomers and superior customers. I’ll ceaselessly be linking to the MDN Net Docs on this information.



HTML and CSS

Once we speak about front-end net improvement, we’re speaking about all of the code that’s liable for displaying the visible a part of an internet site or net app. While you load an internet web page, all of the code related to displaying the web page is loaded into your browser, which is the place the code runs. You may really examine this code and make native modifications to it, which we are going to do with the Anvil homepage later in this guide.

Within the conventional, non-Anvil, method of doing front-end improvement, HTML is used to outline the weather that make up an internet web page. CSS targets these parts and defines guidelines that dictate how they may seem on the web page. While you drag-and-drop Anvil elements onto a kind, these elements generate their very own HTML. While you edit the part’s properties, this generates CSS guidelines that concentrate on the HTML to fashion the part.

HTML defines the weather on a web page utilizing “tags”. Probably the most primary HTML ingredient is a <div>, which is only a generic container with no pre-defined styling. Fairly often, HTML parts are nested inside one another, simply as in Anvil the place we regularly nest elements inside containers like ColumnPanels and FlowPanels. For instance, the next code defines a <div> and provides a button that claims ‘Submit’ to the web page:

<div>
  <button>Submit</button>
</div>
Enter fullscreen mode

Exit fullscreen mode

With CSS, we are able to goal the button and alter the best way it appears. The next code targets all buttons on the web page, provides them a pink border and a grey background colour:

button {
  border: 1px strong pink;
  background-color: grey;
}
Enter fullscreen mode

Exit fullscreen mode

Subsequent, we’ll take a better have a look at CSS and its syntax.



CSS Syntax

With CSS, we are able to write guidelines that inform the browser what every part on our webpage ought to seem like. CSS stands for Cascading Stylesheet. ‘Stylesheet’ refers back to the doc the place the CSS styling guidelines are written, and ‘Cascading’ refers back to the order by which CSS applies these styling guidelines. A CSS rule has three components:

  1. Selector: This ‘selects’ which HTML ingredient or parts to use the rule to.
  2. Property: That is the characteristic of the ingredient that can be focused.
  3. Worth: Describes how the property can be rendered by the browser.



Selectors and courses

Within the earlier instance, we used CSS to focus on <button> parts. We did this by simply writing the identify of the tag after which defining the rule. That is known as a sort selector.

Extra typically, we are going to goal parts by giving them a class. Courses may be utilized to as many HTML parts as we would like. They’re a method of making use of the identical fashion to a number of parts with out repeating code. So as to add a category in HTML, we use the class attribute, and to make use of the class selector, we use . adopted by the category identify.

Let’s prolong our earlier instance and provides the button a category. Then, we are able to apply styling guidelines to that class. This fashion, we cannot change each single button on the web page, simply those we wish to goal. Let’s give the button a category known as submit and apply the identical styling guidelines simply to that class:

<div>
  <button class="submit">Submit</button>
</div>
Enter fullscreen mode

Exit fullscreen mode

.submit {
  border: 1px strong pink;
  background-color: grey;
}
Enter fullscreen mode

Exit fullscreen mode

There are a variety of various CSS selectors, which you’ll examine here, however an important for this information are sort and sophistication selectors.



Attempt it your self

Now it is your flip! Open the next code in CodePen and:

  1. Give the second <button> a category known as cancel
  2. Within the CSS, goal that class and provides it a distinct background colour.

The background-color property can take some text-based values in addition to hex and rgb values. Learn extra about background-color here



Combining selectors

Selectors can be mixed in numerous methods. Let us take a look at how we are able to use extra advanced selectors to focus on the weather that we would like.



A number of selectors

Selectors may be grouped utilizing a , with the intention to apply the identical guidelines to a number of selectors. Within the instance under, parts with the submit or the cancel class may have a font dimension of 16px:

.submit, .cancel {
  font-size: 16px;
}
Enter fullscreen mode

Exit fullscreen mode



Combining sort and sophistication selectors

A category selector can come immediately after a sort selector (with no area in between) to pick parts of that sort with that class. For instance, we are able to use the next code to pick <button> parts with the submit class (in case there are different sorts of parts which have the identical class identify):

button.submit {
  border: 1px strong pink;
  background-color: grey;
}
Enter fullscreen mode

Exit fullscreen mode



Deciding on descendents

Typically, we wish to choose parts which can be nested inside different parts. For instance, we would wish to choose buttons which can be inside a card container however no different buttons. An area between two selectors will choose the weather which can be descendants of the primary ingredient, whereas a > will choose the weather which can be a baby (a direct descendant) of the primary ingredient.

For instance, the next HTML code defines a <div> ingredient with the category card, which has one other <div> with the category buttons-div nested inside. Inside that <div> are two <button> parts:

<div class="card">
  <div class="buttons-div">
    <button class="submit">Submit</button>
    <button class="cancel">Cancel</button>
  </div>
</div>
Enter fullscreen mode

Exit fullscreen mode

As a result of the <button> parts are inside the <div> with the card class, we are able to choose them with the next CSS:

.card button {
  border: 1px strong pink;
  background-color: grey;
}
Enter fullscreen mode

Exit fullscreen mode

Nonetheless, the <button>s are usually not youngsters of the card ingredient as a result of they don’t seem to be immediately nested inside the <div>, however they’re youngsters of the buttons-div ingredient. The primary rule under is not going to choose the <button>s whereas the second rule will:

/* This would possibly not choose the buttons as a result of they don't seem to be youngsters of the "card" <div> */
.card > button {
  border: 1px strong pink;
  background-color: grey;
}

/* This may choose the buttons as a result of they're youngsters of the "buttons-div" <div> */
.buttons-div > button {
  border: 1px strong pink;
  background-color: grey;
}
Enter fullscreen mode

Exit fullscreen mode

For extra on combining CSS selectors, see the MDN web docs.



Attempt it your self

Now it is your flip to mix CSS selectors to focus on parts. For the next challenges, open the code in CodePen, and do not add any new courses:

  1. Choose the second <p> and provides it a color of pink. However hold the primary <p> the best way it’s.
  2. Give each the submit and clear buttons a background-color of lightblue, however depart the cancel button the best way it’s.
  3. Give the <div> inside the card a border property of 1px strong pink

Caught? Check out a solution.



CSS properties

There are lots of totally different CSS properties that have an effect on the format and look of HTML parts, nevertheless it’s past the scope of this information to go over them intimately. For an inventory of all CSS properties and their corresponding values, see the MDN web docs. Basically, the MDN docs are one of the best place to study extra about CSS properties as a result of they’re detailed, give visible examples and are simple to comply with.



Utilizing the developer instruments

Your browser has built-in developer instruments that can assist you with front-end net improvement. These developer instruments allow you to see all of the code and recordsdata which can be loaded into the browser while you open an internet web page. We will use the dev instruments to examine dwell code and make native edits, so they’re an extremely helpful instrument for debugging and experimenting with styling.

Let’s now use the dev instruments to examine the Anvil homepage and see how HTML and CSS works out within the wild.



Deciding on a component

While you load an internet web page, all of the code used to show that web page is loaded into the browser. Which means we are able to see the supply code for any net web page we are able to load in our browser, and we are able to make native modifications to that code. Let’s go to Anvil’s homepage and examine the supply code.

On the web site, you possibly can proper click on and select ‘Examine’ to deliver up the browser’s developer instruments. (I exploit Google Chrome, however different browsers may have very comparable dev instruments).

Right-clicking on the homepage to inspect its code

Within the dev instruments, click on on ‘Parts’ to deliver up the HTML and CSS for the web page. Then click on on the icon that appears like a sq. with a mouse cursor. This may enable us to pick a component on the web page and examine its HTML and CSS.

The Elements tab in the dev tools

Let’s choose the hyperlink that claims “Begin with a fast tutorial” on the Anvil web site. This may spotlight the related HTML within the dev instruments and present us the CSS related to that ingredient.

Selecting the tutorial link on Anvil's homepage



Inspecting the HTML

That is the HTML liable for displaying that hyperlink:

Screenshot of the dev tools showing the HTML code for a link on the Anvil homepage

Right here we’ve got an <a>, or anchor, element. Anchor parts are hyperlinks, and the href attribute specifies the hyperlink’s “goal”: often, the URL to open while you click on it The ingredient additionally has a class attribute. This specific ingredient has two courses: nowrap and tutorial.

There’s additionally an <svg> ingredient nested contained in the <a> ingredient. The SVG is displaying the arrow within the hyperlink. As a result of the <svg> is nested immediately contained in the <a>, we are able to say that it’s a youngster of the <a>.



Inspecting the CSS

Within the dev instruments, we are able to see the CSS being utilized to the ingredient. The primary rule appears like this:

Screenshot of the dev tools showing the CSS code for a link on the Anvil homepage

The primary line is the selector. This specific selector means “choose the ingredient with the tutorial class that may be a descendent of a component with the sub-hero-links class which is a descendent of a component with each the col-hero and house courses”.

The following line of the CSS rule is the property we wish to goal and the way it needs to be displayed. This specific rule is making the color of the ingredient a lightweight gray.

We will really modify the code immediately within the dev instruments. If I alter the colour of the hyperlink to be lightgreen, for instance, we are able to see the change dwell within the browser.

Changing the color of the tutorial link from the browser

That is extremely helpful for styling apps. You may change and add CSS properties immediately within the dev instruments and instantly see the outcomes. After enjoying with the CSS styling within the browser, you possibly can then go and really change the supply code of your app. The dev instruments are additionally extremely helpful for debugging. If a component shouldn’t be displaying the way you assume it needs to be, you possibly can examine it to see what CSS code is being utilized to the ingredient. Refreshing your browser will reload the web page, and your native modifications can be gone. This makes it simple to experiment with out worrying about breaking the supply code.



Utilizing CSS in Anvil apps

With Anvil, you possibly can construct the front-end of your net app totally in Python. Nonetheless, even when you’re styling your apps in Python, your apps nonetheless use HTML and CSS. Anvil elements generate HTML, and altering the properties of these elements modifies the CSS for these elements. In Anvil, we are able to change the looks of elements utilizing Python through the Properties Panel or client code. Each Anvil app additionally has a stylesheet, so we are able to additionally write CSS for our app within the conventional method. This provides us extra management over the looks of an app.

To see how CSS is utilized in Anvil apps, let’s create a new Anvil app and select the Materials Design theme.



Making use of CSS through Python

Anvil elements have properties that may be modified through the Editor or by Python code. Once we modify a part’s properties, CSS is utilized to the part’s HTML in a style attribute. To see this in motion, let’s drag and drop a Button part onto our Anvil app and alter its background colour to grey within the Properties Panel:

Drag and drop a Button onto the form and change its  raw `background` endraw  in the Properties Panel.

We will additionally change properties from code. Let’s swap to code view and alter the foreground colour of our button within the __init_ of our Type code.

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Type properties and Information Bindings.
    self.init_components(**properties)
    self.button_1.foreground = "white"
Enter fullscreen mode

Exit fullscreen mode

We will now run our app and examine the web page, identical to we did with the Anvil homepage. If we choose the button, we are able to see some HTML that appears like this:

<button class="btn btn-default to-disable" ontouchstart=""
fashion="max-width: 100%; text-overflow: ellipsis; overflow: hidden; background-color: grey ; colour: white;">...</button>
Enter fullscreen mode

Exit fullscreen mode

Inside the fashion attribute, we are able to see each the background-color property that we added within the Properties Panel and the colour property (foreground in Anvil) that we added within the Type code.



Writing CSS within the stylesheet

We will additionally goal Anvil elements and write CSS guidelines within the app’s stylesheet. Each Anvil app has a stylesheet named theme.css related to it, which may be discovered within the App browser beneath “Belongings”.

As a result of we created an Anvil app with the Materials Design theme, our app’s stylesheet is already populated with CSS guidelines. Let’s open theme.css and modify a few of the code.

Location of  raw `theme.css` endraw  in the App Browser

Let’s discover the CSS code associated to styling Buttons. Ctrl + F and seek for “button”. This could land us round line 548. Right here we are able to see some CSS that’s utilized to elements with the btn class. If we run our app and examine the button once more, we are able to see that it has a category known as btn. On this rule, let’s regulate the background-color to be one thing totally different:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue; /* This line is modified */
  ...
}
Enter fullscreen mode

Exit fullscreen mode

Now, if we run the app, we are able to see that nothing has modified. Let’s examine the button to see what’s going on. We will see the background-color we added in theme.css is crossed out, and as an alternative the background-color that we added within the Properties Panel is taking priority.

Code showing that the  raw `background-color: gray` endraw  property in the  raw `style` endraw  attribute is taking precedence.

When CSS properties battle with one another, CSS has guidelines to find out which property is utilized. Styling guidelines written within the stylesheet can be utilized first, then guidelines written within the HTML can be utilized. That is why our Button is grey and never lightblue. The background-color: grey property written within the HTML can be utilized final and subsequently overrides the background-color: lightblue property in theme.css.

If CSS styling guidelines written within the stylesheet battle, then the final rule will override previous guidelines. That is why stylesheets are cascading. For instance, if we had the next code in a stylesheet (and no conflicting styling guidelines added to the HTML), then buttons would find yourself having a pink background:

button {
  background-color: grey;
}

button {
  background-color: pink;
}
Enter fullscreen mode

Exit fullscreen mode

Nonetheless, if guidelines have totally different selectors however might nonetheless battle, then probably the most particular rule applies. Class selectors are extra particular than sort selectors. So within the following code, buttons with the submit class would have a grey background colour regardless of the rule coming first:

.submit {
  background-color: grey;
}

button {
  background-color: pink;
}
Enter fullscreen mode

Exit fullscreen mode

The cascade and specificity guidelines may be overridden by utilizing !essential. !essential is utilized to a property inside a rule with the intention to make its worth extra essential than another conflicting worth, however that is virtually all the time a nasty concept. We’ll talk about why !essential needs to be prevented, however let’s first see the way it works by making the background-color property we set in theme.css !essential:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue !essential;
  ...
}
Enter fullscreen mode

Exit fullscreen mode

If we run the app once more, the button now has a lightweight blue background. Inspecting the button exhibits that the background-color set within the fashion attribute is crossed out this time. In apply, we should always not use !essential right here. As a substitute, we should always both set the background-color we would like from the Properties Panel or take away the background-color set there and set it in theme.css with out making it !essential.

The  raw `background-color: lightblue` endraw  property is now  raw `!important` endraw , so the Button is light blue.

Basically, utilizing !essential needs to be prevented. Sometimes, you might want to make use of it to override default styling guidelines that you do not have entry to. (The instance above shouldn’t be one among these situations.) However overriding the cascade makes debugging troublesome and can typically trigger different builders (and your future self) ache and confusion. As a substitute, attempt reordering guidelines and utilizing extra particular selectors. You may learn extra about specificity and !essential here.



Anvil Roles

We will add CSS courses to Anvil elements utilizing Anvil Roles. After you create a Position, you possibly can write CSS guidelines within the app’s stylesheet to outline how the Position will have an effect on elements. You may apply the Position to a part by the Properties Panel or in code.

Let’s create a brand new Position in our app to use to our Button. Within the sidebar, click on on “Theme”, then select “Roles”. Click on on “+ Add a brand new position” then select a reputation for the position. I’ve named my position submit and have restricted it in order that it will probably solely be utilized to Button elements.

Creating a new Anvil Role called  raw `submit` endraw  and restrict it to Button components.

Let’s now swap again to Form1 and provides the Button the submit Position. Let’s additionally take away any properties we set within the Editor or within the Type code.

Giving the button the  raw `submit` endraw  role.

We must also change the code we altered in theme.css. Proper now, all buttons in our app can be gentle blue, however let’s use the position we simply outlined to solely make Buttons with the submit Position gentle blue. So the code we modified in theme.css ought to seem like this once more:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: clear; /* this line is modified again */
  ...
}
Enter fullscreen mode

Exit fullscreen mode

The Button now has the submit Position, which implies Anvil will give the part a CSS class. The category identify would be the Position identify with the prefix anvil-role-. We will now go into theme.css and write some styling guidelines for the anvil-role-submit class.

On the very backside of theme.css, let’s choose the anvil-role-submit class and alter the background colour, the font colour and the font dimension:

.anvil-role-submit {
  background-color: lightblue;
  colour: white;
  font-size: 22px;
}
Enter fullscreen mode

Exit fullscreen mode

Run the app to see how the code labored.

Our button does not fairly look proper, so we should always examine the app to see what’s going on. If we choose the ingredient with the sunshine blue background, we are able to see that it’s a <div> that has the anvil-role-submit class. Within this <div> is the Button we really wish to goal.

Screenshot of the dev tools showing the HTML for the outer <div> element and the <button> nested inside

Let’s return to theme.css and modify the selector so we choose the <button> nested contained in the <div>.

There are a couple of methods we are able to do that, however let’s be as particular as doable and choose <button> parts which have the btn class which can be youngsters of the .anvil-role-submit class:

.anvil-role-submit > button.btn {
  background-color: lightblue;
  colour: white;
  font-size: 22px;
}
Enter fullscreen mode

Exit fullscreen mode

Now let’s rerun our app to see if we have chosen the proper ingredient.

Image description

Nice, it labored!




Abstract

On this information, we’ve got gone over the fundamentals of utilizing CSS in Anvil apps. We briefly coated HTML and how it relates to CSS. We additionally checked out how to write CSS rules utilizing selectors and properties. We have additionally seen how we are able to use the browser’s developer tools to examine code and make native modifications. When using CSS in Anvil, we are able to edit the properties of Anvil elements with Python or by writing CSS rules in the app’s stylesheet. We will additionally define Anvil roles so as to add CSS courses to Anvil elements.

CSS is a really highly effective instrument, however we have solely scratched the floor on what it will probably do. I extremely advocate enjoying round along with your browser’s developer instruments to examine net pages and make native modifications to the code. It is a nice solution to study extra about how CSS works.

If you would like to study extra about methods to use CSS, try my prompt sources under:



Additional studying

  • For a brief tutorial that can assist you get began with CSS, try MDN’s CSS basics.

  • For an introduction to HTML, MDN have a good, easy-to-follow tutorial designed for newcomers.

  • For a extra in depth introduction to CSS, MDN even have a good CSS tutorial that assumes no prior CSS data however assumes you’ve gotten accomplished their HTML tutorial.

  • For a full checklist of CSS properties and examples of their use, try the MDN web docs.

  • In case you choose extra interactive tutorials, I extremely advocate Scrimba. Their HTML and CSS crash course is designed for newcomers.

  • For articles on CSS matters and funky tips, see CSS Tricks.

Add a Comment

Your email address will not be published. Required fields are marked *