Posted on Jun 8 Fala pessoal! Tudo bem?Esse post é para você iniciante e que tem dificuldade em entender o que é Html e CSS. Mas será que dá mesmo pra entender sobre esse assunto em 10 minutos? Essa resposta é... HyperText Markup Language, no português brasileiro Linguagem de Marcação de Hipertextos, é uma linguagem de marcação, usada para definir a estrutura do conteúdo, o HTML é um padrão para estruturar um site, e ele possui sintaxe e semântica.O conteúdo de um documento HTML é formado por diversos tipos de elementos, então, um parágrafo, uma imagem ou uma tabela é um Elemento no HTML.Para inserir um elemento no documento HTML, é necessário uma tag (marcação), essa tag possui abertura, mas nem sempre possui fechamento, além disso, cada tag no HTML possui um nome, outra coisa necessária no elemento é o seu conteúdo (imagem,texto, vídeo, áudio, etc).A estrutura da tag de abertura é:A estrutura da tag de fechamento é:A estrutura de um elemento título:a. O DOCTYPE é uma declaração para informar ao navegador como o documento deve se comportar.b. O elemento html é um elemento que envolve todo o conteúdo da página, pode ser conhecido como o elemento raiz.c. O elemento head é um elemento que envolve todo conteúdo importante para a página HTML, mas que não é relevante ao usuário sua visibilidade. d. O elemento body é um elemento que envolve todo o conteúdo da página e esse sim, fica visível ao usuário.Um elemento dentro do body pode possuir atributos, como o atributo class ou o id (identificador). O atributo class é utilizado tanto no CSS quanto no JavaScript para selecionar o elemento e estilizá-lo ou modificá-lo através de funções ou da DOM.ex1.ex2.Para conhecer mais sobre elementos e atributos HTML, clique aqui.CSS ( Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML. Ele é definido seguindo algumas regras.a. A regra é aberta com um seletor. b. em seguida, a abertura de chaves ( { ); c. a propriedade a ser modificada, dois pontos ( : ), o valor e ponto e vírgula ( ; )d. por fim, o fechamento de chaves ( } );O resultado é o seguinte:ex1.ex2.ex3.Existem 3 formas simples de se utilizar o CSS no HTMLEssa primeira é inserindo diretamente no elemento utilizando o atributo style:ex.Perceba que a inserção da propriedade e valor seguem o padrão mencionado na seção anterior (propriedade:valor;)A segunda forma de estilizar um documento HTML é utilizando o elemento style dentro do elemento head:Assim como temos um atributo style dentro de uma tag, temos o elemento style para estilizar, esse segundo segue o padrão de sintaxe citado na seção anterior:Essa terceira forma é a mais indicada para se trabalhar com o CSS. Ela consiste em:a. o link é um elemento utilizado para linkar, fazer uma ligação com outro documento ou arquivo que não se encontra dentro do documento HTML.b. O atributo rel define a relação entre o que está sendo importado e o documento atual. Nesse caso, é uma relação de estilização.o atributo href define o caminho a ser percorrido para importação. Nesse caso, o documento .css está na pasta css.Para conhecer mais sobre estilização, clique aqui.E ai, deu para aprender em 10 minutos?Depende do seu nível de abstração, se a minha escrita foi coerente e coesa, se foi preciso ler mais de uma vez. Aprender em 10 minutos não acontece, nem em 1 mês. Fica ai o conselho: para aprender é necessário constância, pratique todos os dias, desafie a si mesmo, porque conhecimento não aplicado de nada adianta. Ele se perde, se esquece.Esse conteúdo exposto aqui é um pouquinho do mundo das linguagens de marcação e estilos. Tem muito mais. Seja curioso, pesquise e aplique.Valeu por estar até aqui.Até a próxima!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Wilbert Misingo - Jun 2 Rens Jaspers - Jun 1 Marcin Wosinek - Jun 5 Hasnain01-hub - Jun 5 Once suspended, devs-jequie will not be able to comment or publish posts until their suspension is removed. Once unsuspended, devs-jequie will be able to comment and publish posts again. Once unpublished, all posts by devs-jequie will become hidden and only accessible to themselves. If devs-jequie is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Flávia Correia. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag devs-jequie: devs-jequie consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging devs-jequie will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.