Basicamente es un lenguaje de programacion para de estructurar un documento como por ejemplo páginas web.
En html el head o cabeza es un contenedor para metadatos que permiten que la pagina se pueda encontrar en el buscador, mientras que el body o cuerpo es el almacen principal de la pagina en donde se va a almacenar la información.
Header es para la sección introductoria del documento, section es un contenedor de algo mas grande que sirve para almacenar, article igualmente es un apartado que sirve para contener texto, pero este es independiente ya que no importa en que sección lo encuentres tiene sentido por si misma, aside es información de apoyo que no forma parte de lo principal, footer es para el pie de la página, derechos, contactos, entre otros.
CSS es lo que nos permite darle estilo a nuestro documento, desde el tipo de letra, color de fondo, orden y más.
Justamente su proposito es ofrecer a nuestro documento la estructura que nosotros deseemos y darnos ciertas funciones para que sirvan por ejemplo botones o cuadros de texto.
Las tres maneras de vincular nuestro estilo al documento son:
1.-Crear un archivo .css en HEAD con el cual con la funcion link rel="relaciondelarchivo", href="nombredelarchivo.css" pueda otorgar el estilo al archivo.
2.-Dentro del programa HTML podemos directamente escribir style dentro de los corchetes angulares de un contenedor ya sea header o el texto y ahi añadir las caracteristicas necesarias que va a tener el contenedor.
3.-Existe la funcion " style > la cual dentro antes de cerrarla con /style > escribes el contenedor a editar y seguido corchetes y dentro de los corchetes ya las caracteristicas a añadir."
El selector es el identificador de elementos en HTML, al cual le queremos aplicar un estilo.
Este es un selector pero para identificar especificamente etiquetas como h3, p, a, etc.
Se pueden crear clases para facilitar la accesibilidad a ciertas etiquetas o contenedores las cuales identificamos con el class selector.
Este reconoce elementos individuales que tengan un id especifico.
Ambos son atributos de identidad, pero su diferencia principal radica en su alcance: el ID es un identificador único, mientras que la Clase es un identificador grupal.
El modelo de cajas a mí me gusta definirlo como que el html es un suelo, sobre en el cual podemos colocar diferentes elementos representados como cajas. En este sistema content o contenido define dónde queremos o cómo queremos centrar nuestra caja en el suelo, sí cargado a la izquierda cargado o a la derecha o en medio. El padding es como un relleno interno de la caja para acomodar lo que está dentro a nuestro gusto. El borde representa el grosor de la caja y por último el margen es el espacio vacío en el suelo que rodea la caja, funcionando como una distancia de seguridad que la separa de las paredes de la habitación o de otras cajas vecinas.
Los media nos permiten adaptar nuestro sitio web a cualquier dispositivo ya que todos los dispositivos tienen pantallas diferentes, la tv, la tiene más grande el celular, chiquita, la computadora la tiene como un tamaño medio entonces si queremos que nuestra página se vea bien en todas estas plataformas, utilizamos estas condiciones en nuestro CSS.
El grip nos permite dividir nuestro documento en un tablero para acomodar nuestras cajas a nuestro gusto del tablero.
El display: flex ayuda principalmente a alinear nuestras cajas en un solo eje (ya sea una fila o una columna). Permite que haya varios elementos en una misma línea y que estos se adapten al espacio. Sin embargo, si no se configura el 'envolvedor' (flex-wrap), los elementos pueden intentar mantenerse en una sola fila hasta salirse de la pantalla. Igualmente, si se alinean verticalmente, pueden extenderse tanto que hagan la página muy larga si no se controla el tamaño del contenedor.