Engenharia, programação e artigos técnicos

HTML - Formatação do documento A formatação do documento HTML pelo CSS é um passo enorme na estética do texto. A escrita do documento em HTML não fica completa apenas com os elementos, TAGS próprios da linguagem de hipertexto (HyperText Markup Language) apesar de esta ter tags como os H1 H2 ... que marcam os títulos dos parágrafos e por exemplo tags para bold e itálico... Este é um exemplo retirado da página  geeksforgeeks  sem a aplicação da formatação do CSS (Cascading Style Sheet): Fica com um aspecto de Word pouco formatado. No entanto se carregar a formatação CSS associada a este documento o aspecto do mesmo muda radicalmente, mesmo não sendo uma formatação colorida. A transformação é evidente. E muitos outros exemplos poderiam ser encontrados na net ou construídos para exemplificar esta formatação. Nesta página pode-se encontrar uma referência exemplificada das Tags HTML e outros recursos como o CSS e JS... w3schools

HTML CSS - Box Model Uma das bases para se entender o funcionamento do CSS é o modelo de caixa, ou box model. Em qualquer navegador, depois de clicado o botão direito aparece a opção inspeccionar. Depois no separador elementos vai aparecer no fundo o Box Model. Abrir uma página vazia ajuda a encontrar. Box Model - Google Chrome Podemos jogar um pouco com o Box Model, para aprender (e complicar) criando um HTML simples: HTML Apenas tem linkado o ficheiro CSS e um div com um título H1 CSS No CSS apenas estão activadas propriedades para o div com a classe página. A correspondencia tal qual como está entre o CSS e o que é mostrado na página com o Bom Model é a seguinte: No CSS não tenho a propriedade margin 5 px mas o Box Model indica 8 px. Na verdade esse margin é relativo ao elemento HTML que não está definido e se apresenta com um valor por defeito. Como perceber isso? primeiro colocar uma linha a rodear o elemento div, e depois se clicar dentro do conteúdo do DIV (H1) e inspeccionar ...