Ya hemos visto a grandes rasgos como estructurar nuestra página, como se crean y se definen los selectores en nuestra web e incluso como poder estilizar parte de estos con el uso de las pseudoclases tipo :hover, :before, etc. El siguiente paso son las propiedades que podemos aplicar a estos selectores, es decir, los atributos propios de la CSS para editar estos selectores y darles el aspecto gráfico que deseemos.

Para hacerlo seguiremos un poco un modelo basado en:

• Propiedades que afectarán a la visualización general de capas (posicionamiento y visualización):
  top, bottom, left, right, position, float, clear
  display, overflow, visibility, clip, white-space,z-index
• Propiedades de una capa (tamaños, márgenes, relleno, bordes, perfiles y fondos):
  height, width, max-height, max-width, min-height, min-width
  margin, margin-top, margin-left, margin-bottom, margin-right
  padding, padding-bottom, padding-left, padding-right, padding-top
  border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width
  outline, outline-color, outline-style, outline-width
  background, background-attachment, background-color, background-image, background-position, background-repeat
• Propiedades de listas:
  list-style, list-style-image, list-style-position, list-style-type
• Propiedades de textos (tipografía y textos):
  color, font, font-family, font-size, font-style, font-variant, font-weight, letter-spacing
  direction, line-height, text-align, text-decoration, text-indent, text-transform, unicode-bidi, word-spacing
• Propiedades de tablas:
  border-collapse, border-spacing, caption-side, empty-cells, table-layout, vertical-align
• Cajón desastre (todas esas propiedades menos conocidas y útiles en casos muy puntuales):
  azimuth, content, counter-increment, counter-reset, quotes, cue, cue-after, cue-before, elevation, orphans, page-break-after, page-break-before, page-break-inside, pause, pause-after, pause-before, pitch, pitch-range, play-during, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, voice-family, volume, widows
• Otras (propiedades de CSS 3)

Nota: Una recomendación que os hago si os interesa este post es guardaros especialmente esta página, pués a medida que vayan apareciendo los diferentes capítulos referentes a cada una de estas propiedades, iré modificando y enlazando cada una de las propiedades con su definición.

Aunque antes de esto creo necesario hacer un pequeño apunte sobre las unidades que podremos utilizar para definir los valores numéricos de algunos de estas propiedades ya sea de longitudes y tamaños o bién de colores, y que ya explicaremos mejor como usar cuando entremos de lleno en cada una de las propiedades que las utilizan:

Longitudes relativas

• px: Píxeles (relativo al dispositivo)
• em: Tamaño de la fuente actual
• ex: Alto del caracter ‘x’

Longitudes absoluta

• in: Pulgadas (1pulgada = 2.54 cm)
• cm: Centímetros
• mm: Milímetros
• pt: Puntos (1pt = 1/72pulgadas)
• pc: Picas (1pica = 12 puntos)
• %: porcentaje

Colores

• #RRGGBB: Color RGB(6 Valores hexadecimales)
• #RGB: Notación simplificada (#RGB = #RRGGBB)
• rgb(R,G,B): Color RGB (3 valores de 0 a 255)
• rgb(R%,G%,B%): Color RGB (3 valores porcentuales de r, g y b)