Estrutura do HTML
HTML significa Linguagem de Marcação de Hipertexto. Hipertexto é um texto cheio de ligações (links) e interações. Com HTML, você pega texto comum, marca e transforma em Hipertexto:
<html>
<head>
<title>Título da Página</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<p>Corpo da Página</p>
</body>
</html>
Essas <palavrinhas> entre os sinais de menor e maior chamam-se etiquetas ou tags, e é com elas que marcamos algo. Geralmente, mas nem sempre, precisamos de um par delas: uma simples pra abrir, e uma com uma barra para fechar, <p>assim</p>. Dentro de algumas tags podemos ter atributos, como o rel="stylesheet" da tag link. Todas as tags possuem um significado, a tag <p> por exemplo significa parágrafo.
Um conjunto de uma tag que abre, um texto e uma tag que fecha é um elemento.
Estrutura do CSS
CSS significa Folhas de estilo em cascata. Com o CSS criamos um conjunto de regrinhas que alteram a aparência de um documento, sem alterar seu significado. Você pode fazer desde coisas simples, como mudar a cor, fonte e fundo de uma porção de texto, até coisas avançadas, como dizer como um trecho é posicionado na tela.
body {
background-color: black;
color: green;
}
Dê uma olhada nos arquivos de exemplo. Se ainda estiver meio perdido, talvez deva ler essa explicação mais completa.