Estrutura do HTML
HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. No fundo, o HTML não passa de texto.
Se você quiser testar por si só, pode começar a aprender como criar, salvar e abrir arquivos HTML, e continuar lendo para aprender um pouco de teoria.
Etiquetas e Elementos
As etiquetas, ou tags, são pequenos fragmentos que marcam texto no HTML. A etiqueta que marca um texto como negrito, por exemplo, é a <strong>. Toda etiqueta é delimitada pelo sinal de menor (<) e sinal de maior (>).
Isso significa que se você deseja tornar um fragmento de texto negrito, você deve envolvê-lo em etiquetas strong, assim: <strong>texto negritado</strong>. Note que a segunda etiqueta possui uma barra (/), o que indica que é uma etiqueta que "fecha" a aberta anteriormente.
O resultado desse exemplo será esse: texto negritado.
Algumas etiquetas não tem o objetivo de marcar texto, servem para incluir informação diretamente na página. Por exemplo, a etiqueta a seguir adiciona uma imagem ao documento: <img src="images/logo.jpg" alt="Exemplo">. Essas etiquetas geralmente não possuem o par de fechamento, e costumamos chamá-las de vazias.
O resultado de incluir essa tag é o seguinte: 
.
Um par de etiquetas (que abre e fecha, delimitando texto) ou uma etiqueta vazia podem ser chamados de elementos. A partir de agora, sempre utilizaremos o termo elemento nos artigos seguintes.
Elementos Obrigatórios
Todo documento HTML deve possuir no mínimo 4 elementos obrigatórios. São eles o html (O primeiro elemento, pai de todos), head (O cabeçalho do documento), body (O corpo do documento) e title (O título do documento). Um HTML simples deve ser parecido com isso:
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<p>Corpo da Página</p>
</body>
</html>
Salvando esse conteúdo em um arquivo .html e abrindo esse arquivo em um navegador, você verá o título da página lá em cima na janela e o texto que você colocou no corpo na área principal.
Talvez você tenha notado um outro elemento que utilizamos dentro do corpo, o <p>, que significa parágrafo.
Estrutura do CSS
CSS significa Cascading Style Sheets ou Folhas de Estilo em Cascata. Uma folha de estilo é um documento que altera a aparência de um determinado conteúdo em HTML.
Um CSS simples é composto de seletores, propriedades e valores:
body {
background-color: black;
}
No exemplo acima, body é um seletor, background-color é uma propriedades e black é o valor do atributo. Um mesmo seletor pode ter vários atributos:
body {
background-color: black;
color: green;
}
O exemplo acima define que o body de uma página HTML associada a esse estilo terá fundo preto (black) e texto em verde (green).
Ao contrário do HTML, um arquivo CSS não tem nada obrigatório. Ele pode ser completamente vazio. A única regra é que uma propriedades precisa de um seletor para existir, ou seja, você não pode atribuir algo sem dizer para quem você está atribuindo.
Associando um HTML a um CSS
Para utilizarmos CSS, precisamos criar um arquivo com a extensão .css e associar esse arquivo a um ou mais documentos HTML. Um mesmo CSS pode ser utilizado para infinitos documentos HTML, e quaisquer mudanças nesse CSS terão efeito na aparência de todos os HTML relacionados.
O que associa um HTML a um CSS é um elemento no HTML que referencia o CSS, o elemento <link rel="stylesheet" type="text/css">, que fica dentro do cabeçalho do documento:
<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>
Você pode notar que dentro da etiqueta que abre o elemento link existem mais informações, como type="text/css" e href="estilos.css". Estes são atributos HTML, que adicionam informações complementares ao elemento. Todo atributo possui o formato nome="valor", sempre com um nome e um valor.
No exemplo acima, estamos criando uma ligação (link) com um arquivo de texto do tipo CSS (type="text/css"). O atributo href significa HyperLink Reference ou Referência de Hiperligação, e tem como valor o caminho do arquivo que estamos associando. O atributo rel significa relation ou relacionamento, e tem como valor a palavra stylesheet, que significa folha de estilo, portanto esse link está relacionado a uma folha de estilos.
Se associarmos esse HTML com o exemplo de CSS que criamos lá em cima, teríamos um documento com fundo preto e letras em verde. Você pode checar esses exemplos aqui.