--- title: CSS slug: low-code/css description: Learn how to configure CSS for Low Code forms with this step-by-step guide. Discover how to access the CSS functionality through the menu and edit CSS resources. Explore the columns and options available in the CSS editing interface, including the ability docTags: createdAt: 2023-08-24T13:09:30.094Z --- ## Configurar CSS A **apresentação visual **dos **formulários Low Code **pode ser customizada através de uso de **CSS** (**Cascading Style Sheets**), que são associados aos formulários como Dependências (ver a documentação sobre [Formulário](docId\:d-N8OlUOa5-33AnBBGSoK) para mais detalhes sobre dependências). ## Passo a passo ::::WorkflowBlock :::WorkflowBlockItem Acesse a funcionalidade através da navegação no menu `Recursos > CSS`. ![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/BPqsOV5K4TcCqrQPDYmqP_image.png) ::: :::WorkflowBlockItem Em **Ações**, clique no ícone de edição: | **Coluna** | **Descrição** | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Recurso | Informa o caminho do recurso CSS usado pelo sistema. É possível clicar no título da coluna para organizar os recursos de forma ascendente ou descendente de acordo com a data de edição. | | Nome | Identificador único do CSS | | Descrição | Descrição do CSS | | Versão | Número da versão do recurso | | Ações | Clique em um dos ícones para **Editar **o recurso: **Editar versões anteriores** ou **Excluir **o recurso. | ::: :::: No canto superior direito da página é possivel encontrar o botão de **criar** um novo código CSS, e ao lado deste a barra de pesquisa, para pesquisar um CSS na lista. Ao fim da página é possível encontrar informações relativas ao número total de recursos cadastrados, o número de recursos por página e o número de páginas. O sistema permite que sejam visualizados 10 ou 50 recursos por página. Na coluna de ações, ao selecionar o ícone de **Editar **ou **Editar Versões Anteriores**, será redirecionado para esta tela: ::::LinkArray :::LinkArrayItem ![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/PuV9a1Z2_KwSZZEENouay_image.png) ::: :::LinkArrayItem ![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/4v94K6fCwXSgjTnjpwqnq_image.png) ::: :::: As telas apresentam os seguintes campos: | **Campo** | **Descrição** | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name (*Nome*) | O nome é um identificador único do CSS selecionado. Este campo não aceita espaços, e não é possível ter dois CSS com o mesmo nome. | | Description (*Descrição*) | Insira a descrição do código | | Folders (*Pastas*) | Ferramenta usada para organização dos elementos de forma hierárquica no código da página. | | Versio (*Versão*) | Este campo mostra qual a versão do CSS está sendo visualizada no momento. Qualquer alteração feita pode ser salva com uma nova versão, e o sistema mantém versões antigas disponíveis. | | Content (*Conteúdo*) | Este campo apresenta o código CSS propriamente dito. É possível editar normalmente o CSS como em um editor de código, e a visualização aponta possíveis erros ou incongruências no código com um ícone de atenção "⚠️" nas linhas. O possível erro é detalhado ao passar o ponteiro do mouse sobre o ícone. | | Save (*Salvar*) | Salva as alterações feitas. É possível salvar como uma nova versão, ou salvar na mesma versão que está sendo editada. As alterações serão salvas em um arquivo usado pelo browser. | | Cancel (*Cancelar*) | Cancela as alterações e volta para a lista de CSS |