Introducción a CSS
Curso de introducción al desarrollo web
Creado por Jorge García para twitch.tv/jorchg 
CSS - Cascade Style Sheets
- Describe cómo se muestran los elementos HTML en pantalla, en papel y otros medios
- CSS vino a resolver un gran problema con el HTML utilizado para aplicar estilos
- Antiguamente existía, por ejemplo, el elemento <font>, hoy en día deprecado
CSS - Cascade Style Sheets
- Describe cómo se muestran los elementos HTML en pantalla, en papel y otros medios
- CSS vino a resolver un gran problema con el HTML utilizado para aplicar estilos
- Antiguamente existía, por ejemplo, el elemento <font>, hoy en día deprecado
Sintaxis de CSS
La sintaxis básica de CSS es muy sencilla. Sólo necesitamos un selector y una declaración, compuesta a su vez por una propiedad y el valor que queremos aplicar.
Referencia: w3schools
Selectores básicos
Como su propio nombre indica, los selectores se usan para encontrar o seleccionar los elementos a los que queremos aplicarles ciertos estilos.
La especificación actual de CSS comprende una gran variedad de selectores. Empecemos por los básicos
Selector de elemento
Selecciona el elemento HTML especificado
Por ejemplo, aquí todos los párrafos (elemento p) tendrían un tamaño de fuente de 24px y color rojo.
Selector de ID
Selecciona el elemento con el ID especificado
Por ejemplo, aquí el elemento con ID "first" tendría un tamaño de fuente de 24px y color rojo. Se denota con una almohadilla (#) o "hash" seguido del ID del elemento.
Selector de clase
Quizá el selector más utilizado porque ayuda a agrupar elementos que queremos tengan los mismos estilos. Se denota con un punto (.) seguido del nombre de la clase
Por ejemplo, aquí los elementos con clase "paragraph" tendrían un tamaño de fuente de 24px y color rojo.
Selector universal
Simplemente selecciona todos los elementos de la página
Su uso está desaconsejado por la complejidad para el navegador de navegar por todo el DOM tree, aunque se usa para aplicar las fuentes por defecto o para aplicar el modelo de caja que queremos.
Agrupación de selectores (Grouping selector)
Se pueden agrupar diferentes selectores para aplicarles los mismos estilos. En vez de esto:
Agrupación de selectores (Grouping selector)
Podemos tener esto:
Selectores avanzados
Combinator selectors
Seleccionan elementos basado en relaciones entre ellos
Pseudo-class selectors
Seleccionar diferentes estados de los elementos
PSeudo-elements selectors
Para seleccionar ciertos pseudo-elementos de los elementos. Por ejemplo: la primera letra o la primera línea
Attribute selectors
Para seleccionar elementos basados en un atributo o en el valor de un atributo
Colores en CSS
Referencia: Colores en CSS
Backgrounds
Las propiedades de backgrounds se usan para definir los efectos de prácticamente cualquier elemento HTML
Referencia: Backgrounds
Background shorthand
En CSS hay propiedades que pueden especificarse "agrupadas" o de manera corta. Background es una de ellas.
CSS Borders
Las propiedades de "border" permiten especificar el estilo, el ancho y el color de los bordes de un elemento
border-style
Especifica el estilo del borde a mostrar. Por ejemplo una línea sólida o una línea de puntos.
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Referencia: w3schools
Border Width
Especifica el ancho de los bordes, en cualquier unidad de medida (px, em, rem...)
Border Color
Especifica el color de los bordes, de cualquiera de las formas que ya hemos visto para especificar colores (nombre, rgb, rgba, hsl, hsla)
Individual border sides
Con CSS podemos especificar estilos diferentes para cada uno de los cuatro bordes, individualmente.
Border shorthand
Al igual que hemos visto con la propiedad background, la propiedad border también admite shorthand, o propiedades agrupadas.
Border-radius
La propiedad "border-radius" nos permite redondear los bordes de un elemento
CSS Margins
Los márgenes se usan para crear espacio entre los elementos empujándose unos a otros.
Se pueden setear los márgenes de cada uno de los lados del elemento por separado (top, right, bottom, left)
Margin shorthand
Al igual que las propiedades background y border, margin también posee una "shorthand" property
CSS Paddings
El padding se usa para generar espacio del borde de un elemento hacia dentro. Es decir, es como un margen pero interno.
La declaración de los padding sigue exactamente las mismas reglas que los margins. Se pueden declarar en las mismas unidades y las versiones de los diferentes shorthands funcionan igual.
Padding shorthands
Box model
En HTML todos los elementos pueden ser considerados "cajas". Por eso hablamos del box model, o el modelo de cajas.
Referencia: w3schools
Box sizing
Modelo por defecto: content-box 
Referencia: Box sizing mdn
Modelo más utilizado. Hace mucho más fácil dimensionar los elementos: border-box 
Referencia: Box sizing mdn
El modelo border-box hace que el navegador tenga en cuenta los tamaños de padding y de bordes para el cálculo del tamaño de los elementos. Lo que hace mucho más sencilla la maquetación
Referencia: Paul Irish