Construção Web Design
AULA 03 – HTML, CSS E PHOTOSHOP
CSS – Arquivo separado
2
 <link href="css/style.css" rel="stylesheet" type="text/css" />

O HTML fica mais limpo e organizado;
CSS: Class e ID
3
 DIV
 HTML: <div id=“topo”></div>
 CSS: #topo { ... }
 CLASS
 HTML: <div class=“topo”></div>
 CSS: .topo { ... }
CSS: Class e ID
4
 Quando usar?
 Quando o HTML obedece uma hierarquia.
 Exemplo
 HTML:
 <div id=“topo”>
<div class=“logo”><img src=“logo.jpg” /></div>
 <div class=“menu”></div>






</div>
CSS:
#topo { ... }
#topo .logo{...}
#topo .menu{...}
CSS: Class e ID
5
 Outro exemplo


HTML:
<div id=“conteudo”>






Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
libero quam, <span class=“titulo”>dignissim ut gravida </span>at,
imperdiet in arcu. Nulla dolor augue, rhoncus interdum pharetra a,
pharetra eget. <span class=“detalhe”>Nullam porta</span>tincidunt
sollicitudin. Aliquam erat volutpat. Vestibulum et nisi tellus, placerat
mattis tellus.
</div>
CSS:
#conteudo{ ... }
#conteudo .titulo{...}
#conteudo .detalhe{...}
Tabelas
6
 <table>
 <tr>
<td></td>
 <td></td>
 <td></td>



</tr>
<tr>
<td></td>
 <td></td>
 <td></td>


</tr>
 </table>
Tabelas
7
 Propriedades:
 Width=“100%” ou “250px”
 border=“1”
 cellpadding=“2”
 cellspacing=“2”
 bgcolor=“red”
 Bordercolor=“blue”
Imagens - Photoshop
8
 CSS:
 Background: url(caminho) repeat-x;
Atividade
9