• Skip to primary navigation
  • Skip to content

Mauda

IT, Java and Music

Graduação   SCJP   Mestrado
  • Apresentação
  • Certificação Java
  • JPA
    • Exceptions
  • JSF
  • Versionamento
  • Contato

Adicionando arquivos CSS a um projeto JSF

September 3, 2018 by Mauda Leave a Comment

Conteúdo do Post:
  1. Cascading Style Sheet (CSS)
  2. Criação do arquivo geral.css
  3. Adicionar o caminho de um arquivo CSS a um XHtml
  4. finally{

Olá Pessoal, tudo bom?

O artigo de hoje está relacionado a adição de arquivos no formato CSS  (Cascading Style Sheet). Para isso, o ponto de partida será o artigo que fala sobre a criação de um projeto Maven + JSF. Veja na continuação desse post…

Cascading Style Sheet (CSS)

Cascading Style Sheets é um mecanismo para adicionar estilo a um documento web. Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos. Quando quiser alterar a aparência do portal, basta modificar apenas um arquivo. Isso ajuda no reuso de código dentro de várias páginas Html e derivadas como Xhtml.

Criação do arquivo geral.css

Primeiramente vamos crie uma folder (não lembra? aqui) de nome resources dentro da folder webapp. Em seguida crie uma nova folder chamada css dentro da folder resources recém criada. Agora clique com o botão direito em cima da pasta css, vá em new > File e crie o arquivo geral.css. Suas pastas deverão ficar igual a da Figura 01.

Figura 01 – Estrutura de pastas ao finalizar as configurações dos CSS

 

Agora é necessário editar esse arquivo com os css desejados. Abaixo existe um exemplo de algumas características em CSS.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body{
    color:           black;
    font-size:       12px;
    font-weight:     bold;
    font-family:     Arial, Verdana, Serif;
    text-align:      center;
    background:      center url('#{facesContext.externalContext.requestContextPath}/resources/images/bg.jpg') no-repeat;
}
 
.wrapper {
    width:           100%;
    overflow:        hidden;
}
 
.headerLeft {
    width:           10%;
}
 
.headerRight {
    width:           90%;
}
 
.labelField {
    font-size:       14px;
    font-weight:     bold;
    border:          0px solid white;
}
 
.textField {
    font-size:       12px;
    font-weight:     normal;
    border:          0px solid white;
}
 
.conteudoPanel {
    background:      #fff0;
}
 
.ui-panelgrid tr,
.ui-panelgrid td,
.noBorder.ui-widget-content,
.ui-layout-unit-content {
    background:      #fff0 !important;
    border-style:    none !important;
}

 

Adicionar o caminho de um arquivo CSS a um XHtml

Para adicionar a um arquivo XHtml você deverá utilizar a seguinte tag JSF:

Java
1
<h:outputStylesheet name="geral.css" library="css"/>

Onde resources/css/geral.css é o caminho para a pasta que você acabou de criar para abrigar os css.

Essa tag deve ser utilizada dentro do Head da página.

finally{

Duvidas ou sugestões? Deixe seu feedback! Isso ajuda a saber a sua opinião sobre os artigos e melhorá-los para o futuro! Isso é muito importante!

Até um próximo post!

Filed Under: JSF Tagged With: css, JSF

About Mauda

Mestre em Informática, Analista de Sistemas, Professor, SCJP e Baterista. Desde 2002 trabalhando no mundo Java e ensinando pessoas sobre desenvolvimento de sistemas. Mais informações

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Advertisements

Copyright © 2025 · Genesis Framework · WordPress · Log in