Formatação usando HTML e CSS

Esse é um post que provavelmente somente quem sabe um pouco de html vai entender, mas de qualquer forma o assunto, considerando outros relacionado a programação é bem simples. Caso alguém queira entender mais sobre webdesigner dê uma olhada: curso de webdesigner.

Estou trabalhando com programação há alguns anos, mais especificamente com sites, mas eu nunca havia trabalho com css, aliás eu nunca mexi com formatação de sites, só havia tido experiência com no máximo html e javascript ( o resto fazia em java).

Eu estou fazendo uma especialização em Desenvolvimento de Sistemas para Web, e com isso finalmente aprendi como se usa um CSS no html. E achei que é realmente algo simples e prático. Se tiver oportunidades de usá-lo no trabalho, farei isso.
Um professor passou um trabalho para fazer um html de um filme, onde também deveria ser feito 2 arquivos css para ele, um para uma exibição na tela e outro para quando fosse imprimir o arquivo. E para isso, não precisa de javascript nenhum. É possível, apenas via html definir qual layout vai ser apresentado na tela e o outro para ser impresso.
Basta colocar as seguintes linhas na head do html:

O valor screen em media refere-se ao que vai ser mostrado na tela do navegador e print quando vai ser impresso. E o href é o caminho do arquivo css.
Um dos assuntos discutidos foi de que só usasse a tag table para tabelas e não para formatação como é usado muitas vezes, pois dependendo do dispositivo utilizado para acessar a página, a formatação ficaria muito ruim. Tomado isso como desafio, eu decidi não usar a tag table no meu html, usei:

a - para links
h1 - para o título principal
h5 - para outros títulos
em - para enfatizar o texto
ul - para listar
li - para colocar um elemento na lista
dl - como um lista de definições
dt - com um termo da lista de definições

Uma página pode ganhar uma cara nova só com uma folha de estilos e fazer um css é bem simples , sua sintaxe é bem fácil. Com poucas linhas consegui mudar o ícone da minha lista ( coloquei um gif), a fonte do texto da minha página, coloquei uma imagem como background. Mudei as cores e o estilo da fonte dentre outras coisas.
O Css permite muitas posibilidades de formatação e há uma boa separação do código,deixando o html bem limpo e simples . O uso de css me lembra os principios do MVC, onde a visão (interface, formatação) e os dados devem ser separados.
Para fazer um css, basta colocar o nome da tag, abrir uma chave, colocar as propriedades separadas por ; e os valores por : e fechar a chave assim:

nomeTag {
propriedade1:valor1;
propriedade2:valor2;
}

h1{
font-size:20px;
text-align:center;
color:green;
}

Há algumas propriedades que contém uns atributos mais complicados, mas não é nada tão difícil. Abaixo vão os exemplos da página:

Página HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Indiana Jones e o Reino da caveira de Cristal</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" href="estilo1.css" media="screen">
<link rel="stylesheet" href="estilo2.css" media="print">
</head>
<body>
<h1>Indiana Jones e o Reino da Caveira de Cristal</h1>
<dl>
<dt><em>País:</em> EUA </dt>
<dt><em>Ano:</em> 2008</dt>
<dt><em>Duração:</em> 124 minutos</dt>
<dt><em>Diretor:</em> Steven Spielberg</dt>
</dl>

<h5>Elenco</h5>
<ul>
<li><a name="ator1">Harrison Ford</a>(<ahref="#personagem1">Indiana Jones</a>)</li>
<li>Cate Blanchett (Irina Spalko)</li>
</ul>

<h5>Gêneros</h5>
<ul>
<li> Aventura</li>
<li>Ação</li>
</ul>

<h5>Sinopse</h5>
<p>
Nova aventura do professor e arqueólogo <a name="personagem1"> Indiana Jones <a/>(<a href="#ator1">Harrison Ford</a>), que viaja pelo mundo enfrentando grandes perigos e aventuras para descobrir fatos e objetos importantes da História.
</p>
</body>
</html>

Imagem sem css

CSS de visualização em tela

body{
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size:12px;
background-image:url("indiana.jpg");
}

em,h5{
font-weight:bold;
font-style:normal;
font-size:12px;
color:blue;
}

h1{
font-size:20px;
text-align:center;
color:green;
}

li{
list-style-image:url("indiana_jones.gif");
}

a:link {
text-decoration: none
}

a:visited {
text-decoration: none
}

a:hover {
text-decoration: underline;
color: green;
}

CSS de impressão

body{
color: #000000;
font-size:14px;

}

em,h5{
font-weight:bold;
font-style:normal;
font-size:14px;
color:green;
}

h1{
font-size:22px;
text-align:center;
color:red;
}

a:link {
text-decoration: none
}

a:visited {
text-decoration: none
}

a:hover {
text-decoration: none;
}
ul{
padding-top:0px;
}
}