Frontend

Posicionamiento de bloques con display CSS

CSS, Frontend /

Por defecto el navegador muestra las cajas con “display: block;” En ese caso, todas las cajas ocupan el 100 % del ancho disponible sin importar si el contenido tiene o no espacio. <!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display block, inline, inline-block</title> <style> .block-element { background-color: green; margin: 10px; […]

Posicionamiento de bloques con display CSS Read More »

Position en CSS

CSS, Frontend /

Es la manera en la cual podemos posicionar las cajas. En el navegador la posición por defecto es “static”, quedan donde tú las colocas. Por eso, todos los bloques se ubican uno debajo de otro. Tomado de Platzi.com Sin embargo, tenemos la flexibilidad de utilizar otros tipos de posicionamiento como: Absolute. Hace que los contenedores

Position en CSS Read More »

Los combinadores en CSS

CSS, Frontend /

Los combinadores nos permiten tener una especificidad mucho más certera y nos ayudará a evitar varios IDs, o ID, con etiqueta, etiqueta y etiqueta. Se lee raro, pero sigue leyendo. Tenemos cuatro opciones de combinadores, existen muchos más, pero estos son las más importantes y utilizadas. Ejemplo Vamos a crear un documento HTML el cual

Los combinadores en CSS Read More »

Herencia

CSS, Frontend /

La herencia es el concepto de cascada de los Estilos CSS. Es decir, son los estilos que un elemento padre le proporciona a un elemento hijo bajo la jerarquía de cascada. Ejemplo Crearemos un documento HTML el cual va a tener un título y un párrafo. Se sabe que por defecto y sin aplicar estilos

Herencia Read More »

Modelo de caja

CSS, Frontend /

Para CSS, todos los elementos de un documento HTML son cajas. Tú trabajas con cajas que son contenedoras de contenido. A estas cajas se le puede aplicar estilos y a esto se le denomina, modelo de cajas. Esta imagen es tomada de la opción inspeccionar del navegador web Google Chrome 1 – margin. Es un

Modelo de caja Read More »

Cómo aplicar estilos CSS para un documento HTML

CSS, Frontend /

Los estilos CSS afectan directamente a las etiquetas HTML. En ese sentido, existen tres maneras de inyectar código CSS a los documentos HTML para que estas tengan el color, la belleza y la experiencia de uso que deseamos. 1 – Referenciando un documento de estilos CSS en la etiqueta <head></head> Ejemplo <head><link rel="stylesheet" href="./estilos.css"></head> Esta

Cómo aplicar estilos CSS para un documento HTML Read More »

Scroll to Top