Qué es CSS e Introducción

a CSS
Para entender qué es CSS, este es la mejor introducción a CSS que puedes
encontrar en todo Internet si estás empezando en el desarrollo web;
entenderemos de qué se trata, para qué sirve y cómo funciona. CSS se trata de
un fantástico lenguaje de estilos que convierte a elementos de HTML en
elegantes y vistosos dentro de una página web. ¿Estás listo para profundizar en
CSS? ¡Vamos por ello!

Porqué es necesario una

introducción a CSS
Si estás buscando aprender CSS Seguramente ya sabes utilizar el lenguaje de
marcado HTML ¿Verdad? Claro que si, si no lo sabes, pues anda primero ve
a aprender HTML con el curso completo, pues CSS se aplica sobre HTML.
Cuando empezamos en el mundo del desarrollo web y apenas hemos empezado
con HTML, hay que tener cuidado a la hora de explicar cada detalle de lo que
sigue a continuación y por ello me tomo la tarea de escribir esta introducción.

Recordemos que las páginas que hicimos con HTML poseen elementos, pero
muy pobres en cuanto a apariencia o diseño, podemos tener textos, imágenes,
formularios, o cualquier elemento, pero seguramente nos vendría bien saber
controlar al detalle aspectos como: los colores, la posición, el tipo de texto, los
bordes, rellenos, márgenes, hasta animaciones, etc. De dichos elementos
HTML. Pues para ello nos serviremos de las virtudes de CSS, el lenguaje de
diseños por excelencia.

¿Qué es CSS?
CSS por sus siglas en inglés (Cascading Style Sheets) “hojas de estilo en
cascada” Es el lenguaje que define el estilo de los elementos de un
documento HTML, por lo tanto es el lenguaje con la cual controlaremos el
diseño, la apariencia de nuestras páginas web hechas con HTML.

El término cascada hace referencia a la manera en la que CSS trabaja, pues

aplica los estilos sobre otro.
Escribir nuestro primer código CSS
Ahora que ya sabemos, utilizar HTML es momento de ponerle estilo a la
estructura de nuestra página web.

Recordemos que HTML nos permite crear la estructura de una página web y de
alguna manera podíamos poner estilos a nuestros elementos HTML. Pero como
hemos visto es bastante limitado y no es muy práctico poner estilos en un
documento HTML utilizando los atributos.

Pues bien para ello tenemos el lenguaje de estilos CSS, este nos permitirá
manejar la apariencia de nuestros elementos HTML de una manera muy simple.

Para que entiendas, con CSS seleccionaremos el elemento HTML que

queremos maquetar o darle estilo, luego escribiremos las instrucciones o
declaraciones para definir las propiedades, características o estilos de dicho
elemento, estas propiedades lo definiremos mediante un valor.

Por ejemplo, imagina que queremos dar un color de fondo verde a un elemento
de párrafo.

Para ello tenemos que hacer lo siguiente:

1. Seleccionamos el párrafo.
2. Definimos la propiedad, en este caso el color de fondo
(background-color).
3. Definimos el valor para la propiedad especificada, en este caso el
valor será el color verde (green).
CSS

1
p {background-color: green;}

Note la sintaxis, las llaves, los dos puntos, el punto y coma son signos
importantes ya forman parte de la sintaxis o forma de escribir código CSS. Todo
ello lo veremos con detenimiento en las lecciones que continúan, este solo es un
pequeño ejemplo.
Muy sencillo ¿verdad? Simplemente seleccionamos el elemento, definimos la
propiedad y finalmente su valor.

Cómo controla CSS la apariencia de

páginas HTML
Existen muchas propiedades como: color, alineación, tamaño, tipo de letra,
bordes, tipos de borde, márgenes, etc. Realmente hay muchísimos, para hacer
de ellas lo que nuestra creatividad alcance y lo veremos durante el curso.
También están los valores para dichas propiedades como por ejemplo para
alineación puede ser a la izquierda, al centro, a la derecha, para tipo de letra
puede ser: Helvética, Verdana, Lato, etc.
Aprender CSS básicamente consiste en comprender la sintaxis, la forma en la
que se escriben las instrucciones y cuáles son las características que podemos
controlar con CSS.

Cómo usar CSS en HTML y

ejemplos
Avanzar
Ahora aprenderemos a utilizar CSS en HTML, existen varias formas de aplicar
estilos CSS a nuestros elementos hechos con código HTML, todo ello
abordaremos en esta lección y además estableceremos cuándo, por qué y
dónde emplear una u otra forma ¿Listos? ¡Pues vamos a ello!

Cómo se puede utilizar CSS

Existen tres formas bastante conocidas de emplear CSS para maquetar una
página HTML y son las siguientes:

1. Aplicar CSS en línea HTML mediante atributos.

2. Incrustar el código CSS en una etiqueta <style> dentro del
documento HTML.
3. Crear un documento CSS externo.
CSS en línea empleando un atributo
Esta forma de utilizar CSS es la más básica y muy conocida, de hecho, de
alguna manera ya lo habíamos utilizado en el curso de HTML; básicamente
consiste en indicar los estilos de un elemento HTML dentro de su etiqueta de
apertura, mediante un atributo HTML.

El atributo STYLE es la mejor opción para colocar estilos, dentro de su valor irán
las propiedades y sus respectivos valores CSS.
Ejemplo de CSS aplicado en línea HTML.
HTML

1
<p style="color: red;"> este es un párrafo </p>

De esta manera se aplica un estilo determinado solo al elemento de la etiqueta,

en este caso color de letra para el párrafo será rojo.

CSS incrustado en el documento

HTML
Otra manera fantástica de usar CSS en documento HTML es incrustando el
código CSS dentro de ella, de tal manera que los estilos que deseamos aplicar
afectarán no solo a un elemento como en el caso anterior, sino serán aplicados
a toda la página.

Si en el caso anterior STYLE funcionaba como un atributo, ahora funcionará

como una etiqueta HTML, con su respectiva etiqueta de apertura y cierre, de la
siguiente manera:
HTML

1
<style>
2
/* Aquí irá todo el código CSS*/
3
</style>
4
Indicaciones:

 La etiqueta <style> contiene el código CSS que desea aplicar al

documento HTML.
 <style> Será incrustado dentro de la etiqueta <head> del
documento para que funcione correctamente.
Ejemplo de código CSS incrustado en HTML
HTML

1
<html>
2
<head>
3
<title> TITULO</title>
4

5
<style>
6
p {color:red;}
7
a {}
8
#cabecera {}
9

10
</style>
11

12
</head>
13

14
<body>
15

16
</body>
17
 18
</html>

CSS en un documento CSS externo

Esta es sin duda la forma más recomendable de aplicar estilos a documentos
HTML, consiste en crear un documento CSS muy aparte y guardarlo con la
extensión. CSS, por ejemplo: midocumento.css

 En el documento CSS se encuentren todos los códigos CSS que

determinarán el estilo de todos los elementos HTML apuntados.
 Desde un documento HTML llamaremos al documento CSS para
que se haga presente y aplique los estilos que hemos escrito en
dicho documento CSS.
 Para realizar la invocación, emplearemos la etiqueta <link> dentro
de la etiqueta <head> del documento HTML y mediante el
atributo rel y href invocamos al documento CSS mediante su
nombre. Veamos la sintaxis:
HTML

1
<html>
2
<head>
3
<title> TITULO</title>
4

5
<link rel="stylesheet" href="midocumento.css">
6

7
</head>
8

9
<body>
10

11
</body>
12
 13
</html>

El atributo REL define la relación entre el documento HTML y el documento CSS

invocado, el valor StyleSheet indica que es un estilo preferido, mientras
que rel="Alternate Stylesheet" define un estilo alterno.
El atributo href es la que invoca al documento CSS, si está guardada en la
misma carpeta que el documento HTML entonces basta con colocar el nombre
del documento con su respectiva extensión como en el
ejemplo href="midocumento.css". Si el archivo CSS se encuentra guardada en
otra carpeta, entonces hay que especificar la dirección URL donde está ubicada.

Conclusión sobre las formas de

emplear CSS en HTML
Dependerá de nuestro objetivo emplear una u otra forma de usar CSS en HTML,
si deseamos colocar un estilo corto, particular y para un elemento HTML
específico, entonces podemos hacer uso de CSS en línea.

El código CSS interno o incrustado mediante etiqueta <style> afectará solo al

resultado del documento HTML en el que esté incrustado, si se tiene pocos
elementos y estilos, podemos emplear este método.
Los estilos CSS en documento externo es el más indicado para proyectos que
implican varias páginas e incluso miles, ya que permite gestionar el estilo de
todas desde un único documento CSS.

Selectores CSS – Reglas y

sintaxis
Avanzar
Ahora nos toca aprender qué es una regla de estilo CSS, cuál es su sintaxis CSS correcta, además
aprenderemos a utilizar los selectores, muy importantes para apuntar o seleccionar elementos
HTML específicos y estilizarlos con CSS.

Aunque hasta ahora ya hemos visto algunos ejemplos de código CSS es importante definirla y
dejar en claro de una vez por todas cuáles las partes que posee y cómo escribirla correctamente
para en próximas lecciones adentrarnos en el corazón de CSS y no tener problemas.
Qué es la sintaxis CSS
Cuando dotamos de estilo a un elemento HTML debemos establecer las reglas de estilo que se
le aplicarán. Imagina que en un documento HTML existen una gran variedad de elementos
como: textos, multimedia, formularios, listas, enlaces, etc. todos estos elementos poseen un estilo
¿Verdad? ¿Dónde van esos estilos? Generalmente en un documento CSS.
Se considera sintaxis al orden y relación de los elementos que componen una correcta instrucción
CSS así como las funciones que cumples.

Entonces un documento CSS contiene todas las reglas establecidas para cada elemento HTML.

¿Qué es una regla CSS?

Una regla CSS es la forma adecuada de escribir una instrucción mediante código CSS, es decir la
manera en que se debe escribir código CSS para que este sea interpretado y aplicado
correctamente por el navegador web.

Partes de una regla CSS

Una regla CSS está formada principalmente por un sector y una declaración, dentro de la
declaración se encuentran las propiedades con su respectivo valor.

 El selector.- el selector es quien indica a que elemento HTML se aplica el código

CSS (el estilo)
 La propiedad.- es la característica que se desea definir, por ejemplo: color (el
color).
 Valor.- es el valor que tomará la propiedad, por ejemplo: green (verde).
 Punto y coma (;).- una declaración siempre se debe terminar con un punto y
coma simple (;)
Ejemplo de una regla CSS
CSS

1
h1 {color: red;}

En el ejemplo podemos identificar las partes:

 El selector apunta aún elemento de HTML, en este caso un <h1>.
 La declaración siempre va dentro de llaves y contienen a la propiedad y su valor
cerrada por un punto y coma, en nuestro caso (color:red;).
 En el ejemplo se define la propiedad de color, o color de letra (color).
 El valor del color es red en ingles, rojo en español.
Selectores de CSS
Como mencionamos anteriormente, para poner estilo a un determinado elemento debemos
emplear el lenguaje de CSS ¿pero cómo lo hacemos? La respuesta es: ¡muy fácil!

Básicamente existe una sintaxis, es decir una manera de expresar mediante código y eso
aprenderemos a continuación.

La sintaxis siempre tiene la siguiente forma: el selector, seguido del grupo de declaraciones
encerrada en llaves.

Selector {grupo de declaraciones}

Las declaraciones tienen la siguiente forma: Las declaraciones están formadas por la propiedad,
seguido de dos puntos para continuar con un valor y cerrado con un punto y coma (;)
Propiedad: valor;
Veamos en un ejemplo de cómo se emplea la sintaxis CSS.

Imagina que deseamos ponerle un color verde al color de los subtítulos de nuestro documento
HTML, entonces la sintaxis CSS adecuada para ello será:

h2 {color: Green;}
 El selector siempre va antes que las declaraciones.
 Las declaraciones van dentro de llaves y se separan con un “;”
Selectores de tipo
Los selectores de tipo en CSS se refieren a los electores que apuntan a un tipo de elemento
HTML como puede ser:

 Los títulos: h1
 Los subtítulos: h2
 Párrafos: p
 Los enlaces: a
 Tablas: table
Por poner un ejemplo, imagina que deseamos poner de color azul, todos los párrafos de la
página; para ello el código será:

p {color: blue;}
Selectores de id y clase
Este tipo de selectores en CSS apuntan a un elemento HTML identificado, es decir a un elemento
HTML que tenga el atributo id o class.
Como vimos en el curso de HTML, es posible marcar un elemento para ponerle un estilo en
especial, si no lo has visto, puedes ir a repasar.

Ejemplo de Código HTML:

HTML

1
<div id="producto">
2

3
<h2> Nombre de producto</h2>
4

5
<p> descripción del producto fantástico </p>
6

7
</div>

Código CSS para ponerle letras azules y un fondo de color amarillo al elemento
con id="producto".
CSS

1
#producto {color: blue;
2
background-color: yellow;}

Tanto el selector de tipo id y class funcionan de la misma manera; única diferencia es que
para los selectores de tipo id se le antepone el signo de numeral (#) y a los de tipo class un
punto (.)
No utilices solo números para identificar un elemento HTML, tampoco inicies con números.

Selectores descendientes
Los selectores descendientes en CSS sirven para apuntar elementos que se encuentran dentro
otros elementos mayores, de esta manera se puede colocar un estilo específico a un elemento que
se encuentra contenido en otro elemento HTML mayor.

Por ejemplo si tenemos un elemento <em> dentro de un párrafo y este párrafo a la vez está
dentro de una sección “primero” (bloque <div>)
HTML
HTML
 1
<div id="grande">
2
<p class="interior"> esto es un <em>párrafo hermoso</em></p>
3
<p> este es otro párrafo genial </p>
4
</div>
5

6
<p> este párrafo ya no está dentro de la sección con id grande</p>
7
<p> este es otro párrafo que ya no está en la sección o bloque grande</p>

CSS para poner de color rojo solo el elemento que está dentro de <em> y fondo azul.
CSS

1
#grande .interior em {
2
color: red;
3
background-color: blue;}

Comentarios en CSS más

cascada de estilos y
herencia
Avanzar
En esta lección aprenderemos a colocar comentarios dentro de nuestro código
CSS y por otro lado veremos en qué consiste y cómo se da la cascada de estilos
y herencias en una página web.
Comentarios en CSS
Un comentario dentro del código CSS puede servir para poner notas,
recordatorios o cualquier apunte que pueda servir para alguna ocasión, ya sea
cuando otro programador lo lea, o para aclarar algo.

La forma adecuada de poner un comentario es empezando con slash (/) seguido

del asterisco (*), a continuación sigue el comentario deseado y para finalizar el
asterisco (*) seguido de otro slash (/)

Ejemplo: /*Comentario css*/

Los comentarios son ignorados por los navegadores web, solo son visibles para
los editores del código fuente.

Cascada de estilos y herencias

Hay dos formas en las que actúa CSS: como cascada de estilos y herencia; a
continuación veamos en que consiste cada una de ellas.

Cascadas de estilos
El estilo final de una página web es establecido por el total de códigos CSS que
influyen sobre ella; las fuentes de código CSS pueden ser:

 La hoja de estilos creada por el desarrollador de la página.

 Los estilos predeterminados del navegador.
 Los estilos especificados por el usuario.
Herencia
Esta característica en CSS consiste en que los elementos hijos, adoptan los
etilos determinados para los elementos padre en caso no se determine uno
específico para el elemento hijo.

Por ejemplo: si determinamos color de letra en azul para el elemento

HTML <body> esto afectará a todos los elementos que estén dentro de <body>,
esto incluye los párrafos, subtítulos, o cualquier otro elemento de texto contenido
dentro de <body>.
body {color: blue;}
Ya veremos en próximas lecciones, como se hace esto, por ahora debes tener
bien en claro, qué significa la herencia en CSS.

Estilos CSS para textos |

Tamaño, tipografía, color,
peso, alineación y más
En esta interesante lección, vas a aprender a poner estilo a los textos con CSS, me refiero a
estilos como: el tipo de letra, tamaño de fuente, estilo, variante, peso, alineación, etc. Así es, hoy
conoceremos todas las propiedades y valores CSS para tener el control total sobre la apariencia
de los textos de nuestras páginas web.

Familia tipográfica en CSS

La propiedad font-family para la familia tipográfica
Gracias a la propiedad font-family podemos definir el tipo de letra o familia tipográfica
para cualquier elemento de texto que tengamos, estos pueden ser por ejemplo: un párrafo, títulos,
subtítulo, enlaces, etc.
Existen dos tipos de nombres de familias de fuente:

 Familia de fuentes: una familia especifica (como: times new

roman, courier o arial, etc.)
 Familia genérica: un grupo de familia de fuentes con un aspecto similar
(como: serif, fantasy o monospace, etc.)
Ejemplo: A continuación observemos los ejemplos de código con sus respectivos resultados.

Código HTML
HTML

1
<p class="cursiv"> Este es un párrafo con tipo de letra cursive</p>
2

3
<p class="georgia"> Este es un párrafo con tipo de letra georgia</p>
4

5
<p class="fant"> Este es un párrafo con tipo de letra fantasy</p>
6

7
<p class="new"> Este es un párrafo con tipo de letra new times roman</p>
8

9
<p class="monos"> Este es un párrafo con tipo de letra monospace</p>
10

Código CSS
CSS

1
p.cursiv {font-family: cursive;}
 2

3
p.geor {font-family: georgia;}
4

5
p.fant {font-family: fantasy;}
6

7
p.new {font-family: new times roman;}
8

9
p.monos {font-family: monospace;}
10

11

12

Recordemos que el nombre de la clase puede ser cualquiera, en el ejemplo usamos solo para
identificar y visualizar la diferencia.

Resultado:

Ejemplos de familias
tipográficas en CSS
Es importante colocar más de una familia tipográfica dentro de los valores de la
propiedad font-family, esto con el objetivo de asegurar un estilo específico; si por alguna
razón el navegador web del usuario no puede cargar el primer estilo, entonces tratará de cargar el
segundo, el tercero y hasta dar con la tipografía que puede cargar, aunque es muy poco común y
casi no sucede, es mejor tenerlo bajo control.
Ejemplo:

Código HTML

HTML

1
<p> Párrafo con respaldos de tipografia, en caso no pueda cargar el preferido</p>
2

Código CSS

CSS

1
p {font-family: arial, helvetica, roboto, "new times roman", lato;}
2

Los nombres de tipos de letras CSS deben ir separadas con comas (,) y los tipos de letra con más
de una palabra deben ir entre comillas, por ejemplo: “times new roman”
Es recomendable utilizar fuentes de letra genéricas, de esta manera, el navegador empleará un
tipo de letra similar en caso haya algún inconveniente con las fuentes.

Valores genéricos
La propiedad font-family puede tomar cualquier familia tipográfica, a continuación
describimos algunas genéricas.
 initial.- Señala que tipo de letra debe ser el establecido por defecto en el
navegador.
 inherit.- El tipo de letra debe ser heredado de su elemento padre.
 serif.- Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.
 sans-serif.- Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.
 monospace.- estilo de fuente genérica Monospace, como por ejemplo Courier.
 cursive.- Estilo de fuente genérica cursiva, como por ejemplo Script.
Tamaño de fuente CSS
Ahora nos toca aprender las propiedades y valores para definir el tamaño de letra de nuestros
elementos de texto.

La propiedad font-size para establecer tamaño de

fuente
La propiedad font-size indica el tamaño de fuente para nuestros elementos de texto.
Podemos establecer el tamaño de letra con palabras clave o indicando una medida exacta con sus
respectivas unidades. Se suele emplear palabra clave cuando no se desea que el usuario
modifique el tamaño de letra.
Valores con palabra clave
Las palabras clave para indicar el tamaño de letra son:

 small: pequeño
 medium: mediano
 large: grande
 x-large: muy grande
