Como personalizar os estilos (CSS) do meu curso

Como personalizar os estilos (CSS) do meu curso

Existem duas formas de personalizar os estilos do curso:

  • Diretamente nos Conteúdos HTML, utilizando a tag <style>.

  • Utilizando uma folha de estilos personalizada.

Diretamente nos conteúdos HTML

Podem ser adicionados estilos personalizados em conteúdos HTML a disponibilizar na plataforma.

Os estilos devem ser utilizados seguindo uma correta notação HTML:

<style> .estilo_personalizado { color: red; } </style>

Estes estilos podem depois ser aplicados nos conteúdos:

<div class="estilo_personalizado"> NOTA: Este conteúdo vai aparecer a vermelho </div>

Estes estilos são definidos ao nível do bloco de conteúdo. Um estilo definido num bloco de conteúdo HTML não é passível de ser utilizado noutro bloco.

Utilizando uma folha de estilos personalizada

Para obter estilos a utilizar em qualquer bloco de conteúdo, deve ser criada uma folha de estilos global e importar a mesma para o curso.

Para disponibilizar uma folha de estilos deve:

  1. Criar a folha de estilos num editor (por exemplo, Sublime text, VSCode, Notepad++, etc.)

  2. Guardar a folha de estilos com a extensão correta, ex: estilos.css

  3. Carregar a folha de estilos para os ficheiros do curso em Conteúdos > Ficheiros e Uploads

  4. Copiar o link para a Web

image-20250519-144501.png
Figura 1 - Cópia do link para a Web
  1. Navegar até ao menu Configurações > Configurações Avançadas

  2. Pesquisar por css para encontrar o campo CSS personalizado para todo o curso

image-20250519-144927.png
Figura 2 - Exemplo de uma personalização de CSS
  1. Adicionar o link que copiou de forma correcta, como no seguinte exemplo (importante garantir que a hiperligação está entre aspas)

[ "link_para_a_folha_de_estilos.css" ]

Definições avançadas de estilos

Caso deseje utilizar uma fonte diferente da utilizada na plataforma NAU, pode utilizar a API do Google Fonts para o fazer.

Pode carregar diretamente na folha de estilos a fonte que pretende utilizar:

/* A colocar em estilos.css */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

E posteriormente, criar as suas classes com recurso à fonte que carregou.

.titulos { font-family: "Roboto", sans-serif; }

Garanta fallbacks para as suas fontes, utilizando sempre no final da lista algo como sans-serif para que os estilos não apareçam quebrados no seu curso.


Esta página está licenciada com uma Licença Creative Commons - Atribuição 4.0 Internacional.


PRR Plano de Recuperação e Resiliência República Portuguesa Financiado pela União Europeia NextGenerationEU Compete 2020 Portugal 2020 União Europeia Fundo Europeu de Desenvolvimento Regional União Europeia Fundo Social Europeu


"República Portuguesa FCCN - Serviços digitais FCT; FCT - Fundação para a Ciência e a Tecnologia