CSS ESTRUCTURA

PARA AGRANDAR UNA IMAGEN O ACHICARLA TENGO QUE PONER WIDTH EN

PORCENTAJE

margin: borde/area de la cajita contenedora, espacio que separa elementos

width: espacio que ocupa en la pagina

padding: espacio entre el contenido del elemento y su borde

siempre empieza:

*{
margin: 0;
padding: 0;
}
puedo agregar la font family

body{
color de fondo
}

#contenedor {
width: 1200px;
margin: 20px auto;
background-color: #FFF;
border: 1px dotted #999;
}
width: …px

CABEZAL

header {
height: 150px;
margin: 10px 0px;
display: flex; O NO
justify-content: space-between O NO
}

si tiene foto
header img {
width: …px;
}

NAVEGADOR
nav {
height: 100px;
margin: 60px 10px 50px 10px;
width: 675px;
}

nav ul li a {
display: block;
width: QUIZÁS
height: QUIZAS
color:
text-align: center;
border-top: 2px solid #FFF; LINEA QUE MARCA DDE ESTAS
text-decoration: none; → no pone lo que es por defecto
text-transform: uppercase; ES MAYUCSULA
line-height: 100px; SI TIENE LINEA
}

cambiar el estilo mouse arriba

nav ul li a:hover {
border-top: 2px solid #000;
O BACKGROUND COLOR
}

footer SIMPLE {
background-color: #CCC;
height: 40px;
padding: 10px;
font-size: 10px;
line-height: 40px;
margin: 0 10px 10px 10px
}

activo:
nav ul li a:activo{
background color
}

SECCIONES FLEX

display: flex;
justify-content: space-between; → separación entre columnas
align-items: flex-end;
margin: 50px 30px;

display: flex;
flex-wrap: wrap;
justify-content: space-between;
ICONO DE LISTA
list-style-image: url(img/…);
padding-left: 20px;

<A> si tiene una fotito al lado tipo simbolo

#... p a {
background-image: url(img/…);
background-repeat: no-repeat; → solo muestra la imagen una vez
background-position: left; →izq
padding-left: 30px;
text-transform: uppercase; →mayuscula
color: #000;
text-decoration: none; → sin interlineado por defecto
}