Ejemplo de código para establecer tamaño de letra con palabra clave como valor:

Código HTML

HTML

1
<p class="peque">Texto con tamaño de letra pequeño</p>
2

3
<p class="medio"> Texto con tamaño de letra mediano </p>
4

5
<p class="grande"> Texto con tamaño de letra grande </p>
6

7
<p class="mas-grande"> Texto con tamaño de letra muy grande </p>
8
Código CSS

CSS

1
p.peque {font-size: small;}
2

3
p.medio {font-size:medium;}
4

5
p.grande {font-size: large;}
6

7
p.mas-grande {font-size: x-large;}
8

Resultado:

Tamaño de
letra en CSS con valores de palabra
Valores numéricos
Generalmente, para establecer el tamaño de letra se trabaja con valores numéricos y sus
respectivas unidades de medida que pueden ser píxeles o ems.

 Píxeles.- Los píxeles permiten establecer un tamaño exacto.

 Ems.- Permite establecer un tamaño relativo, el texto puede ser redimensionado
por los navegadores web.
Equivalencia entre píxeles y ems
1px equivale a 16em, por lo tanto podemos emplear la fórmula de conversión: em=px/16

Aplicando la conversión podemos afirmar que 32px equivalen a 2em, si empleamos cualquiera
de ellos en los valores para la dimensión de letra, producirán el mismo resultado.

Por ejemplo:

Código HTML
HTML

1
<h1> Título de la página </h1>
2

3
<h2> Sutítulo de la página </h2>
4

5
<p class="och">Texto tamaño de letra 8</p>
6
<p class="diz">Texto tamaño de letra 10</p>
7
<p class="qui">Texto tamaño de letra 15</p>
8
<p class="vtr">Texto tamaño de letra 23</p>
9
<p class="cua">Texto tamaño de letra 40</p>
10

Código CSS
CSS
 1
/*Tamaño en px*/
2
h1{font-size: 32px;}
3

4
/*Tamaño en ems*/
5
h2{font-size: 2em;}
6

7
p.och {font-size: 8px;}
8
p.diz {font-size: 10px;}
9
p.qui {font-size: 15px;}
10
p.vtr {font-size: 23px;}
11
p.cua {font-size: 40px;}
12

13
/*Ambios producirán el mismo tamaño de letra*/
14

Resultado:

Tamaño de letra en CSS con valores

numéricos
Estilo de fuentes CSS
La propiedad font-style nos permite establecer un texto en cursiva, los valores que puede
tomar esta propiedad son:
Valores para font-style CSS
 normal.- el texto se muestra normal, sin efectos.
 italic.- el texto se muestra en cursiva.
 oblique.- texto en oblicua, es parecido a italic.
Si recuerdas, la etiqueta HTML <i> hace que el texto se muestre en cursiva ¿Verdad? Pues el
valor italic para estilo de fuente lo hace en CSS.
A continuación veamos un ejemplo en el que además veremos las diferencias de resultados de
cada uno de los distintos valores posibles:

Código HTML

HTML

1
<p class="normal">Este es un texto con es estilo de fuente normal</p>
2

3
<p class="italic"> Texto con estilo de fuente cursiva</p>
4

5
<p class="oblique"> Texto con estilo oblicuo, similar a italic </p>
6

7
<i> Texto con etiqueta i produce lo mismo que italic </i>
8

Código CSS

CSS
 1
p.normal {font-style: normal;}
2

3
p.italic {font-style: italic;}
4

5
p.oblique {font-style: oblique;}
6

Resultado:

Estilo de texto en
CSS
Como podemos observar, los valores italic y oblique producen resultados similares y
además la etiqueta de HTML <i> también.
La propiedad font-style para texto en CSS generalmente se emplea para poner el texto en
cursiva.
Propieda font-weight para peso de
fuente
La propiedad font-weight para texto, nos permite establecer el ancho de un texto, podemos
elegir entre textos con grosores desde muy delgados hasta muy anchos independientemente de
otras propiedades.
Puede tomar valores con palabras clave o valores numéricos.

Valores de font-weight
 ligther.- este valor produce un texto ligero o delgado.
 normal.- Normal define el grosor de texto por defecto, sin modificar el grosor.
 bold.- establece texto grueso o en negrita.
 bolder.- produce un texto bastante grueso.
los valores numéricos pueden ir de 100 a 900, siendo 100 el texto más delgado y 900 el más
grueso; también cabe mencionar que 400 produce el mismo resultado que el valor normal y 600
produce el mismo resultado que el valor bold.
Ejemplos de font-weight en CSS
Código HTML

HTML

1
<p class="ligero">Texto con peso lighter</p>
2

3
<p class="normal">Texto con peso normal</p>
4

5
<p class="negrita">Texto con peso bold</p>
6

7
<p class="pesado">Texto con peso en bolder</p>
8

Código CSS

CSS
 1
p.ligero {font-weight: lighter;}
2

3
p.normal {font-weight: normal;}
4

5
p.negrita {font-weight: bold;}
6

7
p.pesado {font-weight: bolder;}
8

Resultado:

Propieda font-weight
para peso de fuente
Como podemos observar, entre los valores ligero y normal, el resultado casi no muestra mucha
diferencia y lo mismo ocurre entre bold y bolder.
Recordemos que en HTML también existe la etiqueta <strong> que
visualmente produce el mismo resultado que el valor bold de CSS.
Alex HM.
Ejemplo con de font-weight con valores numéricos
Código HTML

HTML

1
<p class="cien"> testo con peso 100</p>
2

3
<p class="trecien"> testo con peso 300</p>
4

5
<p class="quicien"> testo con peso 500</p>
6

7
<p class="sietcien"> testo con peso 700</p>
8

9
<p class="novcien"> testo con peso 900</p>
10

11

Código CSS

CSS

1
p.cien {font-weight: 100;}
2

3
p.trecien {font-weight: 500;}
4
 5
p.quicien {font-weight: 900;}
6

7
p.sietcien {font-weight: 700;}
8

9
p.novcien {font-weight: 900;}
10

11

Resultado:

Propieda font-weight
con valores numéricos
Como se observa en los resultados, es curioso notar que la diferencia no se nota claramente en el
ejemplo, sin embargo con la combinación de estilos, tamaños y otras propiedades de texto
con el peso de fuente se pueden conseguir fantásticos diseños y textos muy atractivos que ni
te imaginas, realmente hay universo de combinaciones y posibilidades que los iremos
aprendiendo poco a poco.
Los valores numéricos para el establecer el peso de la fuente no lleva unidades
¿Lo notaste verdad?

Propiedad font-variant para

variantes de fuente
La propiedad font-variant sirve para cambiar el texto a mayúsculas pequeñas, es tan simple
como eso, veamos lo valores que puede tomar.
Valores para font-variant CSS
 normal.- no aplica ningún cambio.
 small caps.- establece que las letras deben ser mayúsculas pequeñas.
 inherit.- Hereda el estilo del elemento padre que lo contiene.
Ejemplo de propiedad font-variant
Código HTML

HTML

1
<p class="normal"> Texto con variante normal </p>
2

3
<p class="small"> Texto con variante small caps</p>
4

Código CSS

CSS

1
p.normal {font-variant: normal;}
2

3
p.small {font-variant: small-caps;}
4

Resultado
 Propiedad font-variant
para variantes de fuente
Color de letra CSS
Poner color a un texto en CSS es tan simple como apuntar al elemento mediante un selector
y establecer la propiedad color, dentro del valor podemos colocar el color que deseamos y
existe más de una forma de hacerlo.
Valores de la propiedad color
 Podemos establecer el valor del color utilizando palabras clave en ingles
como: red (rojo), blue (azul), green (verde).
 Otra forma de colocar el color es mediante valores hexadecimales, se trata de un #
seguido de 6 o 3 valores alfanuméricos, por ejemplo el amarillo es: #FFFF00
 La tercera forma es empleando valores RGB (Rojo, Verde, Azul)
Aquí tienes un selector de color que muestra los valores RGB:
Veamos los equivalentes a los colores rojo, verde y azul en Hexadecimales y RGB.

Ejemplo de color de texto en CSS

Código HTML

HTML

1
<p class="red"> Texto de color rojo </p>
2

3
<p class="blue"> Texto de color azul </p>
4

5
<p class="green"> Texto de color verde </p>
6

7
<p class="yellow"> Texto de color amarillo </p>
8

Código CSS

CSS

1
p {font-weight:bold;}
2

3
p.red {color:red;}
4

5
p.blue {color:#0000ff;}
6

7
p.green {color: rgb(0, 128, 0);}
 8

9
p.yellow {color:yellow;}
10

11

Resultado:

Ejemplo de color de
letra CSS
En el ejemplo, empleamos negrita para todos los textos y luego apuntamos a cada párrafo
mediante su identificador class para indicar su color.
Los colores pueden expresarse en palabra clave, hexadecimal o RGB y el resultado visual será el
mismo. Cabe señalar que para expresar colores RGB debemos colocar los números entre
paréntesis antecedido por rgb. Así: rgb(0, 128, 0)
Propiedad tex-align para alinear el
texto horizontalmente
La propiedad text-align es la que nos permite determinar la alineación de los elementos de
texto con CSS, por defecto los textos están alineados a la izquierda en cualquier navegador web,
sin embargo podemos modificar e indicar que sea a la derecha, al centro o justificado.
Valores para la propiedad de text-align
 left.- indica que el texto debe ser alineado a la izquierda.
 right.- indica que el texto debe ser alineado a la derecha.
 center.- establece texto con alineación al centro.
 justify.- hace que el texto se justifique, quedando las líneas estiradas de principio
a fin para que todos queden iguales.
Ejemplos de alineación de texto CSS
Código HTML

HTML

1
<p class="left"> Este es un parrafor alineado a la izquierda, mediante la propiedad y text-
align de CSS. </p>
2

3
<p class="right"> Este párrafo será alineado a la derecha y lo verás claramente por que es
muy diferente al anterior. </p>
4

5
<p class="center"> Texto alineado al centro con CSS </p>
6

7
<p class="justify"> Este hermoso texto será justificado con CSS, de tal manera que todas
las lineas de este párrafo se encuentre con margenes iguales. En ocasiones es necesario o
quizá para darle un toque estético cautivador, un estilo que necesita varias lineas de texto
para poder ser aprecidado en toda su plenitud; ahora que tenemos varias lienas de floro,
puedes deleitar tus ojos con este justificado de texto. </p>
8

Código CSS

CSS

1
p.left {text-align: left;
2
font-weight: bold;}
3
 4
p.right {text-align: right;}
5

6
p.center {text-align: center;
7
font-weight: bold;}
8

9
p.justify {text-align: justify;}
10

11

Resultado:

Propiedad tex-aling para alinear el

texto horizontalmente
Alinear el texto verticalmente en
CSS
La propiedad vertica-align se emplea en general para establecer la alineación vertical de un
elemento HTML dentro de otro; en este caso nos enfocaremos para texto y mencionaremos los
aspectos más importantes.
Es bastante útil por ejemplo cuando queremos alinear un texto al medio o en la parte inferior de
un bloque, o quizá dentro de una tabla o cualquier otro contenedor como veremos en los
ejemplos.

Valores para vertical-align

Por ejemplo los valores empleados para celdas de tablas son:
 top.- Indica que el texto se ubica en la parte superior.
 middle.- establece que el texto se ubica en al medio.
 bottom.- Ubica al texto en la parte inferior.
Ejemplo de alineación vertical de texto en tabla con CSS
Código HTML

HTML

1
<table border="1" cellpadding="2" cellspacing="0" style="height:200px;">
2
<tr>
3
<td class="top">texto arriba</td>
4
<td class="mid">texto al medio</td>
5
<td class="bot">texto abajo</td>
6
</tr>
7
</table>
8

Establecemos una tabla de 400px de altura con 1 fila y 3 columnas, cada columna identificada
con un identificador class.
Código CSS

CSS

1
td.top {
2
vertical-align: top;
3
}
4
td.mid {
5
vertical-align: middle;
6
}
7
td.bot {
8
vertical-align: bottom;
9
}
10

Apuntamos cada celda y definimos la alineación vertical con CSS.

Resultado:

Ejemplo
Alinear el texto verticalmente en CSS en tablas
Además de estos podemos emplear otros para alinear fragmentos de texto en una misma línea
empleando otros valores y los conoceremos a continuación.

Valores para alinear elementos en línea pueden ser:

 baseline.- alinea el elemento padre con la línea del elemento hijo.
 sub.- Alinea la línea base del elemento seleccionado con la línea subíndice del
elemento padre.
 super.- Alinea la línea base del elemento seleccionado con la línea superíndice
del elemento padre.
Ejemplo de alineación de texto en linea con CSS
Código HTML

HTML

1
<p>1 Elemento <span class="baseline">en baseline</span> ejemplo</p>
2

3
<p>2 Elemento <span class="sub">en sub</span> ejemplo.</p>
4

5
<p>3 Elemento <span class="super">en super</span> ejemplo.</p>
6

7
<p>4 Elemento <span class="pix">con número -30px </span> ejemplo..</p>
8

Código CSS

CSS

1
span.baseline {vertical-align: baseline;}
2

3
span.sub {vertical-align: sub;}
4

5
span.super {vertical-align: super;}
6

7
span.pix {vertical-align: -30px;}
8

Resultado:

Ejemplo de alineacion vertivcal de texto en linea

Valores numéricos con unidades en px (píxeles), pt (puntos), cm (centímetros), % (porcentajes),
también son válidos e incluso con valores negativos.

Ejemplo de alineación vertical de texto dentro de un

<div> con CSS
Código HTML

HTML
 1
<div class="bloque">
2

3
<div class="tex">
4
este es un texto dentro de un contenedor div con nombre main y será alineado al medio
verticamente </div>
5

6
</div>
7

Código CSS

CSS

1
.bloque {
2
height: 200px;
3
width: 300px;
4
background-color: red;
5
display: inline-table;
6
}
7
.tex {
8
display: table-cell;
9
vertical-align: middle;
10
}
11

El código HTML establece un contenedor <div> con un texto dentro de ella, para ver el
resultado claramente pondremos color de fondo rojo (background-color: red), altura
200px y ancho 300px.
Resultado:

Ejemplo de alineación vertical de texto dentro de un

Cuando se trata de contenedores <div> es posible que necesitemos establecer algunos estilos
previos para que el resultado pueda tomar forma.
Propiedad text-decoration
La propiedad text-decoration nos permite decorar nuestros elementos de texto,
básicamente se trata de agregar una línea decorativa ya sea debajo, encima o al medio del texto
en cuestión; mejor exploremos los posibles valores y los resultados que se obtienen.
Valores para text-decoration en CSS
 none.- evita que se aplique algún estilo de decoración de texto.
 inherit.- hereda el estilo del elemento padre que lo contiene.
 overline.- decora con una línea horizontal encima del texto.
 underline.- decora con una línea horizontal debajo del texto.
  line-through.- este valor hace que se dibuje una línea horizontal atravesando
al texto.
Es posible combinar los valores: underline, overline y line-through en una lista
separada por espacios para añadir múltiples líneas decorativas.
Ejemplo de text-decoration
Código HTML

HTML

1
<p class="none">Este es un texto sin decoración.</p>
2

3
<p class="inherit">Texto con decoración heredado.</p>
4

5
<p class="overline">Texto con decoracion encimma.</p>
6

7
<p class="through">Texto con decoración al medio.</p>
8

9
<p class="underline">Texto con decoración debajo.</p>
10

11

Código CSS

CSS

1
p.none {text-decoration: none;}
2
 3
p.inherit {text-decoration: inherit;}
4

5
p.overline {text-decoration: overline;}
6

7
p.through {text-decoration: line-through;}
8

9
p.underline {text-decoration: underline;}
10

Resultado:

D
ecoración de texto con CSS ejemplos
Propiedad text-indent CSS
Indentando el texto
La propiedad de CSS text-indent sirve para establecer cuanto el espacio que se debe dejar
horizontalmente para empezar con la primera línea de un texto, de tal manera que a primera línea
se diferencia del resto.
Valores para text-indent
 length.- longitud expresada numéricamente con su respectiva unidad de
medida, px, pt, cm, em, %, etc. Se permiten valores positivos que desplazan el
texto a la derecha y valores negativos que desplazan al texto a la izquierda.
 inherit.- establece que debe heredar el estilo del elemento padre.
Ejemplo de text-indent CSS
Código HTML

HTML

1
<p class="indent"> Este es un texto en el que aplicaremos la propiedad text-indent que
sirve para aplicar un espacio al principio de la primera linea de este párrafo. Notaras que la
primera linea de este texto se encuentra a una distancia de 70px desde el borde y ello se
debe a que el valor de esta propiedad es de 70px.</p>
2

Código CSS

CSS

1
p.indent {text-indent: 70px;}
2

Resultado:
Propiedad text-indent CSS Indentando el texto
Poner sombra al texto CSS Text-
shadow
Poner sombra a un texto es más simple de lo que imaginas, simplemente empleamos la
propiedad text-shadow y en sus valores colocamos las medidas y color de sombra deseado, te
explico mejor en pasos y con ejemplo.
Valores para text-shadow
La forma más simple de colocar sombra a un texto con CSS consiste en establecer los siguientes
valores para la propiedad de sombra:

 Distancia horizontal.- Es el primero en ser definido, se expresa con un valor

numérico y su unidad de medida. Establece cuánto será la sombra en dirección
horizontal, si el valor es positivo la sombra se dirige a la derecha y si es negativo
a la izquierda.
 Distancia vertical.- Es el segundo valor que debemos definir y también con un
valor numérico con unidades de medida. Establece cuánto será la sombra en
dirección vertical, si el valor es positivo, la sombra se dirige hacia abajo y si es
negativo hacia arriba.
 Desenfoque.- Determina el radio de desenfoque, este valor también es numérico y
hará que la sombra tenga un aspecto borroso, de tal manera que aparente una
sombra.
 Color de sombra.- definimos un color para la sombra.
Ejemplo de sombra para texto con text-shadow en CSS
Código HTML

HTML

1
<h3> Título de tercer nivel</h3>
2

Código CSS

CSS

1
h3 {text-shadow: 7px 4px 5px blue;}
2

Resultado:
 Poner sombra al
texto CSS Text-shadow
Agregando más sombras de color a texto CSS
Es posible agregar más de una sombra, simplemente debemos separar las sombra con una coma,
veamos el ejemplo en el que aplicamos tres sombras de distintos colores:

Código HTML

HTML

1
<h1> Título con tres sombras de colores </h1>
2

Código CSS

CSS
 1
h1 {
2
text-shadow:
3
3px 3px 1px red,
4
5px 5px 2px yellow,
5
8px 8px 3px blue;
6
;
7

8
}
9

10

Resultado:

Text-shadow para
poner varias sombras a un texto en CSS
La propiedad text-transform
La propiedad CSS text-transform sirve para transformar nuestros elementos de texto en
varios formatos, ya sea a minúsculas, mayúsculas, sola las iniciales, etc. de acuerdo al valor que
pueda tomar:
Valores para la propiedad text-transform
  none.- es el valor por defecto y evita cualquier transformación.
 capitalize.- Convierte en mayúscula solo a las primeras letras de cada palabra
escrita.
 uppercase.- Indica que todas las palabras del texto en cuestión sean
transformadas a mayúsculas.
 lowercase.- Este valor hará que todas las palabras se conviertan en minúsculas.
Text-transform ejemplos CSS
Código HTML

HTML

1
<p class="none"> texto sin transformación CSS</p>
2

3
<p class="capi"> texto con transformación capitalize en CSS</p>
4

5
<p class="upp"> texto con transformación uppercase en CSS</p>
6

7
<p class="low"> texto con transformación lowercase en CSS</p>
8

Código CSS

CSS

1
p.none {text-transform: none;}
2

3
p.capi {text-transform: capitalize;}
4
 5
p.upp {text-transform: uppercase;}
6

7
p.low {text-transform: lowercase;}
8

Resultado:

Como aplicar text-transform

a textos con CSS
La propiedad Letter-spacing para
textos
Letter-spacing Es la propiedad de CSS que nos permite controlar el espacio entre letras
de un elemento de texto, pueden ser: normales, amplios, estrechos y además pueden ser
expresados con valor numérico y su unidad de medida, conozcamos los valores:
Valores para letter-spacing CSS
 normal.- Establece el estilo por defecto, sin modificar.
 inherit.- Hereda el estilo de espaciado de un elemento padre.
 length.- Indica el espaciado en números con su respectiva unidad como: px, pt,
em, %, etc. y pueden ser valores positivos o negativos, los positivos amplían el
espacio y los negativos los reducen e incluso los combina aparentemente.
Letter-spacing ejemplos de como usar
Código HTML
HTML

1
<p class="normal"> Texto con espaciado normal en CSS</p>
2

3
<p class="posit"> Texto con espaciado de 4px positivo </p>
4

5
<p class="neg"> Texto con espaciado de -2px negativo</p>
6

Código CSS

CSS

1
p.normal {letter-spacing: normal;}
2

3
p.posit {letter-spacing: 4px;}
4

5
p.neg {letter-spacing: -2px;}
6

Resultado:
 Ejemplo de letter-
spacing en CSS
La diferencia es bastante notable, pues bien ¡SIGAMOS APRENDIENDO!

La propiedad Word-spacing
A diferencia del anterior, la propiedad word-spacing permite establecer el espacio entre
palabras dentro de un texto, y los valores que puede tomar son los
mismos: normal, inherit, length.
Bastante similar a la propiedad letter-spacin, solo que en este caso trabajamos con palabras
y no con letras, veamos un ejemplo:
Word-spacing ejemplo CSS
HTML

HTML

1
<p class="normal"> Texto con espaciado de palabras normal </p>
2

3
<p class="posit"> texto con espaciado de palbras en 8px positivo </p>
4

5
<p class="nega"> texto con espaciado de palabras negativo con -2px </p>
6
CSS

CSS

1
p.normal {word-spacing: normal;}
2

3
p.posit {word-spacing: 8px;}
4

5
p.nega {word-spacing: -2px;}
6

Resultado de ejemplo:

Ejemplo de word-spacing
en CSS
letter-spacing Para espaciado de letras y word-spacing para espaciado de
palabras, funcionan casi de la misma manera ¡Es genial hacer estas cosas!
¿Verdad?
Alex.

La propiedad White-space
La propiedad CSS white-space sirve para determinar cómo funcionan los espacios en blanco
dentro de un texto, en este caso; puede ser que se desee mantener los espacios en blanco tal cual
o quizá colapsarlos en uno solo, veamos los valores.
White-space y sus valores en CSS
 normal.- reduce los espacios en blanco en uno solo y si es necesario hace saltos
de línea sin necesidad de <br>.
 pre.- conserva los espacios en blanco y hace salto delinea cuando aparece <br>.
 nowrap.- reduce los espacios, pero es necesario un <br> para hacer salto de
línea.
 pre-wrap.- mantiene espacios en blanco y hace salto de línea cuando es
necesario.
 pre-line.- reduce los espacios, hace salto de línea cuando es necesario y
cuando aparece un <br>.
<br> Es la etiqueta de HTML para realizar saltos de línea. Por si no recuerdas.
white-space ejemplos
HTML

HTML

1
<p class="normal"> ESTILO NORMAL Ejemplo de párrafo posee espacios como este y
otro además otro para que veas la diferencia <br> y sabes, a este párrafo le
colocaremos un estilo de espacios NORMAL con CSS y veamos que sucede en los
resultados.</p><hr>
2

3
<p class="pre"> ESTILO PRE Ejemplo de párrafo posee espacios como este y otro
además otro para que veas la diferencia <br> y sabes, a este párrafo le colocaremos
un estilo de espacios PRE con CSS y veamos que sucede en los resultados.</p><hr>
4

5
<p class="nowrap"> ESTILO NOWRAP Ejemplo de párrafo posee espacios como este
y otro además otro para que veas la diferencia <br> y sabes, a este párrafo le
colocaremos un estilo de espacios NOWRAP con CSS y veamos que sucede en los
resultados.</p><hr>
6

7
<p class="prewrap"> ESTILO PRE-WRAP Ejemplo de párrafo posee espacios como este
y otro además otro para que veas la diferencia <br> y sabes, a este párrafo le
colocaremos un estilo de espacios PRE-WRAP con CSS y veamos que sucede en los
resultados.</p>
8

CSS

CSS

1
p.normal {white-space: normal;}
2

6
p.pre {white-space: pre;}
7

10

11
p.nowrap {white-space: nowrap;}
12

13

14

15
 16

17

18
p.prewrap {white-space:pre-wrap;}
19

20

21

22

23

24

25

26

27

Resultado del ejemplo:

Como funciona la propiedad

de white-space
Para ver la diferencia hemos agregado líneas horizontales con la etiqueta <hr>.
Observa la diferencia de estilos para los espacios en blanco de los párrafos, en el primer y tercer
párrafo los espacios en blanco han sido colapsados; en el segundo y cuarto se mantienen.

Por otro lado, el segundo y tercer párrafo no presentan saltos de línea automáticos como en los
otros, nota que los textos continúan hasta que aparece la etiqueta de salto de línea <br>, pero en
la parte inferior aparece una barra de desplazamiento que permite recorrer para visualizar el texto
que se salió del contenedor.
CSS para títulos y subtítulos
Tanto los títulos como los subtítulos son elementos de texto, se pueden aplicar a ellos todas las
propiedades y sus respectivos valores de CSS para títulos, desde tipografía, tamaño, color,
decoración, y todo lo aprendido a lo largo de esta lección.

Veamos un ejemplo de CSS para H1

HTML

1
<style>
2
h1.concss {
3
font-size: 45px;
4
font-family: Roboto;
5
font-weight: bold;
6
font-style: italic;
7
text-transform: uppercase;
8
text-decoration: underline;
9
letter-spacing: 6px;
10
color: #4416c4;
11
background-color: #e3e3e3;
12
}
13

14
 15
</style>
16

17
<h1 class="concss">Título de ejemplo con CSS</h1>
18

19
<h1 class="sincss">Título de ejemplo sin CSS</h1>
20

21

22

Estilos de texto CSS ejemplos

Para terminar, veamos más ejemplos adicionales a todos los que ya hemos visto, en esta ocasión
trataremos de utilizar varias propiedades y valores aprendidos en esta lección, observa.

HTML

1
<style>
2

3
p.concss {
4
font-size: 34px;
5
font-weight: bold;
6
font-style: italic;
7
font-variant: small-caps;
8
font-family: monospace;
9
text-transform: capitalize;
10
letter-spacing: 4px;
11
color: #b80935;
 12
text-align:center;
13
word-spacing: 8px
14
}
15

16
</style>
17

18
<p class="concss">Texto de ejemplo final para demostracion con CSS</p>
19

20
<p class="sincss">Texto de ejemplo final para demostracion sin CSS</p>
21

Poner Ancho y alto en CSS

a los elementos
Avanzar

En esta lección aprenderemos a establecer el ancho y alto de los elementos

HTML con CSS, es una de las cosas más básicas y simples que se utiliza
bastante en CSS para diseñar páginas web, pues tanto el ancho como la altura
nos permiten dimensionar todos los elementos y de acuerdo a sus
dimensiones posicionarla en el lugar más adecuado dentro de la estructura de la
página.
Ancho y alto en CSS
Para indicar el ancho de un elemento simplemente establecemos la propiedad
CSS width y para determinar la altura establecemos la propiedad height.
Propiedad width CSS
La propiedad width nos permite establecer el ancho de cualquier elemento
HTML, ya sea un contenido específico o un contenedor, de ahora en adelante
podemos controlar el ancho mediante valores numéricos con sus respectivas
unidades de medida.
Ejemplo de código para ancho CSS
HTML
HTML

1
<img class="ancho" src="gatito.png">
2

CSS

CSS

1
p.class {width: 500px;}
2

Si solo establecemos el ancho de un elemento, dependiendo del contenido es

posible que solo se modifique el ancho, o se escale también la altura por defecto
como ocurre con las imágenes.

Propiedad height en CSS

Indicar la altura de cualquier elemento HTML, ya sea un elemento tipo bloque o
de línea, es tan simple como establecer la propiedad heigth y en su valor
indicará la dimensión numéricamente con su respectiva unidad de medida.
Ejemplo de altura con CSS
HTML

HTML

1
<img class="ancho" src="gatito.png">
2

CSS

CSS

1
p.class {height: 500px;}
2

Al igual que con el ancho, si solo se establece la altura, dependiendo del

elemento es posible que se escale el ancho o que solo se modifique la altura.

Poner ancho y alto a un elemento

HTML con CSS
Ahora que conocemos las propiedades de ancho y altura en CSS, veamos un
ejemplo de un elemento de imagen y un párrafo para ver los resultados
obtenidos después de aplicar anchos y alturas variados.

El primer ejemplo se trata de una imagen de gatito cuya dimensiones originales

son de 509x339px, mediante CSS conseguiremos establecer dos versiones de
400x200px y otra de 250x380px a partir de la misma imagen. Asume que las
medidas expresadas se refieren a (ancho x alto) Veamos y notemos la diferencia
de resultado:

HTML

HTML

1
<img class="primer" src="gatito.png"/>
2

3
<img class="segundo" src="gatito.png"/>
4

CSS

CSS

1
img.primer {
2
width: 400px;
3
height: 200px;}
4

5
img.segundo {
6
width: 250px;
7
height: 380px;}
8

10
Resultado:

El segundo ejemplo se trata de un párrafo, se presenta el mismo párrafo sin

aplicar CSS y la misma con ancho y altura establecida, para notar la diferencia
colocaremos un color de fondo verde. Vemos la diferencia.

HTML

HTML

1
<p class="original" style="background-color:green;"> Párrafo para probar la propiedad de
ancho y alto de CSS, sin modificación.</p>
2

3
<p class="modificado" style="background-color:green;"> Párrafo para probar la propiedad
de ancho y alto de CSS, con modificación (150x90px).</p>
4

5
CSS

CSS

1
p.modificado {
2
width: 150px;
3
height:90px
4
}
5

Resultado:

Dimensión de ancho y altura

máximo y mínimo en CSS
CSS nos permite indicar las medidas mínimas y máximas que puede tener un
elemento, para ese fin emplearemos las propiedades específicas para máximos
y mínimos, ¡Vamos a conocerlos!

 min-width (Ancho mínimo)

 min-height (Altura mínima)
 max-width (Ancho máximo)
 max-height (Altura máxima)

Te preguntarás ¿En qué caso pueden ser útiles estas propiedades? Pues
imagina que tenemos un elemento de imagen cuya altura por defecto de 100px,
sin embargo queremos que como mínimo se muestre de 150px, entonces ah;i se
vuelve útil.
También es posible que deseemos establecer el ancho máximo que puede
ocupar un elemento, pues entonces también nos sirven estas propiedades.

Ejemplo de ancho y altura mínimos y máximos con CSS

Para el ejemplo tomaremos la misma imagen de 509x339px (ancho x alto) y
mediante CSS estableceremos una altura máxima de 180px y por otro lado
estableceremos un ancho mínimo de 700px, debes notar que lo que deseamos
obtener es viable.

HTML

HTML

1
<img class="max" src="gatito.png"/>
2

3
<img class="min" src="gatito.png"/>
4

CSS
CSS

1
img.max {
2
max-height: 200px;}
3

4
img.min {
5
min-width: 700px;}
6

Resultado:

Cuando usar máximos y mínimos

Los máximos y mínimos son generalmente empleados para poner limites a las
dimensiones de un bloque de contenido, no siempre tiene sentido emplear, ya
que se limitan a establecer lo mínimo y máximo posible, si el elemento no
necesita de dichos límites, entonces no se verá afectado.

Por ejemplo, si la altura original es de 339px entonces tiene sentido indicar que
lo máximo sea 180px pues es menor al original, sin embargo, no tendría sentido
si indicamos que la altura máxima sea de 500px, pues es mayor al original. ¿Por
qué? Pues simple, el navegador interpretará la instrucción altura máxima, como
un simple límite del que no puede superar y como el original no supera,
entonces lo mostrará tal cual.

Modelo de cajas CSS |

cómo es y para qué sirve
El modelo de cajas en CSS es el tema que abordaremos en esta lección,
conocerás qué es, en qué consiste y cómo funciona; pero lo más importante
aquí es que aprendas y comprendas totalmente a utilizar el modelo de cajas
para trabajar elementos HTML con CSS; además descubrirás sus aplicaciones y
cómo este modelo hará que sueltes el potencial creativo que posees para
diseñar elementos y páginas HTML altamente atractivos. ¿Listos? ¡Vamos a ello!
Qué es el modelos de cajas de CSS
Para entender el modelo, consideremos que todos los elementos HTML
aprendidos en las lecciones del curso HTML están contenidas en cajas; es decir,
para CSS cada elemento presente en una página HTML está dentro de una caja;
de tal manera que elementos como títulos, párrafos, imágenes, listas, etc. están
dentro de una caja en especial.

Representación gráfica del modelo

de caja CSS
A continuación veremos una representación gráfica del modelo de cajas para
entender mejor en que consiste, ya que ello será muy importante de ahora en
adelante cuando hablemos de diseño:
Ahora te explicaré de que va este hermoso gráfico y así estarás feliz.

El bloque de color azul es un elemento HTML cualquiera, este elemento posee

un relleno (verde), un borde (negro) y luego un margen (naranja), y claramente
están diferenciados con colores.

Elementos del modelo de caja

 Contenido.- Es el elemento HTML propiamente dicho.
 Relleno.- Es el espacio que existe entre el borde y el contenido.
 Borde.- Es una línea entre el relleno y el margen.
 Margen.- define el espacio entre el borde del contenido y el
elemento padre que lo contiene.
Gracias a CSS podemos establecer las dimensiones y otras características de
cada componte de la caja, de tal manera que tenemos a disposición infinitas
posibilidades de diseño, posicionamiento y en general estilo de elementos.

Ancho total de un elemento

Ahora que conocemos el modelo de caja de CSS, podemos decir que el ancho
total de un elemento en realidad es la suma del ancho del contenido, el relleno,
borde y margen, además hay que considerar tanto el lado derecho como el
izquierdo el contenido, por lo tanto podemos matemáticamente podemos
expresar que:

Ancho total de caja= A + RD+RI+BD+BI+MD+MI

Donde:

 A= Ancho del contenido.

 RD= relleno derecho
  RI= relleno izquierdo
 BD= borde derecho
 BI= borde izquierdo
 MD= margen derecho
 MI= margen izquierdo
Cabe indicar que CSS nos permite establecer una dimensión diferente a cada
lado.

Si las dimensiones son iguales a cada lado entonces podemos aplicar: Ancho de
caja= A +2(R) + 2(B) +2(M)

Veamos la figura para entender mejor:

Calcular el ancho total de la caja

Calcular el ancho total de la caja que contiene una imagen de 300 px 400 px de
ancho, con un relleno de 30 px, un borde de 1.5px y un margen de 27px.

Ancho total de caja=400+30+30+1.5+1.5+27+27 = 517px

517PX es el ancho que realmente ocupará dicho elemento.

Altura total de un elemento

Lo mismo ocurre con la altura total de caja, en este caso será la suma de la
altura del elemento propiamente dicho, el relleno superior e inferior, el borde
superior e inferior y el margen superior e inferior.

Como lo hicimos en el caso anterior expresemos matemáticamente:

Altura total de caja= H+RS+RI+BS+BI+MS+MI
 H= altura de contenido propiamente dicho.
 RS= relleno superior
 RI= relleno inferior
 BS= borde superior
 BI=borde inferior
 MS= margen superior
 MI=margen inferior
De la misma manera, cada uno de los componentes mencionados pueden ser
medidos independiente, de hecho veremos un ejemplo en el que tienen variedad
de medidas diferentes.

Calcular la altura total de la caja

Calcular la altura total de la caja que contiene una imagen con ancho de 300px y
altura de 240px que posee las siguientes características.

 Borde inferior de 3px

 Borde superior de 3px
 margen superior 45px
 relleno superior de 16px
 margen inferior de 27px
 relleno inferior de 13px

Por lo tanto la altura total lo calculamos de la siguiente manera:

Altura total de caja= 240+16+13+3+3+45+27 = 347px

De esta manera podemos considerar que la caja ocupa una altura total de
347PX.

Las propiedades: border,

padding y margin en CSS
octubre 30, 2019 por Desarrolladoresweb.org

Anterior
Avanzar

En esta lección aprenderás a poner relleno (padding), borde (border) y

margen (margin) a los elementos HTML haciendo uso de las propiedades y
valores CSS, al finalizar serás capaz de establecer las cajas con todas las
dimensiones que quieras.
Ir a contenido:

 La propiedad padding de CSS

o Colocar un relleno uniforme con padding CSS
 Propiedad padding uniforme CSS ejemplo
o Poner rellenos diferentes a cada lado de un elemento con CSS
o Dimensión de rellenos independientes en CSS
 Ejemplo de padding diferentes CSS
o Color de relleno CSS
 La propiedad border
 Propiedades y valores para bordes CSS
o Border-width para ancho del borde
o Ancho de borde uniforme
 Ejemplo para ancho de borde en CSS
o Ancho de borde diferentes CSS
 Ejemplo de código
o Unificando bordes con anchos diferentes en CSS
 Ejemplo de bordes con anchos diferentes en una declaración
CSS
 Propiedad border-color para color de borde CSS
o Colores de borde uniforme CSS
 Ejemplo de border-color CSS uniformes
o Colores de borde diferentes con CSS
 Ejemplo de código para colores diferentes de borde CSS
o Unificando colores de borde CSS
 Código CSS para colores de borde diferentes unificados
  La propiedad border-style para estilo de borde
o Valores de border-style CSS
o Estilo de borde uniforme CSS
 Ejemplo de borde uniforme
o Estilos de borde variado
 Ejemplo de estilos de borde diferentes
 Cómo poner bordes en CSS
 La propiedad margin
o Márgenes uniformes en CSS
 Ejemplo de márgenes uniformes
o Márgenes diferentes a cada lado CSS
 Ejemplo de márgenes específicos diferentes CSS
 Otras maneras de poner margen
o Margen vertical y horizontal
o Margen superior, horizontal e inferior

La propiedad padding de CSS

Poner relleno a un elemento de HTML es tan sencillo como establecer la
propiedad padding e indicar la dimensión del relleno con un valor numérico y
respectiva unidad de medida, ya sea píxeles, puntos, ems, etc.
Colocar un relleno uniforme con padding CSS
Para establecer un relleno uniforme en todo el alrededor del contenido o
elemento, simplemente establecemos la propiedad padding y su valor indicamos
el deseado. Veamos el ejemplo:
Propiedad padding uniforme CSS ejemplo
Código HTML

HTML

2
<img class="imagen" src="gatito.jpg" alt="foto de gatito" height="150px" width="250px"
border="1px"/>
3

Código CSS
CSS

1
.imagen {padding: 50px}
2

Resultado:

Si te fijas, notarás que el relleno es uniforme en todos los lados de la imagen y

solo bastó una instrucción.

Poner rellenos diferentes a cada lado de un elemento con CSS

Si deseamos una dimensión diferente en cada lado del contenido, entonces
indicaremos la medida mediante 4 valores, el primero define la dimensión del
relleno superior, el segundo la dimensión del lado derecho, el tercero de la parte
inferior y el cuarto del lado izquierdo.

La dimensión por defecto de relleno es 0.

Observa el código que establece relleno de 40px en la parte superior, 20px en

derecha, 65px en la parte inferior, 80px en el lado derecho y el resultado que
produce.

HTML

1
<img class="elemento" src="koala.jpg" border="2px" height="250px" width="400px"/>
2

CSS

1
.elemento {padding: 40px 20px 65px 80px;}
2

Resultado:
En el ejemplo empleamos un elemento de imagen para establecer diferentes
medidas de relleno a cada lado y para notar la diferencia hemos indicado un
borde de 2px en HTML.

Dimensión de rellenos independientes en CSS

También existe la posibilidad de establecer una medida específica solo para un
lado, puede ser útil en ciertas ocasiones. Para ello utilizaremos las siguientes
propiedades:

 padding-top: margen superior

 padding-bottom: margen inferior
 padding-left: margen izquierdo
 padding-right: margen derecho
Ejemplo de padding diferentes CSS
Código HTML

HTML
 1

2
<img class="imagen" src="gatito.jpg" alt="foto de gatito" height="250px" width="400px"
border="1px"/>
3

Código CSS

CSS

1
.imagen {
2
padding-bottom: 70px;
3
padding-right: 100px;
4
}
5

Resultado:
En este caso no importa el orden, ya que son independientes. El ejemplo define
solo el relleno derecho e inferior.

También se pudo haber trabajado poniendo los cuatro valores en una sola
propiedad, estableciendo en cero tanto superior e izquierdo de la imagen.

CSS nos permite llegar a un mismo resultado mediante diversas

maneras, lo ideal es trabajar con la menor cantidad de instrucciones
posibles para optimizar el código.

Alex.
Color de relleno CSS
Poner color al relleno es tan simple como emplear la propiedad background-
color y en su valor colocar el color en ya sea con palabra clave, valor
hexadecimal o RGB. En realidad, background-color establece el color de
fondo, pero sirve par la idea.

Te recomendamos leer: Estilos CSS para textos | Tamaño, tipografía, color, peso,
alineación y más
Conoceremos con mayor detalle sobre los colores y formatos de fondo en
próximas lecciones, aquí solo quería darte una idea por si te lo preguntabas.
¡Sigamos!

La propiedad border
Colocar un borde con CSS a un elemento de HTML puede marca una notable
diferencia, añade personalidad y con una combinación adecuada puede
convertir simples elementos en atractivos bloques de contenido, y en esta
ocasión aprenderás a manejar los bordes.

Para establecer un borde, básicamente necesitamos definir su ancho o tamaño,

color y estilo.

Para poder visualizar los resultados es necesario definir las propiedades

mencionadas y simplemente lo haremos en orden empezando por el ancho,
seguido del estilo y finalmente el color.

La declaración más simple para definir un borde completo en CSS está

formada por la propiedad border y en su valor se define el ancho, estilo y
color, en ese orden, separada por espacios, veamos un ejemplo:
HTML

HTML

1
<p class="borde"> Forma simple de poner borde en CSS </p>
2

CSS

CSS
 1
p.borde {border:7px solid blue;}
2

Resultado:

En el ejemplo, vemos que la instrucción establece un ancho de borde de 5px, un

estilo sólido y un color azul.

De ahora en adelante conoceremos cada propiedad independientemente y los

valores posibles que nos permitirán establecer una enorme cantidad de
posibilidades al momento de trabajar con bordes en CSS. ¡Vamos por ello!

Propiedades y valores para bordes CSS

 Ancho.- Se refiere al ancho de la línea que conforma el borde.
  Color.- para determinar el color de la línea de borde.
 Estilo.- además de un borde de línea sólida, existen otros como los
punteados, doble línea, etc.
Border-width para ancho del borde
La propiedad border-width establece el ancho de borde para un elemento, en
su valor puede ir un valor numérico con su respectiva unidad de medida, ya sea
px, ems, pt, etc.
Ancho de borde uniforme
Para índica un ancho de borde uniforme en todo el borde del elemento
simplemente establecemos la propiedad border-width con su respectivo valor.
Ejemplo para ancho de borde en CSS
Código HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

3
<p class="masborde"> Elemento con texto de 8px de ancho.</p>
4

Código CSS

CSS

1
p.borde {border-width: 3px;}
2
 3

4
p.masborde {border-width: 8px;}
5

Ancho de borde diferentes CSS

También es posible establecer anchos de borde diferentes a cada lado, para ello
hacemos uso de las propiedades específicas para cada lado.

 border-bottom-width (Ancho de borde inferior)

 border-top-width (Ancho de borde superior)
 border-left-width (Ancho de borde izquierdo)
 border-right-width (Ancho de borde derecho)
Ejemplo de código
HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

CSS

CSS

1
p.borde {
2
 border-bottom-width: 4px;
3
border-top-width: 7px;
4
border-left-width: 5px;
5
border-right-width: 8px;
6

7
}
8

Unificando bordes con anchos diferentes en CSS

Podemos definir bordes con anchos diferentes en una única propiedad con
cuatro valores, el primer valor indica el ancho del borde superior, seguido del
derecho, inferior e izquierdo. Veamos un ejemplo de unificación.

Ejemplo de bordes con anchos diferentes en una declaración CSS

HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

CSS

CSS
 1
p.borde {
2
border-width: 7px 8px 4px 5px;
3
}
4

Antes de poner un ejemplo de resultados de los códigos, conozcamos todas las

propiedades y valores de borde de tal manera que podamos ver de forma visual
la forma en que se combinan para producir un resultado.

Para obtener un resultado visual es necesario establecer un estilo de borde, lo

cual veremos más adelante.

Propiedad border-color para color de borde

CSS
La propiedad border-color nos permite establecer el color de borde de un
elemento, están simple como declarar y en su valor colocar el color deseado, ya
sea con palabra clave, con valor hexadecimal o RGB.

Te recomendamos leer: Propiedad display y visivility en CSS

Para que border-color tenga efecto visual primero debemos establecer el estilo
de borde y lo veremos un poco más adelante.
Colores de borde uniforme CSS
Establecer un color de borde uniforme en todos los lados de un elemento es tan
simple como definir la propiedad border-color y en su valor colocar el colocar
deseado.
Ejemplo de border-color CSS uniformes
Código HTML

HTML
 1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

3
<p class="masborde"> Elemento con texto de 8px de ancho.</p>
4

Código CSS

CSS

1
p.borde {border-color: blue;}
2

4
p.masborde {border-color: red;}
5

Colores de borde diferentes con CSS

Podemos especificar un color diferente para cada lado de un elemento HTML,
para ello empleamos las propiedades específicas para cada lado:

 border-top-color (color de borde superior)

 border-right-color (color de borde derecho)
  border-bottom-color (color de borde inferior)
 border-left-color (color de borde izquierdo)
Ejemplo de código para colores diferentes de borde CSS
Código HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

Código CSS

CSS

1
p.borde {
2
border-top-color: red;
3
border-right-color: blue;
4
border-bottom-color: yellow;
5
border-left-color: green;
6
}
7
Unificando colores de borde CSS
Podemos establecer colores diferentes para borde mediante la propiedad
CSS border-color y en su valor indicamos los colores diferentes separados por
espacios. Es muy simple, veamos el ejemplo de código.
Código CSS para colores de borde diferentes unificados
Código HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

Código CSS

CSS

1
p.borde { border-color:red blue yellow green;}
2

La propiedad border-style para estilo de

borde
La propiedad border-style permite establecer el estilo de la línea borde, en su
valor podemos lo podemos indicar cuál será. Existen varios estilos y los
conoceremos a continuación:
Valores de border-style CSS
 hidden.- Oculta el borde.
  none.- evita que se muestre el borde y es el valor por defecto.
 solid.- muestra un borde sólido, línea recta y continua.
 dotted.- el borde se muestra con puntos redondeados.
 dashed.- muestra un borde formado por segmentos de línea, como
si fueran guiones.
 double.- estilo con doble línea.
 groove.- muestra una línea con apariencia tallada.
 ridge.- este muestra un borde de estilo extruido.
 inset.- estilo de borde le da una apariencia de incrustado al
elemento.
 outset.- hace que el elemento parezca en relieve.
Estilo de borde uniforme CSS
Establecer un estilo uniforme en todos los bordes de un elemento es tan sencillo
como establecer la propiedad border-style y colocar en su valor el estilo
deseado.
Ejemplo de borde uniforme
Código HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

3
<p class="masborde"> Elemento con texto de 8px de ancho.</p>
4

Código CSS

CSS
 1
p.borde {border-style: solid;}
2

4
p.masborde {border-style: dotted;}
5

Estilos de borde variado

CSS nos permite establecer un tipo de borde diferente a cada lado del
elemento que maquetamos, para ello haremos uso de las propiedades
especificadas para cada lado y en su valor especificamos el que deseamos.
 border-top-style (superior)
 border-right-style (derecho)
 border-bottom-style (inferior)
 border-left-style (izquierdo)
Ejemplo de estilos de borde diferentes
Código HTML

HTML

1
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
2

3
<p class="masborde"> Elemento con texto de 8px de ancho.</p>
4
 5

Código CSS

CSS

1
p.borde {
2
border-top-style: solid;
3
border-right-style: dotted;
4
border-bottom-style: double;
5
border-left-style: dashed;
6
}
7

9
p.masborde {
10
border-top-style: solid;
11
border-right-style: dotted;
12
border-bottom-style: double;
13
border-left-style: dashed;
 14
}
15

Cómo poner bordes en CSS

Ahora que conocemos la mayoría de las propiedades y valores para poner borde
a los elementos HTML mediante CSS es momento de poner en práctica lo
aprendido.

Recuerda, ahora aplicaremos el ancho, color y estilo de borde, todos juntos

para poder apreciar el resultado de manera visual. ¡Vamos!
Para el primer ejercicio de bordes, crea un párrafo con las siguientes características de
borde:

 Color de borde azul.

 Ancho de borde uniforme de 5px.
 Estilo de borde uniforme punteado.
 Relleno de 13px.
HTML

HTML

1
<p class="borde"> Elemento de texto con borde de 5px de ancho, color azul y estilo
punteado en CSS. </p>
2

CSS

CSS

1
p.borde {
2
border-color: blue;
3
border-width: 5px;
4
border-style: dotted;
5
padding:13px
6
}
7

Resultado:

Te recomendamos leer: Estilos CSS para personalizar tablas | Propiedades y diseños

El segundo ejercicio consiste en crear un párrafo con las siguientes características:

  Relleno de 20px.
 Ancho de borde variado: superior 2px, derecho 4px, inferior 8px,
izquierdo 16px.
 Color de borde variado: superior rojo, inferior amarillo, derecho azul,
izquierdo negro.
 Estilo de borde variado: Superior solidó, inferior punteado, derecho
doble línea e izquierdo con guiones.
Solución:

HTML

HTML

1
<p class="variado"> Este es un párrafo con borde variado en color, estilo y dimensión.</p>
2

CSS

CSS

1
p.variado {
2
padding: 20px;
3
border-width: 2px 4px 8px 16px;
4
border-color: red blue yellow black;
5
border-style: solid double dotted dashed;
 6

7
}
8

Resultado:

La propiedad margin
La propiedad margin en CSS funciona de forma similar a las propiedades de
borde y relleno. Margin es la propiedad que establece un margen para el
contenido; recuerda que el margen es el espacio que se encuentra fuera del
borde, pero asociada al elemento en cuestión, de tal manera que los separa de
otros bloques de contenido.
Los valores para márgenes pueden tomar valores negativos.

Márgenes uniformes en CSS

Para poner márgenes de igual medida en todos los lados de un contenido
simplemente emplearemos la propiedad margin y en su valor podemos utilizar
un valor numérico con su unidad de medida.
Ejemplo de márgenes uniformes
Para poder visualizar el resultado, crearemos un contenedor div con un
identificador class="contenedor", le pondremos fondo color azul y en ella
colocaremos un elemento de párrafo y aplicaremos márgenes uniformes; la
primera tendrá margen -15px, la segunda 0px, la tercera 30px y la cuarta
veremos las diferencia
HTML

HTML

1
<div class="contenedor">
2
<p class="negativo"> Párrafo con -15px márgenes uniformes.</p>
3
</div><br>
4

5
<div class="contenedor" >
6
<p class="cero"> Párrafo con márgenes 0px uniformes.</p>
7
</div><br>
8

9
<div class="contenedor" >
10
<p class="trenta"> Párrafo con márgenes 30px uniformes.</p>
11
</div><br>
12

13
<div class="contenedor" >
14
<p class="senta"> Párrafo con márgenes 60px uniformes.</p>
15
</div>
16

CSS

CSS

1
div.contenedor {
2
background-color: blue;
3
border: 1px solid green;
4
max-width: 500px;
5
}
6

7
p.negativo {
8
background-color: red;
9
margin: -15px;
 10
}
11

12
p.cero {
13
background-color: red;
14
margin: 0px;}
15

16
p.trenta {
17
background-color: red;
18
margin: 30px;}
19

20
p.senta {
21
background-color: red;
22
margin: 60px;}
23

Resultado:
Márgenes diferentes a cada lado CSS
Podemos establecer márgenes con diferentes dimensiones a cada lado de los
elementos HTML, para este objetivo podemos emplear la propiedad margin y en
sus valores colocar cuatro medidas separadas con espacios, la primera
corresponde al margen superior, sigue el margen derecho, luego inferior y
finalmente el izquierdo.
Ejemplo.

HTML

HTML

1
<img class="imagen" src="gatito.png">
2

CSS

CSS
 1
img.imagen {margin: 7px 8px 9px 14px;}
2

Otra manera de hacer es empleando las propiedades específicas que

corresponden a un lado determinado.

 margin-top (margen superior)

 margin-right (margen derecho)
 margin-bottom (margen inferior)
 margin-left (margen izquierdo)
Ejemplo de márgenes específicos diferentes CSS
HTML

HTML

1
<div class="contenedor">
2
<p class="variado"> Párrafo con margen 40px superior, 60px derecha y 0px abajo.</p>
3
</div>
4

CSS

CSS
 1
div.contenedor {
2
background-color: blue;
3
border: 1px solid green;
4
max-width: 500px;
5
}
6

7
p.variado {
8
background-color: red;
9
margin-top: 40px;
10
margin-right:60px;
11
margin-bottom:0px;
12
}
13

Resultado:
Otras maneras de poner margen
CSS nos permite especificar el margen de un elemento de varias maneras y
podemos emplearlos según nuestros objetivos.

Margen vertical y horizontal

El margen vertical indica el valor del margen superior e inferior, mientras que el
margen horizontal influye sobre el margen derecho e izquierdo. Para poner un
margen de este tipo, establecemos la propiedad margin y en su valor colocamos
dos valores, el primero indica el margen vertical y el segundo el margen
horizontal.
Ejemplo:

HTML

HTML

1
<p class="elemento"> Este es un elemento de texto </p>
2

CSS
CSS

1
p.elemento {margin; 20px 30px;}
2

Resultado: el resultado del código será un bloque de texto con 20px de margen
superior e inferior, 30px de margen derecho e izquierdo.

Margen superior, horizontal e inferior

Cuando en el valor de las dimensiones de margen colocamos tres valores, el
primero corresponde al margen superior, el segundo al margen horizontal, esto
incluye al derecho e izquierdo, el tercer valor corresponde al margen de abajo.

Ejemplo:

HTML

HTML

1
<p class="elemento"> Este es un elemento de texto </p>
2

CSS

CSS
 1
p.elemento {margin: 10px 15px 14px;}
2

El resultado será un bloque con 10px de margen superior, 15px de margen

derecho e izquierdo y un margen de 14px inferior.

La propiedad Background
color e imagen de fondo en
CSS
octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
Es momento de aprender a controlar el fondo de los elementos HTML mediante
CSS, el fantástico lenguaje de estilo que venimos aprendiendo. CSS nos permite
poner color al fondo de los bloques de contenido, además de colores, también
podemos colocar imágenes de fondo, la misma que puede ser ajustada
mediante propiedades y atributos.

Ir a contenido:

 La propiedad Background color

o Los valores para colores de fondo
o Ejemplo de color de fondo en CSS código
 La propiedad background-image
o Ejemplo de imagen de fondo CSS
o Varias imágenes de fondo en CSS
 La propiedad background-repeat
o Valores de la propiedad background-repeat
 Establecer el valor a inherit (heredar)
o Ejemplo de imagen de fondo heredado
 La propiedad Background-attachment
o Valores para background-attachment
o Ejemplo de imagen de fondo fijo con CSS

La propiedad Background color

La propiedad background-color no permite establecer el color de fondo
para un elemento HTML, simplemente declaramos y en su valor colocamos el
color deseado.
Los valores para colores de fondo
En caso del color de fondo, el valor es un color que puede presentarse en los
formatos que venimos conociendo desde anteriores lecciones.

 Palabra clave.- el nombre del color en ingles.

 Hexadecimal.- el color representado por un # seguido de 6
caracteres alfanuméricos que representan un color específico.
 RGB.- también es válido el valor en RGB (rojo, verde, azul)
Ejemplo de color de fondo en CSS código
Para el ejemplo emplearemos además propiedades que ya aprendimos en
lecciones anteriores para darle más estética al ejemplo.

HTML

HTML

1
<div class="contenedor">
2
<p class="morado"> Este es un párrafo con color de fondo morado (palabra clave)</p>
3

4
<p class="verde"> Este es un párrafo con color de fondo verde (hexadecimal)</p>
5

6
<p class="naranja"> Este es un párrafo con color de fondo naranja (RGB)</p>
7
</div>
8

CSS

CSS
 1
div.contenedor {background-color:#abbcff; padding:40px;}
2

3
p {padding: 20px;}
4

5
p.morado {background-color: purple;}
6

7
p.verde {background-color: #009846}
8

9
p.naranja {background-color: rgb(239, 127, 26); }

Resultado:

Te recomendamos leer: Posicionamiento en CSS | Cómo posicionar elementos,

tipos y ejemplos
Si deseas colocar un color de fondo a toda la página web ¿Cómo lo harías?
Pues sencillo, simplemente apuntas a la etiqueta <body> y estableces la
propiedad background-color con el valor del color que quieras, así: body
{background-color: yellow;}

Poner un color de fondo a los

elementos HTML con CSS es muy fácil,
hará que nuestra página web adquiera
vida y eterna alegría…
Alex.

La propiedad background-image
La propiedad background-image nos permite establecer una imagen de fondo a
un elemento, es tan simple como declarar la propiedad y en su valor establecer
cuál será la imagen que aparezca.
El valor de la propiedad background-color tiene algo en especial, se trata de
indicar la imagen de la siguiente manera: url("archivo o URL"); Si la imagen
está en la misma carpeta del documento HTML, entonces se coloca el nombre
del archivo con su respectiva extensión, en caso el archivo este en otra
dirección, entonces indicamos dicha dirección en lugar de colocar solo el
nombre.
Ejemplo de imagen de fondo CSS
Crearemos un contenedor con ancho máximo de 500px y altura mínima de
350px, dentro de ella irá un párrafo con fondo amarillo claro; por otro lado
tenemos una imagen de 200x122px, el cual será puesto como fundo del
contenedor mediante CSS. Veamos.

Código HTML

HTML

1
<div class="fondoimg"> <p>Párrafo dentro de un bloque con fondo de imagen.</p>
</div>
2

Código CSS

CSS

1
div.fondoimg {
2
max-width: 500px;
3
min-height: 350px;
4
background-image: url("fondo.jpg");}
5

7
p {background-color: #fff345;}
8
 9

10

Resultado:

Note que la imagen empieza a reproducirse tanto horizontal y verticalmente

desde la esquina superior izquierda del bloque, hasta cubrir todo el bloque
con class="fondoimg", este hecho ocurre por defecto.

Te recomendamos leer: Estilos CSS para textos | Tamaño, tipografía, color,

peso, alineación y más

Poner imagen de fondo a toda la página web, es tan sencillo como apuntar a la
etiqueta body de la página.

La propiedad imagen de fondo puede ser heredada a los elementos hijo, para
ello simplemente establecemos el valor de background-image del hijo
en inherit.
Varias imágenes de fondo en CSS
Es posible establecer más de una imagen como fondo, el primero prevalecerá, si
en caso no existe entonces el segundo y así sucesivamente; para especificar
más de una imagen, simplemente separa con comas las url, en el valor, por
ejemplo: url("gatito.png"),
url("https://unnsitioimg.net/imagenes/gatito.png");

La propiedad background-repeat
La propiedad background-repeat nos permite determinar la dirección en que se
repite la imagen de fondo o si deseas que no se repita, para ello haremos uso de
los siguientes valores:
Valores de la propiedad background-repeat
 repeat-x.- solo repite en dirección x u horizontalmente.
 repeat-y.- solo repite en dirección y o verticalmente.
 no-repeat.- no se repite en ninguna dirección.

Establecer el valor a inherit (heredar)

La propiedad background-repeat puede ser heredada a los elementos hijo
siempre y cuando se establece el valor heredar en dichos elementos hijo.
Por ejemplo si establecemos que la imagen de fondo se repite en dirección
horizontal para el cuerpo de la página web (body) y por otro lado contamos con
un bloque de contenido con class="hijo" dentro del cuerpo e indicamos el
bloque hijo hereda el estilo de repetir fondo mediante el valor inherit, entonces
dicho bloque también tendrá la imagen de fondo repitiendo en la misma
dirección que el padre (body)
Ejemplo de imagen de fondo heredado
HTML

HTML

1
<body>
2
<div class="hijo"> BOLQUE HIJO </div>
3
</body>
4

CSS

CSS
 1
body {
2
background-image: url("fondo.jpg");
3
background-repeat: repeat-x;
4
}
5

6
div.hijo {
7
background-image: url("corazon.png");
8
background-repeat: inherit;
9
border: 2px solid yellow;
10
width:400px;
11
height: 180px;
12
}
13

Resultado:

Te recomendamos leer: Las propiedades: border, padding y margin en CSS

Podemos observar que el elemento con class="hijo" obedece al estilo del
elemento padre, repite la imagen de fondo solo en dirección horizontal.
La propiedad Background-attachment
La propiedad background-attachment nos permite definir si la imagen de fondo
se queda fija o se mueve en la pantalla cuando el usuario se desplace sobre ella
o haga scroll; para ello haremos uso de los valores que corresponden.
Valores para background-attachment
 scroll.- hace que la imagen de fondo se mueva en la pantalla junto
con el elemento que lo contiene.
 fixed.- la imagen de fondo queda fija mientras el bloque se mueve
con el resto del contenido.
El valor de background-attachment también puede ser heredado de un
elemento padre a un elemento hijo, para ello se emplea inherit como valor
para elemento hijo.
Ejemplo de imagen de fondo fijo con CSS
Código HTML

HTML

1
<div class="movil"> <p>Párrafo dentro de un bloque con imagen de fondo movil.</div>
 2

4
<div class="fijo">Párrafo dentro de un bloque con imagende fondo fijo.</div>
5

Código CSS

CSS

1
div.movil {
2
background-image: url("fondo.jpg");
3
background-repeat: no-repeat;
4
background-attachment: scroll;
5
}
6

7
div.fijo {
8
background-image: url("fondo.jpg");
9
background-repeat: no-repeat;
10
background-attachment: fixed;
11
}
12

El código que tenemos hará que el primer bloque tenga una imagen de fondo
que se mueve junto con el bloque que lo contiene y el segundo caso hará que se
quede fija hasta que el bloque que lo contiene haya terminado de pasar cuando
el usuario se desplace por la pantalla.
Para comprobar el resultado te dejo una pequeña tarea y es el siguiente:
establece dimensiones adecuadas a los bloques, crea párrafos y los elementos
que desees en cada bloque, de tal manera que sea necesario un
desplazamiento en la pantalla, establece imágenes de fondo y prueba que uno
se mueve y la otra queda fija.

Estilo para listas en CSS

octubre 30, 2019 por Desarrolladoresweb.org

Anterior
Avanzar

Ahora nos toca aprender a colocar estilos a las listas con CSS, en especial nos
enfocaremos en el estilo de la viñeta o marcador de los elementos de la lista. En
Listas de HTML ya habíamos aplicado de forma básica los estilos para listas,
pues ahora adentrémonos en la forma de trabajar pero con CSS. Esta lección es
muy hermosa ¡Ya verás!

Ir a contenido:

 Dando estilo a las listas

 La propiedad list-style-type
o Valores para la propiedad list-style-type.
o Ejemplo de estilos para lista con CSS
 Para listas sin ordenar:
 Para listas ordenadas:
 Propiedad list-style-image
o Ejemplo de list-style-image
 La propiedad list-style-position
o Ejemplo de list-style-position
 La propiedad list-style
o List-style ejemplo CSS

Dando estilo a las listas

Como ya venimos aprendiendo, CSS trabaja con propiedades y valores y para
nosotros es momento de conocer los que corresponden para maquetar listas de
HTML.

Recordemos que en HTML existen dos tipos de listas: Las listas sin ordenar y
las listas ordenadas, si te has olvidado, entonces ve a revisar.
La propiedad list-style-type
La propiedad list-style-type nos permite establecer el tipo de estilo que
queremos para los marcadores de la lista, existen varios valores que puede
tomar y los conoceremos a continuación.
Valores para la propiedad list-style-type.
 disc.- indica un marcador en forma de disco.
 circle.- marcador con forma de círculo.
 square.- tipo de estilo cuadrado.
 decimal.- Este valor enumera la lista empezando por 1.
 decimal-leading-zero.- Empieza la numeración con un 01.
 lower-roman.- lista con números romanos en minúscula (i, ii, iii, iv,
v, etc.).
 upper-roman.- números romanos en mayúscula (I, II, III, IV…).
 lower-greek.- letras griegas en minúscula alfa/α, beta/β, gamma/γ,
…
 lower-latin.- indica letras ASCII en minúscula (a, b, c, … z).
 upper-latin.- letras ASCII en mayúscula (A, B, C, … Z).
 armenian.- aplica numeración armenia tradicional (ayb/ayp,
ben/pen, gim/keem, …).
 georgian.- numeración georgiana tradicional (an, ban, gan, …, he,
tan, in, in-an, …).
 none.- no aplica ningún estilo.

Te recomendamos leer: Modelo de cajas CSS | cómo es y para qué sirve

Aquellos estilos que de alguna manera ordenan a los elementos de lista son
empleados para listas ordenadas, ejemplos de estos
son: decimal, lower, upper, etc. y aquellos estilos que simplemente son para
poner estilo sin necesidad de ordenar son para listas sin ordenar, ejemplos de
ellos son: disc, circle, square.
Ejemplo de estilos para lista con CSS
Para listas sin ordenar:
HTML

HTML
 1
<ul class="circulo">
2

3
<li>Gato </li>
4
<li>Ratón </li>
5
<li>Conejo </li>
6

7
</ul>
8

9
<ul class="cuadrado">
10

11
<li>Pepel </li>
12
<li>Roca </li>
13
<li>Tijera </li>
14

15
</ul>
16
CSS

CSS

1
ul.circulo {list-style-type: circle;}
2

3
ul.cuadrado {list-style-type: square;}
4

Resultado:
Para listas ordenadas:
HTML

HTML

1
<ol class="latin">
2

3
<li>Observe </li>
4
<li>Analice</li>
5
<li>Resuelva</li>
6
 7
</ol>
8

9
<ol class="roman">
10

11
<li>Desayuno </li>
12
<li>Almuerzo </li>
13
<li>Cena</li>
14

15
</ol>
16

17

CSS

CSS

1
ol.latin {list-style-type: lower-latin;}
2

3
ol.roman {list-style-type: upper-roman;}
 4

Resultado:

Propiedad list-style-image
La propiedad list-style-image de CSS nos permite establecer una imagen
como viñeta para los elementos de una lista.
Ejemplo de list-style-image
HTML

HTML

1
<ul class="conimagen">
 2

3
<li>HTML </li>
4
<li>CSS</li>
5
<li>Javascript</li>
6

7
</ul>
8

CSS

CSS

1
ul.conimagen {list-style-image:url("sonrisa.jpg");
2

3
list-style-position:inside;}
4

Resultado:
La propiedad list-style-position
La propiedad list-style-position nos permite establecer la posición de la
caja de viñetas y puede tomar los valores:
 inside.- indica que la lista está adentro del flujo de contenido.
 outside: este es el valor por defecto e indica que la lista está fuera
del flujo de contenido.
Ejemplo de list-style-position
HTML

HTML

1
<p>Párrafo con flujo normal</p>
2
<ul class="dentro">
3
 <li>Negro</li>
4
<li>Azul</li>
5
<li>Verde</li>
6
</ul>
7
<p>Párrafo con flujo normal</p>
8
<ul class="fuera">
9
<li>Negro</li>
10
<li>Azul</li>
11
<li>Verde</li>
12
</ul>
13

14

CSS

CSS

1
ul.dentro {list-style-position:inside;}
2

3
ul.fuera {list-style-position:outside;}
 4

Resultado:

Como podemos apreciar, existe una ligera diferencia entre las listas del ejemplo,
el primero se encuentra ligeramente hacia la derecha.

La propiedad list-style
La propiedad list-style nos permite establecer con una sola propiedad los
valores para el tipo, posición e imagen de lista, de tal manera que no sea
necesario escribir las tres propiedades por separado.

Te recomendamos leer: Estilos para enlaces CSS

List-style se puede emplear para determinar cualquiera de las propiedades

compatibles, si no se coloca un valor correspondiente a una de las propiedades,
entonces se tomará el valor por defecto.
List-style ejemplo CSS
HTML

HTML

1
<p> Propiedades CSS separados </p>
2
<ul class="separado">
3
<li>Lápiz</li>
4
<li>Plumón</li>
5
<li>Goma</li>
6
<li>Cartulina</li>
7
</ul>
8
<hr>
9
<p> Propiedades CSS juntas </p>
10
<ul class="junto">
11
<li>Lápiz</li>
12
<li>Plumón</li>
13
<li>Goma</li>
14
<li>Cartulina</li>
 15
</ul>
16

CSS

CSS

1
ul.separado {
2
list-style-type: none;
3
list-style-position: inside;
4
list-style-image:url("corazon.png");}
5

6
ul.junto {
7
list-style: none inside url("corazon.png");}
8

Resultado:
Podemos notar que se obtiene el mismo resultado, tanto con propiedades
independientes y como la propiedad list-style.

Estilos CSS para

personalizar tablas |
Propiedades y diseños
octubre 30, 2019 por Desarrolladoresweb.org

Anterior
Avanzar
En esta lección aprenderás a poner estilos a tablas HTML con CSS, conocerás las propiedades
y sus valores para controlar la apariencia de las tablas hechas con HTML; crearemos varios
ejemplos aplicativos, para que de esta manera puedas entender perfectamente.
Ir a contenido:
  Diseño de tablas en HTML y CSS
 Propiedades CSS para personalizar tablas HTML
o La propiedad border-collapse
 Valores para border-collapse
 Ejemplo de border-collapse en tablas CSS
o Propiedad border-spacing
 Ejemplos de border-spacing CSS
o Propiedad caption-side
 Valores para caption-side
 Ejemplo de posicionamiento de leyenda en tabla con CSS
o Propiedad empty-cells
 Los valores para empty-cells son:
 Por ejemplo:
o La propiedad table-layout
 Valores de table-layout
 Table-layout ejemplos de código CSS
 Colores de fondo para tablas, filas, columnas y celdas con CSS
Diseño de tablas en HTML y CSS
Recordemos que las tablas están compuestas por filas y columnas, en HTML aprendimos cómo
hacer tablas y además cómo dotarle de cierta apariencia mediante atributos de HTML, sin
embargo CSS nos permite mayor control sobre cada aspecto de las tablas, además podemos
emplearla para apuntar a todas las tablas y definir un estilo para todos mediante un simple código
CSS.
Para empezar a utilizar estilos de tablas HTML, necesariamente debimos estudiar la estructura
de tablas HTML, sin embargo repasamos rápidamente; la etiqueta para tablas
es <table> dentro de ella van las filas mediante la etiqueta <tr>, finalmente dentro de las filas
van las columnas mediante <td>, sabiendo esto, ya podemos ir dando estilos.
A continuación conozcamos las respectivas propiedades y cómo estos pueden controlar a las
tablas.

Propiedades CSS para personalizar

tablas HTML
Existen varias propiedades CSS aplicables a tablas, por ejemplo los márgenes, bordes, rellenos,
colores de letra, colores de fondo, etc. son aplicables a tablas y a estas alturas ya las hemos
conocido. Ahora nos toca conocer aquellas que sirve para maquetar tablas en especial.

La propiedad border-collapse
Recordemos que al definir un borde para tabla en HTML, estos bordes se muestran separados,
cada elemento de tablas posee su propio borde.

La propiedad border-collapse nos permite colapsar esos bordes separados en un solo borde
o mantenerlos separados, veamos los posibles valores:
Te recomendamos leer: Poner Ancho y alto en CSS a los elementos

Valores para border-collapse

inherit.- establece que se debe heredar el estilo del elemento padre que contiene a

la tabla.
 separate.- indica que los bordes deben ser separados.
 collapse.- hace que los bordes sean colapsados en uno solo.
Ejemplo de border-collapse en tablas CSS
HTML

HTML

1
<table class="separado" border="1">
2

3
<tr>
4
<td>HTML</td>
5
<td>CSS</td>
6
<td> JAVASCRIPT</td>
7
</tr>
8

9
<tr>
10
<td>Estructura</td>
11
<td>Apariencia</td>
12
<td>Interactivo</td>
13
</tr>
14

15
</table>
16
<br><br>
17

18
<table class="colapsado" border="1">
19

20
<tr>
21
<td>HTML</td>
22
<td>CSS</td>
23
<td> JAVASCRIPT</td>
24

25
</tr>
26

27
<tr>
28
<td>Estructura</td>
29
<td>Apariencia</td>
30
<td>Interactivo</td>
31
 32
</tr>
33

34
</table>
CSS

CSS

1
table.separado {border-collapse: separate;}
2

4
table.colapsado {border-collapse: collapse;}
5

Resultado:
¿Notas la diferencia? Pues si, el primero tiene bordes separados mientras la segunda un solo
borde. Pues de ahora en adelante vamos a colapsar los bordes de tablas, ya que así se ve mejor,
siempre y cuando no sea necesario emplear celdas separadas, ya veremos que en ciertos casos es
necesario.

Propiedad border-spacing
La propiedad border-spacing nos permite establecer el espacio entre celdas adyacentes de
una tabla y solo funciona cuando los bordes de celdas están separadas (border-
collapse="separate;"), es similar a la propiedad de relleno que conocimos en lecciones
anteriores, pero en este caso se trata de elementos de tabla.
La propiedad border-spacing puede tomar cualquier valor numérico, con su respectiva
unidad de medida.
Podemos definir espacios uniformes en todos los lados al expresar un solo valor numérico o
también podemos expresar dos valores numéricos, en ese caso el primero establece el espaciado
horizontal y el segundo el espaciado vertical.

Ten presente que el espaciado horizontal es aquella que separa a las celdas de una fila y el
espaciado vertical aquella que separa las celdas de una columna. Veamos algunos ejemplos.

Ejemplos de border-spacing CSS

Código HTML

HTML
 1
<p>Tabla con celdas sin espacio.</p>
2
<table class="sinespacio" border="1">
3
<tr>
4
<td>Marca</td>
5
<td>Color</td>
6
<td>Precio</td>
7
</tr>
8
<tr>
9
<td>Agua</td>
10
<td>Verde</td>
11
<td>140.00</td>
12
</tr>
13
</table>
14

15
<p>Tabla con celdas de espacio uniforme.</p>
16
<table class="conespacio" border="1">
17
<tr>
 18
<td>Marca</td>
19
<td>Color</td>
20
<td>Precio</td>
21
</tr>
22
<tr>
23
<td>Agua</td>
24
<td>Verde</td>
25
<td>140.00</td>
26
</tr>
27
</table>
28

29
<p>Tablas con espacio horizontal y vertical diferente.</p>
30
<table class="diferent" border="1">
31
<tr>
32
<td>Marca</td>
33
<td>Color</td>
34
<td>Precio</td>
35
</tr>
36
<tr>
37
<td>Agua</td>
38
<td>Verde</td>
39
<td>140.00</td>
40
</tr>
41
</table>
42

Código CSS

CSS

1
table.sinespacio {
2
border-collapse: separate;}
3

10
 11

12

13

14

15

16
table.conespacio {
17
border-collapse: separate;
18
border-spacing: 30px;}
19

20

21

22

23

24

25

26

27

28

29

30
table.diferent {
31
border-collapse: separate;
32
border-spacing: 70px 15px;}
33

34

35

Resultado:

Propiedad caption-side
La propiedad caption-side está pensada para posicionar la leyenda de las tablas con CSS,
como bien sabemos la leyenda de una tabla describe su contenido y gracias a caption-
side podemos indicar que la leyenda se muestre en la parte superior o inferior.
Valores para caption-side
 top.- Coloca la leyenda en la parte superior.
  bottom.- Indica que la leyenda va en la parte inferior.

Te recomendamos leer: Qué es CSS e Introducción a CSS

Ejemplo de posicionamiento de leyenda en tabla con CSS

Código HTML

HTML

1
<table border="1">
2
<caption> Colores en forma Hexadecimal. </caption>
3

4
<tr>
5
<td>Color</td>
6
<td>Verde</td>
7
<td>Azul</td>
8
<td>Rojo</td>
9
<td>Blanco</td>
10
</tr>
11

12
<tr>
13
 <td>Hexadecimal</td>
14
<td>#009846</td>
15
<td>#0000ff</td>
16
<td>#ff0000</td>
17
<td>#ffffff</td>
18
</tr>
19
</table>
Código CSS

CSS

1
table {
2
border-collapse: collapse;
3
border-spacing:40px;}
4

6
caption {caption-side:bottom;}
7

9
 10

11

Resultado:

Propiedad empty-cells
La propiedad empty-cells nos permite establecer si se muestran o no los bordes de celdas que
no poseen contenido dentro de ella, y los podemos notar cuando los bordes de celda se
encuentran separados (border-collapse: separate;).
Los valores para empty-cells son:
 Show.- indica que los bordes de celdas sin contenido se muestren.
 Hide.- indica que los bordes de celdas vacías no se muestren.
Por ejemplo:
Código HTML

HTML

1
<table class="hide" border="1">
 2
<tr>
3
<td>Color</td>
4
<td></td>
5
<td>Azul</td>
6
</tr>
7
<tr>
8
<td></td>
9
<td>#009846</td>
10
<td></td>
11
</tr>
12
</table><br>
13

14
<table class="show" border="1">
15
<tr>
16
<td>Color</td>
17
<td></td>
18
<td>Azul</td>
19
</tr>
20
<tr>
21
 <td></td>
22
<td>#009846</td>
23
<td></td>
24
</tr>
25
</table>
26

Código CSS

CSS

1
table.hide {border-collapse:separate;
2
empty-cells: hide;
3

4
}
5

6
table.show {border-collapse:separate;
7
empty-cells: show;
8

9
}
La propiedad table-layout
La propiedad table-layout sirve para determinar el ancho de las columnas de una tabla, nos
referimos a la dimensión horizontal de celdas; es posible determinar si el ancho será fijo o
automático de acuerdo al contenido. Conozcamos sus valores.
Valores de table-layout
 Auto.- este es el valor por defecto, indica que el ancho se ajusta al contenido
automáticamente, es decir será proporcional a la cantidad de contenido que poseen las
celdas.
 Fixed.- indica que el ancho de columna es fijo y no se ajusta al contenido que
contienen las celdas, por ello es posible que el contenido se salga de una celda,
visualmente invadiendo a otras.
A continuación apreciemos un hermoso ejemplo.

Table-layout ejemplos de código CSS

Código HTML

HTML
 1
<table class="auto" border="1">
2
<tr>
3
<td>Color</td>
4
<td>Verde</td>
5
</tr>
6
<tr>
7
<td>Hexadecimal</td>
8
<td>#009846</td>
9
</tr>
10
</table><br>
11

12
<table class="fixed" border="1">
13
<tr>
14
<td>Color</td>
15
<td>Verde</td>
16
</tr>
17
<tr>
18
<td>Hexadecimal</td>
19
<td>#009846</td>
20
</tr>
21
</table><br>
22
<table class="mas" border="1">
23
<tr>
24
<td>Color</td>
25
<td>Verde</td>
26
</tr>
27
<tr>
28
<td>Hexadecimal</td>
29
<td>#009846</td>
30
</tr>
31
</table>
Código CSS

CSS

1
table.auto {
2
table-layout: auto;
3
width: 10px;
4
}
 5

9
table.fixed {
10
table-layout: fixed;
11
width: 100px
12
}
13

14

15

16

17
table.mas {
18
table-layout: fixed;
19
width: 300px}
20

Resultado:
Observa los resultados, en el primer caso indicamos ancho automático, por lo cual no hace caso al ancho
de 10px establecido, en el segundo caso se establece un ancho fijo de 100px, lo cual es estrictamente
obedecido, de tal manera que la palabra Hexadecimal de la tabla supera 100px y visualmente invade la
siguiente fila, lo mismo ocurre con el contenido de la celda inferior derecha, su contenido sobresale de
la tabla.

Te recomendamos leer: Modelo de cajas CSS | cómo es y para qué sirve

En el tercer caso establecemos un ancho fijo de 300px, y también es obedecido de tal manera que
la tabla resultante es bastante ancho.

Colores de fondo para tablas, filas,

columnas y celdas con CSS
Para poner color de fondo a tablas con CSS, podemos utilizar identificadores y selectores
adecuados y a ello le designamos las propiedades background-color para color de
fondo, color para color de letra. En fin, cualquier otro que sea compatibles con el contenido de
las tablas, incluso podremos utilizar otras propiedades que aprenderemos más adelante. Vamos
paso a paso, pruébalos.
Veamos un ejemplo de código CSS para tablas HTML, esto para que no te quedes con la
curiosidad o las dudas, se trata de una tabla hermosamente maquetada con colores y espacios,
bordes y más, si ves alguna propiedad aún no desarrollada en el curso, no te preocupes, lo
aprenderás más adelante, simplemente quiero que veas lo que se puede lograr.

Observa, el código CSS está incrustado en el mismo documento HTML, mediante la

etiqueta <style>.
HTML

1
<!DOCTYPE HTML>
2
<html>
3
<head><title> Curso CSS</title>
4
<style>
5
table#mitabla {border-collapse: collapse;}
6
td.bajo {background-color: #ff455e;}
7
td.medio {background-color: #d63e3e;}
8
td.alto {background-color: #940014;}
9

10
td.a {background-color: #243ff0;}
11
td.b {background-color: #1726cf;}
12
td.c {background-color: #100085;}
13

14
td.aaa {background-color: #f8ff94;}
15
td.bbb {background-color: #fff64f;}
16
td.ccc {background-color: #ffff00;}
17

18
thead.cabecera tr td {
19
font-family: monospace;
20
font-size: 30px;
21
font-weight: bold;
22
color: #ffffff;
23
padding: 15px;}
24

25
tfoot.pie tr td {
26
font-size: 18px;
27
font-weight: bold;
28
font-family: Georgia;
29
padding: 2px;}
30

31
tbody.cuerpo tr td {
32
color: #ebebeb;
33
padding: 10px;}
 34

35
td {border-style: solid;
36
border-color: #cccccc;
37
border-width: 1px;}
38

39
</style>
40

41
</head>
42
<body>
43
<table id="mitabla">
44

45
<thead class="cabecera">
46
<tr class="rojo">
47
<td class="bajo"> elemento a </td>
48
<td class="medio"> elemento b </td>
49
<td class="alto"> elemento c </td>
50
</tr>
51
</thead>
52

53
<tbody class="cuerpo">
54
<tr>
55
<td class="a"> lemento A </td>
56
<td class="b"> lemento B </td>
57
<td class="c"> lemento C </td>
58
</tr>
59

60
<tr>
61
<td class="a"> emento AA </td>
62
<td class="b"> emento BB </td>
63
<td class="c"> emento CC </td>
64
</tr>
65

66
</tbody>
67
<tfoot class="pie">
68
<tr>
69
<td class="aaa"> emento AAA </td>
70
<td class="bbb"> emento BBB </td>
71
<td class="ccc"> emento CCC </td>
72
</tr>
 73
</tfoot>
74

75
</table>
76
</body>
77
</html>
Resultado:

Estilos para enlaces CSS

octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
Los enlaces se pueden convertir en hermosos elementos gracias a las
propiedades CSS, y en esta lección aprenderemos a controlar y personalizar la
apariencia de enlaces, además será la perfecta ocasión para conocer los tipos
de enlaces existen y cómo trabajarlos.

Ir a contenido:
  Dando estilo a enlaces con CSS
 Pseudo selectores para maquetar enlaces con CSS
 Ejemplo de estilos para enlaces con CSS
 Código CSS para apuntar enlaces
 Eliminar el subrayado por defecto de los enlaces
o Ejemplo de código para evitar subrayado de enlaces CSS

Dando estilo a enlaces con CSS

Podemos dar estilo a un enlace empleando las propiedades y valores que
hemos conocido en clases anteriores. Recordemos que los enlaces de HTML
por defecto se marcan en otro color y quedan subrayados; mediante CSS
podemos modificar y controlar muchos aspectos como: color de texto, de fondo,
tamaño y familia tipográfica, rellenos, bordes, márgenes, etc. es tan simple como
apuntar dicho enlace y establecer las propiedades y sus valores.
Estamos aquí para aprender más allá de lo que mencionamos hasta ahora, en
especial conoceremos los pseudo selectores pensados en especial para trabajar
enlaces; veamos.

Pseudo selectores para maquetar

enlaces con CSS
 a: link.- este pseudo selector sirve para apuntar a enlaces
normales de la página web (no accedidos).
 a:visited.- mediante este pseudo selector apuntaremos a los
enlaces visitados o accedidos por el usuario.
 a:hover.- nos permite establecer el estilo para enlaces cuando el
cursor del ratón se encuentra sobre dichos enlaces.
 a:active.- se refiere a aquellos enlaces en las que se han hecho
clic y están activos.
Para que estos pseudo selectores no entren en conflicto al momento de ser
procesados, debemos tener presente que a:hover puede ir después de a:link
y a:visited. Por otro lado, a:active será establecida después de a:hover
Mediante los pseudo selectores que acabamos de conocer, indicaremos las
propiedades y valores que queremos que se cumplan para cada tipo de enlace.
Veamos un ejemplo.

Te recomendamos leer: Qué es CSS e Introducción a CSS

Ejemplo de estilos para enlaces con
CSS
En este ejemplo haremos que el estilo de los enlaces identificados
con class="sobre" cambien cuando el cursor del ratón pase sobre ellos.
Código HTML

HTML

1
<p><a class="sobre" href="URL">Este es un enlace</a></p>
2

Código CSS

CSS

1
a:hover.sobre{
2
color:#fff;
3
background-color: blue;
4
padding: 10px;
5
margin: 50px;
6
border: 3px solid green;
7
font-family:impact;
8
}

Resultado:

Enlace sin cursor encima

Enlace con cursor encima

Ya con los resultados obtenidos te voy a explicar como así aunque quizá ya lo
hayas entendido, venga.

El código CSS indica que si el cursor del ratón pasa por encima del enlace
con class="sobre", entonces se cumplirá las propiedades establecidas
para a:hover.sobre y en este caso son:
 Color de letra: #fff (blanco)
 Color de fondo: azul
 Relleno: 1px

Margen de 50px

Borde de ancho 3px, estilo sólido y color verde.

Familia tipográfica: impact

Realmente se cumple, prueba tú mismo en tu propio proyecto.

Código CSS para apuntar enlaces

Quiero asegurar que todos han entendido; los pseudo selectores prácticamente
sirven para apuntar un tipo de enlace, ya sea uno normal, un visitado, activo o
con cursor sobre él. Más no funcionan como propiedades ni valores, sino como
SELECTORES.

Ejemplo de a:visited

CSS

1
a:visited {color: green;}
2

Indica que todos los enlaces visitados sean de color verde (color de letra).

Ejemplo de a: active

CSS

1
a:active {color: red}
2

Indica que todos los enlaces activos sean de color rojo (color de borde).

Eliminar el subrayado por defecto

de los enlaces
Eliminar el subrayado por defecto con el que aparecen los enlaces dentro de los
navegadores web es tan simple como establecer la propiedad text-
decoration que ya aprendimos en su respectiva lección. Una vez establecido,
definimos el valor none el mismo que indica que no se aplique ninguna
decoración.

Te recomendamos leer: Estilo para listas en CSS

Ejemplo de código para evitar subrayado de enlaces

CSS
Código HTML

HTML

1
<p><a class="sin" href="URL">Este es un enlace</a></p>
2

3
<p><a class="otro" href="URL">Este es un enlace</a></p>
4

Código CSS

CSS

1
a.sin {text-decoration: none;}
2

3
a.otro {
4
background-color:green;
5
color:#fff;
6
padding: 8px;
 7
text-decoration:none;
8
}

Resultado:

Además de eliminar el subrayado por defecto se puede aplicar cualquier

propiedad compatible con textos para el texto ancla de los enlaces. Vamos, te
animo a probar con todo lo que imagines hay muchas posibilidades.

Personalizando el cursor
del ratón con CSS
octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
¿Quieres personalizar el cursor del ratón cuando pase sobre un elemento con
CSS? Entonces estás en el lugar y momento perfecto para conseguirlo, en esta
lección aprenderás a controlar la apariencia del cursor de acuerdo al contexto en
el que se presente.

Podemos cambiar la típica flechita en un icono interesante, que además le sirva

al usuario como una guía o señalización; observa alguno de las formas que
solemos encontrarnos cuando navegamos por Internet, las mismas que
aprenderemos a implementar.
Ir a contenido:

 Personalizando el cursor del ratón

 La propiedad cursor y sus valores
o Principales valores para la propiedad cursor
o Ejemplo de código para cursor en CSS
 Valores para personalizar el puntero del ratón con CSS
o Valores generales
o Valores para enlaces y estado
o Valores de cursor para selección
o Valores para elementos de arrastrar y soltar con puntero
o Valores para cambiar dimensiones y desplazamientos
o Más ejemplos de CSS para personalizar el cursor
 Recomendación final

Personalizando el cursor del ratón

Personalizar el puntero del mouse con CSS es tan simple como identificar el
elemento o zona sobre la cual queremos que un tipo de puntero específico se
aplique y establecer mediante CSS cuál será dicha forma o tipo de cursor.

La propiedad cursor y sus valores

La propiedad cursor nos permite establecer la forma de cursor que queremos
sobre nuestro elemento y puede tomar una rica variedad de valores que definen
una forma en específico. Conozcamos cuáles son:

Principales valores para la propiedad cursor

Existe basta cantidad de posibles valores y a continuación mencionamos
algunos de ellos para realizar los ejercicios prácticos, y más adelante
nombraremos los demás ordenados en categorías. ¡Vamos!

 defaul.- es el puntero por defecto, con forma de flecha.

 help.- cursor de ayuda, con forma de flecha acompañado de un
signo de interrogación.
 crosshair.- puntero en forma de cruz.
 move.- cursor en forma de cruz pero con flechas en cada extremo.
 pointer.- en forma de manito con el índice señalando.

Te recomendamos leer: Estilo para listas en CSS

Ejemplo de código para cursor en CSS

Código HTML

HTML

1
<p class="pointer"> Cuando el puntero pase sobre este párrafo, tomará la forma de una
una manito con el indice señalando hacia arriba. Es el resultado del valor POINTER para la
propiedad cursor</p>
2

3
<div class="arrastre"> Este es un contenedor con fondo azul oscuro y cuando el puntero del
ratón pase por encima, tomará la forma de una cruz con flechas; es el puntero resultado del
valor MOVE para la propiedad cursor.<div>
4

Código CSS

CSS
 1
p.pointer {
2
cursor:pointer;
3
background-color: #9e0b0b; }
4

6
div.arrastre {
7
cursor: move;
8
width: 200px;
9
height: 200px;
10
background-color: #160654;}
11

12

Resultado;
Pera el ejemplo hemos establecido colores de fondo para apreciar mejor
visualmente, mientras el ratón se mueva dentro de campo rojo, el puntero
tomará forma de una mano con el índice señalando.

Mientras el cursor se mueva dentro del bloque azul, tomara la forma de una cruz
con flechas, generalmente se emplea para elementos que admiten arrastrar y
soltar.

Valores para personalizar el puntero

del ratón con CSS
Existe una variedad de categorías de contenido a las cuales se puede aplicar
una cierta forma de puntero.

Si estás en un ordenador entonces:

Para ver la forma del cursor que

resulta de cada valor y darte una
idea, pasa tu puntero por cada
valor que nombraremos a
continuación y así deleitarás tus
ojos con la diferencia.
Alex
Valores generales
 auto.- el navegador determina automáticamente que tipo de cursor
mostrar de acuerdo al tipo de elemento que se presente.
 default.- puntero por defecto, generalmente suele ser una flecha.
 none.- el cursor desaparece.
AUTO

DEFAULT

NONE
Valores para enlaces y estado
 context-menu.- indica la presencia de un menú contextual.
 help.- puntero acompañado de un signo de interrogación, indica
que hay ayuda disponible.
 pointer.- posee forma de mano y generalmente es empleado
cuando se pasa sobre enlaces.
 progress.- este puntero con forma circular, indica que un programa
está en progreso o está ocupado en segundo plano, pero el usuario
aún puede interactuar con la interfaz.
 wait.- También posee la forma circular, ligeramente mayor al
anterior el programa se encuentra trabajando y ocupado (en
ocasiones con forma de un reloj de arena).

Te recomendamos leer: Propiedad display y visivility en CSS

CONTEXT-MENU

HELP
POINTER

PROGRESS

WAIT
Valores de cursor para selección
 Cell.- el cursor celda posee forma de cruz e indica que se puede
seleccionar celdas.
 Crosshair.- cursor cruzado, generalmente para indicar la selección
en un mapa de bits
 Text.- es el conocido cursor que nos permite seleccionar texto.
 vertical-text.- su forma es similar al cursor de texto, pero
dispuesto horizontalmente, indica que se puede seleccionar texto
vertical.
CELL

CROSSHAIR

TEXT

VERTICl-TEXT
Valores para elementos de arrastrar y soltar con
puntero
 Alias.- este cursor se puede emplear para índica que se debe crear
un alias o acceso directo
 Copy.- este cursor presenta la flecha acompañada de un signo (+) y
puede servir para indicar que un elemento puede ser copiado.
 Move.- posee forma de cruz con flechas, sirve para elementos que
pueden ser movidos con el cursor.
 no-drop.- este tiene la forma de círculo rojo con raja diagonal,
indica que no se permite una caída en la ubicación actual
 not-allowed.- similar al anterior, pero indica que no se puede
realizar algo.
ALIAS

COPY

MOVE

NO-DROP
NOT-ALLOWED
Valores para cambiar dimensiones y desplazamientos
 all-scroll.- indica que se trata de un elemento que se puede
desplazar en cualquier dirección.
 col-resize.- cursor para modificar las dimensiones de las columnas
horizontalmente.
 e-resize.- cursor dimensionar el borde derecho de un cuadro.
 ew-resize.- cursor para cambiar dimensiones a izquierda o derecha.
 n-resize.- puntero para indicar que se puede cambiar el tamaño del
borde superior de un cuadro.
 ne-resize.- cursor que indica que es posible cambiar el tamaño de
la esquina superior derecha de un cuadro.
 nesw-resize.- cursor para cambiar dimensiones en las direcciones
superior, derecha, inferior o izquierda.
 ns-resize.- para cambiar dimensión vertical, es decir superior o
inferior.
 nw-resize.- indica que es posible cambiar el tamaño de la esquina
superior izquierda de un cuadro.
 nwse-resize.- cursor para cambiar el tamaño en las direcciones
superior izquierda o inferior derecha
 row-resize.- para modificar dimensiones de filas en dirección
vertical.
 s-resize.- cursor para cambiar tamaño de borde inferior de un
cuadro.
 se-resize.- cursor para cambiar el tamaño de la esquina inferior
derecha de un elemento.
 sw-resize.- cursor para cambiar el tamaño de la esquina inferior
izquierda de un elemento.
 w-resize.- cursor para modificar las dimensiones del borde
izquierdo de un cuadro.

Te recomendamos leer: Poner Ancho y alto en CSS a los elementos

ALL-SCROLL

COL-RESIZE

E-RESIZE

EW-RESIZE
N-RESIZE
NE-RESIZE

NESW-RESIZE

NS-RESIZE

NW-RESIZE

NWSE-RESIZE
ROW-RESIZE

S-RESIZE

SE-RESIZE

SW-RESIZE

W-RESIZE
Más ejemplos de CSS para personalizar el cursor
Para el ejemplo crearemos varios bloques o contenedores <div> todos con las
mismas dimensiones y el mismo color de fondo, lo único en la que cambiará es
el estilo del cursor cuando este sobre cada una de ellas. Para ello apuntamos a
todos los bloques mediante un selector div y luego apuntaremos a cada bloque
mediante su clase (class) para poner un estilo diferente a cada uno.
Código HTML

HTML

1
<div class="defaul"> </div> <br>
2
<div class="no-drop"> </div><br>
3
<div class="col-resize"> </div><br>
4
<div class="ew-resize"> </div><br>
 5
<div class="wait"> </div>

Código CSS

CSS

1
div {
2
width: 300px;
3
height: 40px;
4
background-color:#422aa1;}
5
div.default {cursor:default;}
6
div.no-drop {cursor:no-drop;}
7
div.col-resize {cursor:col-resize;}
8
div.ew-resize {cursor:ew-resize;}
9
div.wait {cursor:wait;}

Resultado;
Recomendación final
Utiliza los estilos para cursor del ratón solo en casos necesarios, generalmente
los navegares web ya proveen de un estilo por defecto para ciertos elementos
como: los textos, enlaces, elementos de arrastre, etc. Así pues emplear
innecesariamente estos estilos, más allá de ayudar al usuario puede confundirlo,
por lo tanto es recomendable usar siempre y cuando sea necesario.

Propiedad display y
visivility en CSS
octubre 30, 2019 por Desarrolladoresweb.org

Anterior
Avanzar

Nos toca en esta lección aprender a manejar la

propiedad display y visivility de CSS, dos propiedades interesantes que
nos permitirán controlar, la forma en la que se muestra los elementos.
Recordemos que en HTML existen elementos de línea y de bloque, ahora
podemos cambiar estéticamente gracias a display, mientras que
con visivility podremos controlar la visibilidad de los elementos. ¡Listos!
Ir a contenido:

 La propiedad display
o Valores para display CSS
o Display CSS ejemplos
 Primer ejemplo:
 Segundo ejemplo:
o Valor display: none; de CSS
 Ejemplo de display:none;
 La propiedad visivility
o Valores para visivility

La propiedad display
La propiedad display nos permite elegir como se muestran los elementos en la
página, podemos indicar que se muestren como elementos de línea o como
elementos de bloque, además podemos indicar que no se muestre.
Por defecto, cada elemento de una página web se comporta como una caja;
además como mencionamos en la introducción, existen elementos HTML de
línea y de bloque, los mismos que desarrollamos en el curso de HTML. Para
nuestro propósito recordemos rápidamente:

 Elementos de línea.- estos ocupan solo lo necesario, por lo cual

pueden continuar en una misma línea sin hacer salto de línea;
ejemplo de ellos son: enlaces, imágenes, elementos en span, textos
sub y super, etc.
 Elemento de bloque.- estos elementos ocupan el ancho máximo
disponible, por lo cual realizan salto de línea al presentarse en la
estructura de la página; ejemplo de ellos tenemos a: párrafos,
bloques div, tablas, formularios, listas, etc.
Ahora es posible indicar como se comporta un elemento sin importar del tipo que
originalmente sea. La propiedad display de CSS solo cambia la apariencia más
no el tipo de elemento.

Te recomendamos leer: Estilos CSS para personalizar tablas | Propiedades y diseños

Valores para display CSS

  inline.- establece que el elemento debe comportarse como un
elemento de línea.
 block.- indica que el elemento debe comportarse como un elemento
de bloque.
 none.- indica que el elemento no debe ser mostrado.
 inherit.- hereda del elemento padre.
 initial.- indica que se cumpla la forma inicial o predeterminada.
Existen más valores para la propiedad display, pero los mencionados son los
más usados.

Display CSS ejemplos

Primer ejemplo:
Para el primer ejemplo, haremos que elementos de línea se comporten como
elementos de bloque:

Código HTML

HTML

1
<span> Este es un texto span </span>
2

3
<a href="URL"> Este es un enlace</a>
4

5
<img src="fondo.jpg">
6

Este es el resultado sin aplicar CSS:

Código CSS

CSS

1
span {display: block;}
2

3
a {display: block;}
4

5
img {display: block;}
Resultado después de aplicar display:block; con CSS.
Segundo ejemplo:
En este segundo ejemplo haremos que ciertos elementos de bloque se
comporten como elementos línea gracias a la propiedad display y valor inline.
Código HTML

HTML

1
<h1> TÍTULO </h1>
2
<h2> Subtítulo</h2>
3
<p> Párrafo corto</p>
4
<ul><li>Primero</li><li>Segundo</li></ul>
Resultado antes de aplicar CSS
Código CSS

CSS

1
h1 {display:inline;}
2
h2 {display:inline;}
3
p {display:inline;}
4
ul {display:inline;}
5
li {display:inline;}
6

Resultados después de aplicar display: inline; en CSS

Valor display: none; de CSS
El valor none de la propiedad display hace que elemento seleccionado quede
oculto en la página de resultado, de tal manera que el resto de contenido se
muestra como si dicho elemento no existiera pues none hace que deje de ocupar
espacio dentro de la estructura de página.
Ejemplo de display:none;
Código HTML

HTML

1
<p> Este es un párrafo al cual se le aplicará la propiedad display con valor none para que
quede oculto en la página web.</p>
Código CSS

CSS
 1
p {display:none;}
Obviamente el resultado será una página en blanco, ya que el único elemento de
párrafo quedará oculto.

Te recomendamos leer: Estilo para listas en CSS

La propiedad visivility
La propiedad visivility de CSS nos permite establecer si un elemento es
visible o invisible, de acuerdo al valor que elijamos establecer:
Valores para visivility
 visible.- indica que el elemento es mostrado.
 hidden.- establece que el elemento se esconde, pero los demás
elementos de la página se comportan como si dicho elemento
estuviese presente ahí, respetan sus dimensiones. Es como si el
elemento solo fuera invisible.
 collapse.- pensada para controlar la visibilidad de elementos de
tabla, filas y columnas.

Posicionamiento en CSS |
Cómo posicionar
elementos, tipos y
ejemplos
octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
Ahora aprenderás a cómo posicionar un elemento con CSS, en adelante podremos controlar el
lugar exacto en la que queremos que aparezca un elemento en la pantalla del usuario, tanto
si queremos que el elemento tenga posición: fija, estática, relativa o absoluta, etc. Esta lección
nos ayudará a comprender la forma en la que se posicionan los elementos de una página.
Este es un tema de alto interés, pues, es ahora que entra en juego nuestro razonamiento y un poco
de concentración, ya que es en esta parte donde bastantes principiantes suelen presentar
dificultades para entender las características que presenta cada forma de posicionar un elemento
dentro de una página web. Para ello estoy, para asegurar que captes rápido y fácil las ideas. ¡Pues
vamos!

Ir a contenido:

 Posicionando elementos con CSS

 Propiedades de posicionamiento CSS
o Valores para las propiedades de posicionamiento
 Propiedad position y formas de posicionamiento
o Valores para la propiedad position
 Posicionamiento estático (static)
 Posicionamiento relativo (relative)
o Ejemplo de posicionamiento relativo
 Posicionamiento absoluto (absolute)
o Ejemplo de posicionamiento absoluto CSS
 Posicionamiento fijo (fixed)
o Ejemplo de posicionamiento fijo con CSS (position:fixed;)
 Propiedad float en CSS
o Valores para float
o Ejemplo de float
 La propiedad clear
o Valores para clear
o Ejemplos de clear en CSS

Posicionando elementos con CSS

Para establecer la posición propiamente dicha de un elemento, utilizaremos las propiedades de
posicionamiento; las mismas que establecen distancias de: superior, derecha, inferior e
izquierda; sin embargo antes de ello debemos establecer la forma en la que se posiciona un
elemento y para ello disponemos de la propiedad POSITION, la misma que conoceremos más
adelante.
Existen principalmente tres formas de posicionar un elemento dentro de una página, me
refiero al posicionamiento: relativo, absoluto y fijo. Cada una de ellas tiene sus particularidades
y básicamente es lo que desarrollaremos en esta lección.
Propiedades de posicionamiento
CSS
 top.- establece la distancia superior, del elemento respecto a otro.
 left.- establece la distancia por el lado derecho del elemento respecto a otro.
 bottom.- distancia inferior de un elemento respecto a otro.
 right.- distancia por el lado izquierdo de un elemento respecto a otro.
Valores para las propiedades de posicionamiento
Los valores para las propiedades: top, left, bottom y right, pueden ser valores numéricos con sus
respectivas unidades de medida (px, em, pt, %, etc.); además pueden tomar valores numéricos
negativos.
Observa la imagen cuyo objetivo solo es hacerte entender, verás la dirección y sentido en que se
posiciona un elemento de acuerdo a la propiedad y valor positivo o negativo que tome.

Me explico rápidamente, si quiero posicionar un elemento cualquiera a 50px de la parte superior

y 25px desde el lado izquierdo, entonces el código CSS incluirá las declaraciones: top:50px;
left:25px;

¡Recuerda! Para que las propiedades de

posicionamiento funcionen, debes primero
establecer la forma de posicionamiento, de otra
forma no tendrán ningún efecto sobre la posición
del elemento seleccionado.
Desarrolladoresweb.org
A continuación conoceremos las formas de posicionamiento CSS, en qué consisten y como así se
diferencian.

Propiedad position y formas de

posicionamiento
La propiedad position nos permite establecer la forma en la que será posicionado un
determinado elemento y para que consideres quiero enfatizar esto, de tal manera que me
entiendas:
La propiedad position solo determina la forma en que será posicionado un
elemento más no posiciona por si solo a un elemento.
Alex.
Valores para la propiedad position
 estatic.- la forma por defecto, obedece al flujo normal de la página.
 relative.- establece que la posición de un elemento depende de otro.
 absolute.- indica que la posición de un elemento no depende de otro.
 fixed.- permite fijar un elemento en una posición determinada.
 inherit.- hereda el estilo de posición del elemento padre.
Para comprender mejor cada uno de estos valores y la forma en la que funcionan,
desarrollaremos un apartado para cada uno, pues es necesario detallar las características
particulares que posee cada uno y además veremos ejemplos concretos.

Posicionamiento estático (static)

El valor static de la propiedad position indica que el elemento debe ser posicionado de
acuerdo al flujo normal de la página, de hecho es el valor por defecto; esto quiere decir que todos
los elementos de la página están posicionados como elementos estáticos, de tal forma que van
apareciendo en el mismo orden en el que se encuentra en el documento HTML original.

Te recomendamos leer: Comentarios en CSS más cascada de estilos y herencia

Considera como flujo normal a aquel orden que se presenta cuando no se aplica ningún estilo que
altere la posición original de los elementos en una página.

CSS

1
#elemento {position: static;}

Cuando se establece position: static; definir las propiedades de

posicionamiento: top, left, right o bottom, no tiene sentido, ya que no serán tomados en
cuenta. Pues se supone que static indica que sea por defecto.
Si todos los elementos tienen posicionamiento estático (static) por defecto ¿Para qué sirve
entonces este valor? Pues en ocasiones y en ciertas condiciones puede ser necesario indicar que
el elemento se comporte tal cual como por defecto.
Posicionamiento relativo (relative)
El valor relative para la propiedad position de CSS, establece que el elemento será
posicionado relativo a su posición normal o inicial y sus características más destacadas son:
 Los elementos con posición relativa se encuentran el espacio original que
ocupaban.
 El valor relativesaca al elemento del flujo normal para que quede posicionado
con propiedades de posicionamiento.
 Ahora tiene sentido establecer las propiedades: arriba, derecha, abajo o izquierda
para indicar cuánto y dónde se desplazan los elementos.
 El elemento será desplazado tomando en cuenta a su posición original como punto
de partida.
 Los elementos posicionados con relative pueden superponerse a otros.
Para concretar la idea, observa la imagen, tenemos un elemento en color amarillo, la posición 1
es su posición original dentro de la estructura de la página, alrededor de ella están los demás
elementos.

 Posición 2.- el elemento ha sido movido 80px de derecha a izquierda

mediante right:80px y verticalmente se movió 50px de abajo hacia arriba
mediante bottom:50px;
 Posición 3.- el elemento ha sido posicionado a 60px de izquierda a derecha
(left:60px;) y 80px de arriba hacia abajo (top:80px;) a partir de su
posición original.

El código para posicionar el bloque amarillo de ejemplo habría sido de la siguiente manera:
Código HTML
HTML

1
<div class="amarillo">Bloque amarillo </div>
2

Código CSS

CSS

1
/*PARA LA POSICIÓN 2*/
2
.amarillo {
3
position: relative;
4
bottom:50px;
5
right:80px;
6
}
7

8
/*PARA LA POSICIÓN 3*/
9
.amarillo {
10
position: relative;
11
top:80px;
12
left: 60px;
13
}

En palabras sencillas, un elemento posicionado como relativo puede ser movido donde quieras,
pero las medidas que indiques serán medidos desde su posición inicial, además sin importar
donde las muevas, el espacio original que ocupaba se mantiene.
Ejemplo de posicionamiento relativo
Código HTML

HTML

1
<div> Elemento 1 </div>
2
<div class="dos"> Elemento 2 </div>
3
<div> Elemento 3 </div>
4
<div class="cuatro"> Elemento 4 </div>
5
<div> Elemento 5 </div>
6

Resultado sin aplicar posicionamiento:

Código CSS
CSS

1
div {
2
width: 80px;
3
height: 40px;
4
background-color: #2a88f5;
5
}
6

7
div.dos {
8
position: relative;
9
left: 80px;
10
}
11

12
div.cuatro {
13
position: relative;
14
top: 80px;
15
left: 80px;
16
}

Resultado después de aplicar posicionamiento al bloque dos y cuatro:

Para el bloque dos (class="dos") Literalmente lo que hemos hecho es indicar que toma
posición relativa (position: relative;) y su nueva posición es 80px de izquierda a
derecha (left:80px;) desde su posición inicial.
Las indicaciones para el bloque cuatro (class="cuatro") son similares, en este caso se
establece forma de posicionamiento relativo (position:relative;) y se indica nueva
posición de 80px de arriba hacia abajo (top:80px;) y 80px de izquierda a derecha
(left:80px;) a partir de su posición inicial.
Posicionamiento absoluto (absolute)
El posicionamiento absoluto de elementos con CSS posee características que lo diferencian de
las otras formas de posicionamiento y eso es lo que vamos a conocer y practicar en esta sección.

El valor absolute para la propiedad position establece que un elemento debe ser
posicionado de forma absoluta y básicamente se comporta de la siguiente manera:
 El elemento es removido del flujo normal de contenido para ser posicionado
mediante las propiedades de posicionamiento.
 Una vez removido no conserva el espacio que ocupaba originalmente, es decir los
demás elementos se comportan como si el elemento posicionado como absoluto
no existiera.
 Elementos posicionados como absoluto pueden superponerse sobre los demás
elementos.
 En el posicionamiento absoluto, los elementos se posicionan respecto al elemento
padre más cercano que tenga establecido una forma de posicionamiento
(position) distinto al por defecto o static.
Para observar concretamente y entender este tipo de posicionamiento, observemos la imagen a
continuación, se trata un elemento dentro de un contenedor azul y será posicionado de forma
absoluta, en el ejemplo la posición original según el flujo de contenido es la posición 1, mediante
CSS establecemos la posición 2 y 3.

Te recomendamos leer: Personalizando el cursor del ratón con CSS

Recuerda la teoría, un elemento posicionado como absoluto se posiciona

respecto al elemento padre más cercano con una posición distinta de static.
desarrolladoresweb.org
En este caso, el elemento a posicionar es el amarillo que está contenido dentro del contenedor
azul, es decir: contenedor azul es el padre del elemento amarillo; asumamos que azul está
posicionado como relativo, ya que es necesario que el padre este posicionado para que elementos
hijos puedan posicionarse como absolutos respecto a dichos padres.

 Posición 2.- indica que desde la parte superior sean 0px (top:0px;) y por la
izquierda 0px (left:0px;), ya que es posición absoluta entonces está respecto
 al padre, por lo tanto amarillo se posiciona justo en la esquina superior izquierda
de padre.
 Posición 3.- indica que desde la parte inferior sean 50px (bottom:50px;) y
desde la derecha sean 80px (right:80px;), ya que es posición absoluta toma
como referencia al elemento padre (azul).
El código CSS para obtener la posición 2 y 3 respectivamente, habría sido de la siguiente
manera:

Código HTML

HTML

1
<div class="verde">
2
<div class="azul">
3
<div class="amarillo"></div>
4
</div>
5
</div>
6

Código CSS

CSS

1
div.azul {
2
position:relative;
3
}
4
/*PARA AMRILLO POSICIÓN 2*/
5
div.amarillo {
6
 position:absolute;
7
top:0px;
8
left:0px;
9
}
10
/*PARA AMARILLO POSICIÓN 3*/
11
div.amarillo {
12
position: absolute;
13
bottom: 50px;
14
right: 80px;
15
}
16

PREGUNTA ¿Qué hubiera pasado si elemento azul no tuviera establecida la forma de

posicionamiento? Pues simple, amarillo hubiera buscado (al abuelo) al siguiente elemento padre
en este caso verde y si este tampoco lo tuviera seguirá hasta encontrarse finalmente con la
etiqueta <html> y por ende el posicionamiento absoluto se calculará a partir de los bordes de la
pantalla total.
De todas formas veamos un ejemplo dentro de navegador y como así se posiciona un elemento
en absoluto con todas las características necesarias.

Ejemplo de posicionamiento absoluto CSS

Código HTML

HTML

1
<div class="padre">
2
<div> HIJO 1 </div>
3
<div class="hijo2"> HIJO 2 </div>
4
<div> HIJO 3 </div>
5
<div class="hijo4"> HIJO 4 </div>
 6
<div> HIJO 5 </div>
7
</div>

Resultado sin aplicar posicionamiento:

Código CSS

CSS

1
div.padre {
2
position:relative;
3
width: 300px;
4
height: 200px;
5
background-color: #c2edcd;}
6

7
div {
 8
width: 70px;
9
height: 35px;
10
background-color: #2a88f5;}
11

12
div.hijo2 {
13
position: absolute;
14
top: 0px;
15
left: 150px;}
16

17
div.hijo4 {
18
position: absolute;
19
bottom: 70px;
20
right: 100px;}

Resultado después de aplicar posicionamiento absoluto a los elementos hijo 2 y 4.

Lo primero que observamos es que ahora, el valor absolute de la propiedad position hace
que el elemento se posicione respecto al elemento padre que lo contiene.
Ahora bien, notarás que los elemento posicionados como absoluto, además de salir del flujo
normal, ¡Ya no conservan su espacio original! Mira como los elementos 3 y 5 se comportan
como si 2 y 4 no existieran.

Posicionamiento fijo (fixed)

El posicionamiento fijo de elementos en CSS consiste en establecer una posición determinada
para un elemento, de tal manera que queda fija y no se mueva de dicha posición, aun cuando se
hace scroll en la pantalla.

Para establecer una posición fija, se emplea el valor fixed para la propiedad position.
Características de un elemento con position: fixed;
 Los elementos posicionados con valor fixed salen del flujo normal para ser
posicionados con las propiedades de posicionamiento.
 El espacio original que ocupaba un elemento desaparece una vez establecida la
posición fija, por ende los demás elementos se comportan como si no existiera.
 El elemento se posiciona respecto a los límites de la pantalla, es decir el punto de
partida es el borde de pantalla.
 Quedan fijas en una posición determinada y no pueden moverse aunque el usuario
se desplace por la pantalla.
 Elementos fijados pueden superponerse sobre otros.
Ejemplo de posicionamiento fijo con CSS (position:fixed;)
Código HTML

HTML

1
<div> BLOQUE1</div>
2
<div> BLOQUE2 </div>
3
<div> BLOQUE3 </div>
4
<div> BLOQUE4 </div>
5
<div class="bloque5"> BLOQUE 5 </div>
6
<div> BLOQUE 6</div>
7
<div class="bloque7"> BLOQUE 7</div>
8
<div> BLOQUE 8</div>
9
<div> BLOQUE 9</div>
10
<div> BLOQUE 10</div>
11

12

Resultado antes de aplicar posicionamiento fijo:

Código CSS

CSS

1
div {
2
width: 90px;
3
height: 100px;
4
background-color: #34a844;
5
}
6

7
div.bloque7 {
8
position: fixed;
9
 top: 30px;
10
left: 150px;}
11

12
div.bloque5 {
13
position: fixed;
14
right: 100px;
15
bottom: 80px;
16
}
17

18

Resultado después de aplicar posicionamiento fijo a los bloques 5 y 7 con CSS

Observa como han quedado fijadas las posiciones de los bloques 5 y 7, básicamente se fijan
respecto al borde de la pantalla, no conservan su espacio original y como ves han quedado fijas
aunque la barra de scroll se ha desplazado.
Propiedad float en CSS
La propiedad float establece que un elemento debe flotar a un lado de otro, ya sea al lado
derecho izquierdo del contenedor en el que se encuentre, de tal manera que un elemento quede
flotando en un lado con los demás elementos de texto y de línea alrededor de ella como si los
estuvieran envolviendo.

Te recomendamos leer: Selectores CSS - Reglas y sintaxis

Valores para float

 left.- el elemento flota hacia la izquierda dentro del bloque que lo contiene.
 right.- indica que el elemento flota a la derecha de su bloque contenedor.
 none.- indica que el elemento no flota en ningún sentido y es el valor por defecto.
Ejemplo de float
El primer ejemplo se trata de dos contenedores con class="contenedor" y cada uno
contiene cuatro bloques con su respectivo número, los bloques del primer contenedor
(class="left") flotarán al lado izquierdo (float:left;) y los bloques del segundo
contenedor (class="right") flotarán al lado derecho (float:right;).
Código HTML

HTML

1
<div class="contenedor">
2
<div class="left"> BLOQUE1</div>
3
<div class="left"> BLOQUE2 </div>
4
<div class="left"> BLOQUE3 </div>
5
<div class="left"> BLOQUE4 </div>
6
</div><br>
7

8
<div class="contenedor">
9
<div class="right"> BLOQUE5</div>
10
<div class="right"> BLOQUE6</div>
11
<div class="right"> BLOQUE7</div>
12
<div class="right"> BLOQUE8</div>
13

14
</div>

Código CSS

CSS

1
div.contenedor {
2
height: 50px;
3
background-color: #18abdb;}
4

5
div.contenedor div.left {float: left;
6
padding: 7px;}
7
div.contenedor div.right {float: right;
8
padding:7px;}
9

Resultado:
Observa como se han posicionado los bloques uno a continuación de otro, y el orden en el que lo
hacen, el primer contenedor posee bloques con flote a la izquierda y el segundo contenedor posee
bloques con flote a la derecha.

El segundo ejemplo consiste en una imagen que flota al lado derecho de un párrafo.

Código HTML

HTML

1
<h1> Título de página </h1>
2
<p> Este es un párrafo, para probar la propiedad float de CSS; en esta ocasión haremos que
esta imagen: <img src="fondo.jpg"/>contenida dentro de este párrafo pueda flotar al lado
derecho, de tal manera que el texto envuelva a dicha hermosa imagen, pues queremos
notar el aspecto y por ello seguimos agregando más texto importante...De no haber
aplicado la propiedad float seguramente la imagen aparecería justo despues de los dos
puntos, ya que aquí todos sabemos que imagen es un elemento de linea...Gracias a float:
right logramos sacar a imagen del flujo y flotarla hacia la derecha...</p>
Código CSS

CSS

1
img {float:right;}
2

Resultado:

La propiedad clear
Como ya hemos visto, después de establecer la propiedad float para un elemento determinado,
los elementos que siguen suelen envolver a dicho elemento flotante.
La propiedad clear nos permite limpiar o despejar elementos que se encuentran a lado de un
elemento flotante.
Valores para clear
 left.- indica que desplace al elemento hasta donde no haya un flotante a la
izquierda.
  right.- indica que desplace al elemento hasta donde no haya un flotante a la
derecha.
 both.- indica que desplace al elemento hasta donde no haya flotantes a la derecha
ni a la izquierda.
Me explico rápidamente, clear limpia elementos de la derecha o izquierda de un elemento
flotante y lo desplaza hacia abajo, tan simple como eso. Veamos algunos ejemplos.
Ejemplos de clear en CSS
Para notar mejor el resultado de emplear clear utilizaremos un par de bloques <div> de tal
manera que el primero será un elemento (rojo) flotante a la derecha y el otro será un bloque
(azul) normal, al principio notaremos cómo el elemento flotante se superpone y flota a la
derecha, el segundo se desplaza como si el primero no existiera… En ese punto
aplicaremos clear para el segundo bloque (azul) de tal manera que limpie tal efecto y lo
desplace por debajo del elemento que flota a la derecha (clear: right;)
Código HTML

HTML

1
<h1>Un título fantástico</h1>
2
<div class="primero">PRIMERO</div>
3
<div class="segundo">SEGUNDO</div>
4

Código CSS

CSS

1
div {margin:15px;}
2

3
div.primero {
4
width: 200px;
5
 height:200px;
6
background-color: red;
7
float: right;
8
}
9

10
div.segundo {
11
width: 400px;
12
height: 150px;
13
background-color: blue;
14
clear: right;
15
}
16

Resultado:
Eventos que han sucedido:

Sin aplicar float

aplicando float: right; a rojo

Limpiando azul de efecto float de rojo (clear:right;)

Ahora hemos visto como limpiar elementos de los efectos de float cuando lo deseemos y eso
es ¡GENIAL! Pero antes quiero dejar las cosas bien en claro.
¿Qué hubiera pasado si el segundo bloque (azul) hubiera tomado la propiedad clear:left;?
Eso hubiera indicado que desplace por debajo del elemento que flota a la izquierda…¿Existe un
elemento antes que flote a la izquierda? ¡NO!, por ende no hubiera ocurrido, el bloque azul
seguiría sin desplazarse.
Otra posibilidad es haber empleado la declaración clear:both; en ese caso el bloque azul se
hubiera desplazado, ya que both indica que se desplace si existe un flotante a la derecha o
izquierda, en cualquier caso.
Pues bien, aclarado estos puntos, ahora te toca practicar…

La propiedad overflow en
CSS
octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
Esta es la lección en la que conoceremos y aprenderemos a utilizar la
propiedad overflow es una propiedad CSS muy importante para el control de
contenido excedente de elementos y contenedores. Mediante un poco de
teoría y varios ejemplos prácticos te ayudaré a entender qué es, para qué sirve y
cómo es que funciona esta propiedad.
Para qué sirve la propiedad overflow de
CSS
Para responder la pregunta quiero que te pongas a pensar en la infinidad de
posibilidades que tenemos para dimensionar un elemento o contenedor, son
tantas posibilidades que en ocasiones existen elementos hijos que exceden la
dimensión de sus elementos padre.

Entonces ¿Qué sucede cuando por alguna razón el elemento hijo sobrepasa los
bordes de su elemento padre? Pues simplemente se desborda, se excede y es
poco práctico, es ahí donde entra en juego el poder de la propiedad overflow.
Así se ve cuando el elemento hijo excede las dimensiones del elemento padre:

Overflow permite mantener visible el excedente, ocultar, o crear barras de

desplazamiento sobre el contenedor del que excede.
Valores para la propiedad overflow
 visible.- es el valor por defecto y hace que todo sea visible,
aunque el contenido esté desbordado.
 hidden.- hace que el contenido excedente se oculte.
 scroll.- El contenido ingresa al contenedor sin desbordarse, pero
aparecen las barras de desplazamiento horizontal y vertical para
visualizar el contenido.
  auto.- automáticamente aparecen las barras de desplazamiento
siempre y cuando sean necesarias, el contenido no se desborda,
ingresa en su contenedor.
 inherit.- hereda el estilo del elemento padre.

Ejemplos de overflow en CSS

Código HTML

HTML

1
<div class="contenedor">
2
<p class="contenido">Este es un párrafo para probar la propiedad Overflow de CSS, por
ello necesitamos que este párrafo sobrepase los límites del contendor en el que se
encuentra, de tal manera que podamos observar como es que los valores de overflow
influyen en el comportamiento de los contenidos excedentes, ya sabemos cuáles son los
valores y cómo estos afectan, pero no está demás verlos visualmente y en tu caso aplícalo
en tu proyecto para explorar de primera mano...</p>
3

Código CSS

CSS

1
div.contenedor {
2
width:200px;
3
height: 200px;
4
margin:40px;
5
padding: 15px;
6
background-color:#76e37f;
 7
border: 1px solid #aaa;
8
overflow:scroll;
9
}
10

11

12

13

14

Resultado de propiedad overflow con valor scroll:

Te recomendamos leer: Ejemplos de CSS y ejercicios resueltos

Observa cómo aparecen las barras de desplazamiento tanto en la parte inferior

como al lado derecho del contenedor, de tal manera que ahora se puede
deslizar para descubrir el contenido que no quepa en el contenedor.
Resultado cuando se aplica otros valores:
Ahora veamos los resultados obtenidos en el mismo ejemplo anterior cuando se
aplica otros valores para overflow.
Resultado para overflow:visible;

Resultado para overflow:hidden;

Resultado para overflow:auto;

 Propiedad Z-INDEX en CSS
octubre 30, 2019 por Desarrolladoresweb.org
Anterior
Avanzar
Vamos a aprender a usar la propiedad Z-INDEX de CSS, una propiedad muy
sencilla que puede llegar a complicarse y es muy poderosa, nos permite
establecer el orden de apilamiento de un elemento posicionado, es decir ordenar
elementos después de haber removido el flujo normal de una página, algo que
es casi inevitable cuando trabajamos con CSS, pues bien, ya que estamos aquí,
desarrollemos esta lección.
Ir a contenido:

 Para que sirve la propiedad Z-index

 Valores para la propiedad z-index
 Ejemplo de z-index
 Contextos de apilamiento
 Entendiendo el alcance de acción de z-index

Para que sirve la propiedad Z-index

Z-index es una propiedad que está pensada para ordenar elementos en el eje
Z, prácticamente es el eje que sale del plano de la pantalla; en palabras
sencillas, Z-index sirve para poner elementos uno sobre otros.
Cabe recalcar que z-index actúa sobre elementos posicionados, es decir, que
posean la propiedad position y además cuyo valor sea distinto de static. z-
index no actúa sobre elementos no posicionados.
Z-index puede ser más complicado de lo que parece, sin embargo, ya que estás
empezando, esta lección te irá de maravilla para aprender.

Observa la imagen, asume que los bloques están posicionados como absolutos;
notarás que el bloque 3 se superpone sobre 1 y 2, esto es debido al orden en
que aparecen en el documento HTML… Pero a partir de ahora es posible
cambiar dicho orden empleando la propiedad Z-INDEX con un valor
determinado.

Cuando trabajamos el diseño web siempre se suele romper con el flujo normal,
es el caso de los posicionamientos que vimos en anteriores lecciones; cómo
elementos sacados de su flujo normal se superponen sobre otros y otros quedan
por detrás.

Te recomendamos leer: Estilo para listas en CSS

Valores para la propiedad z-index

 auto.- La caja no establece un nuevo contexto de apilamiento. El
nivel de apilamiento de la caja generada es el mismo que el de la
caja padre.
 Entero.- pude ser un número entero.
 inherit.- hereda del elemento padre.
Los elementos con z-index cuyos valores son mayores se superponen sobre
aquellos que tienen menor valor numérico.
Ejemplo de z-index
El primer ejemplo se trata de tres bloques posicionados como absolutos, de
distintos colores y medidas, estableceremos los valores adecuados para z-
index, de tal manera que podamos controlar quien se superpone a quien…
Código HTML

HTML

1
<div class="primero">ROJO</div>
2
<div class="segundo">AZUL</div>
3
<div class="tercero">AMARILLO</div>
4

Resultado sin aplicar z-index, los bloques se muestran en el mismo orden en

que aparecen:

Código CSS

CSS
 1
div {
2
width: 100px;
3
height: 100px;
4
position: absolute;
5
}
6
div.primero {
7
background-color: red;
8
top: 50px;
9
left: 30px;
10
z-index:10;
11
}
12
div.segundo {
13
background-color: blue;
14
top: 100px;
15
left: 80px;
16
z-index:5;
17
}
18
div.tercero {
19
background-color: yellow;
20
top: 150px;
21
left: 130px;
22
z-index:1;
 23
}

Resultado después de aplicar z-index con valores: 1 para amarillo, 5 para azul
y 10 para rojo:

Nota que el bloque con mayor z-index se superpone sobre los demás.
Aquí no termina todo, para entender mejor la propiedad z-index es necesario
entender lo que son los contextos de apilamiento.

Contextos de apilamiento
Un contexto de apilamiento aparece dentro del documento cuando se establece
una posición distinta de estático para un determinado elemento, cuando se trata
de un elemento raíz HTML y también aparece cuando se establecen
propiedades como: opacity, transform, filter, perspective, etc. con valores
distintos al por defecto.
No me voy a liar explicando esto, ya que aún no tocamos dichos temas, sin
embargo seré bastante práctico.

Te recomendamos leer: Personalizando el cursor del ratón con CSS

Observa la imagen, cada bloque esta identificado y posee un z-
index determinado.

Imagina que tenemos varios bloques de contenido, ahora imagina que dentro
de dichos bloques existen otros bloques y así sucesivamente, padres e
hijos. Cada bloque constituye un contexto de apilamiento siempre y cuando
cumpla con lo que mencionamos, principalmente cuando se establece posición
distinta de estático para un bloque cualquiera.
Ahora, para la propiedad z-index cada bloque es independiente, dentro de
cada bloque padre, z-index puede tomar un valor y se cumplirá dentro de ese
padre más no en otro, de tal manera que en otros bloques puede haber z-
index con mayor o menor valor que no influyen dentro de un bloque padre.
Entendiendo el alcance de acción de z-
index
Esto es ¡genial! ¿viste lo que acaba de ocurrir en el anterior esquema? Pues el
bloque 2 (verde) es padre de tres elementos hijo con z-index establecidos; ahora
ocurre que z-index solo se cumple dentro de su región, no es afectado por los z-
index de otros bloques. Es evidente que el padre 2 si es afectado por sus
hermanos.
En palabras sencillas z-index afecta a elementos hermanos.
Observa ¿Quién tiene el menor valor de z-index? El hijo 3 del bloque 2 con valor
z-index de 10, pero está sobre el bloque 3 que tiene z-index mayor, valor de 20,
además se superpone a su padre que posee valor 40. Así podemos concluir
que cada elemento padre es independiente y z-index afecta solo a
hermanos.
Hasta aquí hemos llegado con el tutorial de CSS, en las siguientes lecciones
realizaremos algunos ejercicios prácticos, problemas con su solución, aplicando
la mayor cantidad de propiedades posible; es más resolveremos el último
ejercicio de z-index, pero con código completo, Pues aquí solo vimos una
representación gráfica… ¿Quieres verlo? ¡Pues vamos por ello!

Te recomendamos leer: Modelo de cajas CSS | cómo es y para qué sirve

En este punto ya somos expertos de CSS :), pero aquí no termina, ahora nos
toca potenciar nuestro poder de diseño web con el curso de CSS3. Estoy seguro
de que te va a encantar pues ahora se suman nuevas propiedades potentes que
nos harán volar en un mundo lleno de belleza… Bueno, mejor los conoceremos
allí…

Ejemplos de CSS y
ejercicios resueltos
noviembre 6, 2019 por Desarrolladoresweb.org
Anterior
Ahora que conocemos el lenguaje de estilos CSS, es momento de aplicar todo lo
aprendido; para ello veremos ejemplos aplicativos y además varios ejercicios y
problemas con sus respectivas soluciones.

Ir a contenido:

 Ejemplos de CSS
o Primero.- Ejercicio resuelto de propiedad z-index
o Segundo.- Ejercicio de modelo de cajas
 Ejercicios propuestos

Ejemplos de CSS
Cada ejercicio será planteado o explicado según sea el caso al principio, se
describirán las características que se desean obtener mediante CSS y si la
pregunta lo requiere se tomarán notas y aclaraciones al final de cada ejercicio.

Primero.- Ejercicio resuelto de propiedad z-index

Ya que venimos de haber terminado la lección de la propiedad z-index,
resolveremos el ejercicio que nada más lo vimos como gráfico, para quienes se
suman recientemente les cuento; se trata de tres bloques <div> con sus
respectivos z-index, el bloque 2 contiene tres bloques hijo dentro de ella y
también están con sus respectivas propiedades z-index declaradas. Veamos el
cogido y resultado.
Se busca demostrar que el bloque 2 es un bloque padre independiente y que las
propiedades z-index de sus hijos no es influenciada por los bloques 1 y 3, sin
embargo el padre 2 si es influenciado, sus hijos no. Veamos el código y
resultado.
Código HTML
HTML

1
<div class="bloque1">BLOQUE 1</div>
2

3
<div class="bloque2">BLOQUE 2
4
<div class="hijo1">Hijo 1 de bloque 2</div>
5
<div class="hijo2">Hijo 2 de bloque 2</div>
6
<div class="hijo3">hijo 3 de bloque 3</div>
7

8
</div>
9
<div class="bloque3">BLOQUE 3</div>
10

11

Código CSS

CSS

1
div {
2

3
position: absolute;
4
border:1px solid #41729c;
5
}
6
div.bloque1 {
 7
background-color: #ebf0f9;
8
width:353px;
9
height:113px;
10
top: 95px;
11
left:56px;
12
z-index:800;
13
}
14
div.bloque2 {
15
background-color: #c5e0b4;
16
width:297px;
17
height:387px;
18
top: 40px;
19
left: 81px;
20
z-index: 40;
21
}
22
div.bloque3 {
23
background-color: #ffe699;
24
width:397px;
25
height:116px;
26
top: 374px;
27
left: 20px;
28
z-index: 20;
29
}
30
 31
div.bloque2 div.hijo1 {
32
background-color: #5b9ad5;
33
width:266px;
34
height:98px;
35
top: 120px;
36
left: 15px;
37
z-index:90;
38
}
39

40
div.bloque2 div.hijo2 {
41
background-color: #d0cece;
42
width:143px;
43
height:296px;
44
top: 33px;
45
left:126px;
46
z-index:30;
47
}
48

49

50
div.bloque2 div.hijo3 {
51
background-color: #ffb9b9;
52
width:176px;
53
height:99px;
54
top: 278px;
 55
left: 105px;
56
z-index: 10;
57
}
58

Resultado:

Te recomendamos leer: Propiedad display y visivility en CSS

Código ejecutable
A continuación tienes el mismo ejemplo, pero con el código HTML y CSS en el
mismo documento, por lo tanto puedes ejecutar mediante el icono de
reproducción y verás que el resultado es la misma que se muestra en la imagen.
Observa que el código CSS se incrustó mediante la etiqueta <style>.
HTML

1
<div class="bloque1">BLOQUE 1</div>
2

3
<div class="bloque2">BLOQUE 2
4
<div class="hijo1">Hijo 1 de bloque 2</div>
5
<div class="hijo2">Hijo 2 de bloque 2</div>
6
<div class="hijo3">hijo 3 de bloque 3</div>
7

8
</div>
9
<div class="bloque3">BLOQUE 3</div>
10

11
<style>
12
div {
13

14
position: absolute;
15
border:1px solid #41729c;
16
}
17
div.bloque1 {
18
background-color: #ebf0f9;
19
width:353px;
20
height:113px;
21
top: 95px;
22
left:56px;
23
z-index:800;
24
}
25
div.bloque2 {
26
background-color: #c5e0b4;
27
width:297px;
28
height:387px;
29
top: 40px;
30
left: 81px;
31
z-index: 40;
32
}
33
div.bloque3 {
34
background-color: #ffe699;
35
width:397px;
36
height:116px;
37
top: 374px;
38
left: 20px;
39
z-index: 20;
40
}
41

42
div.bloque2 div.hijo1 {
43
background-color: #5b9ad5;
 44
width:266px;
45
height:98px;
46
top: 120px;
47
left: 15px;
48
z-index:90;
49
}
50

51
div.bloque2 div.hijo2 {
52
background-color: #d0cece;
53
width:143px;
54
height:296px;
55
top: 33px;
56
left:126px;
57
z-index:30;
58
}
59

60

61
div.bloque2 div.hijo3 {
62
background-color: #ffb9b9;
63
width:176px;
64
height:99px;
65
top: 278px;
66
left: 105px;
67
z-index: 10;
 68
}
69

70
</style>

Segundo.- Ejercicio de modelo de cajas

Crea un bloque con las siguientes características: Ancho de 400px, altura de
150px, color de fondo a tu elección, borde de 4px con puntos, color a tu elección,
margen de 50px, relleno de 40px y que contenga una frase al medio que
diga:»¡Me encanta CSS!» colócale el mejor tipo de letra, tamaño y además
mediante CSS has que sea pura mayúscula. ¡Adelante!

Código HTML

HTML

1
<div><p>¡Me encanta CSS!</p></div>
2

Código CSS

CSS

1
div {
2
width:400px;
3
height:150px;
4
background-color:#ad6be3;
5
border: 4px dotted;
6
padding:40px;
7
 margin:50px;
8
display: inline-table;
9
text-align:center;
10
}
11
div p {
12
display: table-cell;
13
vertical-align:middle;
14
font-family: impact;
15
font-size:32px;
16
text-transform: uppercase;
17
color:#330757;}

Resultado:
Ejercicios propuestos
 El siguiente ejemplo consiste en realizar un círculo con radio de 250
píxeles, un borde doble de color naranja y color de fondo color azul.
 El segundo ejercicio consiste en realizar un color de fondo
degradado para un párrafo, además agregarle un margen de 20
píxeles, un relleno de 14px, un borde de radio 20px.
 El tercer ejercicio se trata de un botón, con color de fondo rojo, el
tipo de letra helvética, y pura mayúscula, y cuando el ratón pase por
encima de ella, esta debe volverse color verde.
 Los demás ejercicios se tratarán de aplicar estilos a listas, tablas y
muchos otros elementos HTML que hemos conocido.