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:

Criar a folha de estilos num editor (por exemplo, Sublime text, VSCode, Notepad++, etc.)
Guardar a folha de estilos com a extensão correta, ex: estilos.css
Carregar a folha de estilos para os ficheiros do curso em Conteúdos > Ficheiros e Uploads
Copiar o link para a Web

Figura 1 - Cópia do link para a Web

Navegar até ao menu Configurações > Configurações Avançadas
Pesquisar por css para encontrar o campo CSS personalizado para todo o curso

Figura 2 - Exemplo de uma personalização de CSS

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.