CSS

Para referencia de muchas de las propiedades de css existe este cheat sheet.

Indice

• Acerca del lenguaje
• Estructura
• Clases
• Ids
• Algunas propiedades
• Import

Acerca del lenguaje

CSS es un lenguaje que especifica como los documentos (HTML) se presentarán al usuario (extraido de mozilla developer). Las siglas del lenguaje significan Cascade Style Sheets (Hojas de estilo en cascada), su nombre viene del hecho que al establecer una propiedad a un objeto que agrupe otros, esta propiedad es aplicada a los otros (como si fuera una cascada).

Estructura

La estructura del lenguaje es muy sencilla:

nombre_de_etiqueta{
    propiedad:valor;
    propiedad2:valor;
}

nombre_de_etiqueta2{
    propiedad:valor;
}

...

Clases

Las clases hacen referencia a las clases que se mencionan en las clases de HTML. Estas son etiquetas que establecen un diseño a un grupo de objetos (a todos los que se les pongan estas etiquetas).

Para definir que clase afecta el css se escribe con un punto de prefijo:

.nombre_clase{
    propiedad:valor;
}

Ids

Los Ids igual que las clases hacen referencia a lo mismo que se menciono en HTML. En este caso identifican a objetos únicos, por lo que es útil si solo requerimos cambiarle el diseño a una sola cosa. Los ids se identifican con # de prefijo.

#nombre_del_id{
    propiedad:valor;
}

Algunas propiedades

Las siguientes son una lista de propiedades que pueden usar en algunos casos, algunas etiquetas funcionan para todo tipo de objetos pero no todas. Para una lista más completa de étiquetas y ejemplos ver el cheat sheet.

.alguna_clase{
    height: 100%; /* Establece  el tamaño del objeto */
    width: 100%; /* Establece  el ancho del objeto */
    color: #222; /* Establece  el color del objeto */
    font-family: 'ZCOOL QingKe HuangYou'; /* Establece  la fuente tipografica del objeto (en caso de ser texto) */
    padding: 2rem; /* Establece  el padding del objeto, este se refiere al borde entre el contenido y el tamaño del objeto, es similar al margen, pero es más interno */
    margin: 0; /* Establece  el margen del objeto, este se refiere al margen entre el objeto y lo que lo rodea */
    color: #FFFFFF; /* Color del objeto*/
    position: relative; /* La posición del objeto respecto al documento */
    background-image: url('matrix_bg.jpg'); /* Establece una imagen de fondo */
}

Import

El import es una propiedad del css que permite importar información de documentos externos, esto se usa mucho para tipografias:

@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou');