Professional Documents
Culture Documents
El nombre viene del inglés Cascading Style Sheets, significa Hojas de Estilo en Cascada y su función es cambiar el aspecto por
defecto de los elementos HTML que forman una web.
Los estilos CSS definen la apariencia de los elementos HTML a la hora de mostrarse en el navegador. Un solo cambio en la hoja de
estilos puede modificar multitud de elementos de una web. Básicamente CSS le dice a HTML con qué aspecto debe mostrar la página.
Sin utilizar CSS los elementos de una web se disponen unos debajo de otros (la imagen de abajo corresponde a este mismo artículo con
el CSS anulado). De tal forma sería muy poco atractivo e incluso incómodo navegar por ella, pero una vez apliquemos el
estilo CSS colocará todo en su sitio y le dará el aspecto deseado.
La forma de insertar el código en los ejemplos va a ser con CSS en línea, dentro de las propias etiquetas HTML, que en todos los
casos va a ser un párrafo representado con la etiqueta <p> </p>.
El archivo HTML con el nuevo párrafo al que aplicaremos estilos CSS te quedará así:
Para asignar el estilo CSS dentro del párrafo solo tendremos que añadir una propiedad y un valor. En los ejemplos tienes las
propiedades y valores, seguidos del código y el resultado.
Vamos a intentar acostumbrarnos al hexadecimal. En la página www.color-hex.com tienes algunos ejemplos de colores.
Antes de seguir con la guía CSS practica con el resto de métodos para implementar los colores en distintos párrafos.
Ejercicio 2: Alinear un texto al centro
Para el segundo ejercicio no hace falta que añada imágenes de apoyo puesto que ya has visto donde debes escribir el código y cómo
ejecutarlo.
Como verás el ejemplo de arriba queda un poco feo. La solución es añadir un poco de relleno entre las letras y el límite coloreado que
es su padding.
A continuación en el modelo puedes ver las cajas que genera CSS alrededor del elemento. Desde dentro hacia afuera:
Podemos insertar CSS en el mismo documento o desde uno o varios documentos externos. Aunque los métodos no son igual de
óptimos en cuanto a los tiempos de carga, todos ofrecen los mismos resultados. Con la práctica sabremos decidir qué técnica usar
en cada momento.
Previamente a ver dónde y cómo utilizar CSS es necesario saber crear una regla. Así que lo primero que haré es explicarte cómo se
programa.
h1 {
font-size: 20px;
}
Durante el manual iremos descubriendo algunas propiedades y valores que podremos aplicar a los elementos HTML. No te preocupes
porque al final del curso tendrás la lista completa clasificada.
Para realizar la práctica puedes usar el mismo documento HTML que descargaste en el artículo anterior y seguir unas sencillas
instrucciones.
Como el lugar donde vamos a añadir CSS es el <head> esta vez no podrás usar tu CMS (WordPress, PrestaShop…).
Para añadir la regla y empezar a familiarizarte con CSS, introduce el código en el <head> dentro de las etiquetas <style> </style>.
Para ver el resultado haz click en Ejecutar > Launch in Chrome (o tu navegador favorito) en el menú de herramientas superior. Verás
que esta regla afectará a los párrafos de esa página.
Prueba a escribir más párrafos y verás que siempre serán de color rojo. Recuerda que puede tener la longitud que necesites y que su
contenido está delimitado por las etiquetas <p> </p>.
¿Dónde y cómo utilizar CSS?
Ahora que ya sabemos crear reglas veamos desde dónde añadir CSS al documento HTML. Podemos utilizar CSS integrándolo desde
dos lugares y varios métodos diferentes:
Aunque estos métodos son los más habituales, existen otras formas de incluir CSS en los archivos pero requieren de conocimientos
avanzados en programación.
Recordemos visualmente la estructura básica de un documento HTML que como ya habrás visto en la imagen anterior, está
estructurado en dos partes: <head> y <body>.
La etiqueta <!DOCTYPE html> es una instrucción para que el navegador sepa que versión de HTML se está usando, mientras
que <html> </html> abre y cierra el contenido del documento.
Antes de empezar a desarrollar con ejemplos prácticos las lista de métodos y lugares desde donde usar CSS, necesitamos crear un
documento CSS externo. Puedes hacerlo mediante el editor de código Notepad, o descargando un archivo CSS desde aquí.
Abre un documento nuevo en el editor de código y guárdalo en blanco con la extensión .css desde la ruta Archivo > Guardar como. El
contenido del archivo irá creciendo en función de las necesidades de diseño del sitio web que tengas pensado.
Ahora que tenemos el documento creado vamos a ver dónde y cómo colocarlo para que se apliquen las reglas.
Con la sentencia @import y con el documento CSS podemos importar la hoja de estilos externa.
Esta sentencia debe ir al principio de la etiqueta <style> antes de cualquier otra regla si la hubiera. Esto permitirá realizar cambios
sobre la hoja importada sin tocarla.
Aunque se suele utilizar en algunas ocasiones, ya te he dicho que esta no es la mejor forma de insertar un archivo de estilo.
<head>
<style type="text/css">
@import url('http://tu-dominio.com/style-demo.css');
</style>
</head>
Ejercicio: ¿Cómo importar una hoja de estilo CSS?
Vamos a hacer una práctica de importación. Te hace faltan los archivos HTML y el CSS anteriores, que para estos ejemplos deben
estar dentro de la misma carpeta.
<style type="text/css">
@import url('style-demo.css');
</style>
p{
color: green;
}
Como para aprender CSS es necesario repetir, para practicar un poco añade otras reglas. Puedes probar con estas.
p{
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
</head>
<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo-2.css" />
</head>
Puedes enlazar todos los que necesites, aunque supondrá varias peticiones al servidor que afectarán negativamente a la velocidad de
carga de la web. Lo ideal es tener la menor cantidad de archivos posibles.
Dentro del archivo CSS implementaremos las reglas como ya sabemos, y según nos hagan falta. El archivo CSS estará vivo durante
todo el trabajo de desarrollo de una web.
En el mismo archivo HTML con que hemos estado trabajando hasta ahora, copia este código dentro del HEAD. Elimina el código de
importación que has usado antes.
Para asegurarte aún más de que la hoja está bien enlazada, en el archivo CSS sustituye el valor de la propiedad color por otro, por
ejemplo el color púrpura (color:purple;).
Tu texto enlazado desde un archivo externo ahora es color púrpura
Para tu tranquilidad ya hemos pasado lo difícil en lo referente a desde dónde utilizar CSS. Ahora vienen las formas más sencillas de
usar CSS. Una de ellas la hemos visto en el primer ejemplo, pero vamos a repasarla y ampliarla.
Ya sabes que podemos incrustar reglas CSS directamente dentro del HEAD. Puedes hacerlo también aunque antes hayas enlazado un
documento externo. Solo debes tener en cuenta que las reglas posteriores sobrescribirán a las del archivo enlazado.
<head>
<link rel="stylesheet" type="text/css" href="style-demo.css" />
<style type="text/css">
p{
font-weight: bold;
color: orange;
}
</style>
</head>
Esto quiere decir que aunque en el último ejemplo hemos asignado a los párrafos el color púrpura mediante el archivo externo, la regla
posterior la sobrescribe y el color con que muestra es el naranja.
Te reto a que hagas este ejercicio sin que yo te de tantas facilidades. Solo tienes que añadir el código de arriba a tu archivo. El
resultado será un texto naranja porque aunque en el archivo enlazado el texto era púrpura, la última regla que lea el navegador es la que
utilizará.
<style type="text/css">
p{
color: black;
}
... otras reglas ...
p{
color: green;
}
</style>
Ten cuidado porque si no tienes mucha práctica en utilizar CSS, al añadir una regla puede que sin querer sobrescribas a otras y te
provocará momentos de gran confusión.
CSS en línea
Mientras escribimos el texto podemos utilizar CSS añadiéndolo dentro de las etiquetas HTML del <body>. Las reglas se añaden dentro
del atributo style=”” y afectan solo al elemento que las contenga.
En este ejemplo, tanto si usas WordPress como otro gestor de contenidos, podrás hacerlo desde su editor.
¿Te has detenido a pensar qué ocurre si tienes una hoja de estilo enlazada o reglas incrustadas en el HEAD y decides aplicar
otras diferentes en línea? ¿Cuáles surtirán efecto?
p{
font-size: 15px;
color: red;
letter-spacing: 3px;
}
p{
font-weight: bold;
}
Ahora en el archivo HTML con el método en línea añade nuevas reglas al párrafo:
La sintaxis es similar a la que conocemos pero se diferencia en que los elementos del selector están separados por un coma ( , )
p, h2{
color: green;
margin-top: 15px;
}
Como es costumbre en esta serie de 4 tutoriales CSS puedes hacer prácticas mientras los lees. Para realizar los ejercicios necesitas un
archivo HTML y otro CSS, que ya tendrás de los artículos anteriores. Si no es así puedes descargar desde este enlace el archivo HTML
y desde este otro el archivo CSS.
Recuerda que editaremos el código usando el editor gratuito Notepad++, que también te servirá para crear tus propios archivos si no
quieres descargarlos.
Para crear un selector CSS múltiple y hacer que una regla afecte a más de un elemento, escribe el código que se muestra a continuación
en tu documento CSS enlazado.
p, h2{
color: purple;
}
Te recuerdo que los archivos deben estar dentro de la misma carpeta, con el archivo CSS enlazado desde el HEAD del HTML. La url
deberá ser el nombre del archivo CSS como en la imagen:
Prueba a añadir al selector CSS otras propiedades y valores de los que hemos usado hasta ahora, con la finalidad de que afecten tanto
al h2 como al párrafo.
y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo
electrónico.
Los selectores CSS y los atributos HTML
Quiero hacer un alto en el camino indicando que hay que diferenciar estos dos términos porque los entremezclaremos durante la
lectura. Para identificar a un elemento especial o a varios de ellos en el código HTML les asignaremos un atributo que lo identifica, por
ejemplo id=”negro”. Para llamarlo desde la regla CSS usaremos un selector, que en este caso será #negro.
Aclarado esto veamos como funcionan los selectores más útiles de CSS, los selectores id y class.
Los selectores id son elementos únicos y solo puede existir uno con el mismo nombre en cada página de un sitio web. Su selector en la
regla comienza por # y sirve para identificar un elemento determinado y poder modificarlo. Mediante los selectores id podremos tener
todos los párrafos en color negro y uno en concreto de color rojo.
¿Cómo usar los selectores id?
Si queremos asignar a un elemento HTML un selector id tenemos que aplicarle este atributo y haber creado su regla:
#rojofuerte{
color: red;
font-weight: bold;
}
#amarillo{
color: yellow;
}
<p id="rojofuerte">Este párrafo es de color rojo y en negrita</p>
<p id="amarillo">En cambio este párrafo es de color amarillo</p>
Podemos tener la cantidad de selectores id necesarios en la misma página siempre que tengan un nombre diferente. Por lo que una vez
asignamos un atributo id a un elemento no podremos asignárselo a otro en ese mismo archivo HTML.
El nombre de un atributo id no puede contener espacios en blanco, ni letras ñ, ni tildes, ni empezar por números. Podemos usar letras
mayúsculas, minúsculas y números (si no son al principio). También podemos utilizar guiones medios ( – ).
Para usar una palabra compuesta en el nombre del id, e identificarlo fácilmente podemos usar una estructura del tipo: parrafoEspecial,
parrafoEspecial2, o separar mediante guiones: parrafo-especial, parrafo-especial-2.
Si quieres en este caso puedes utilizar solo el archivo HTML. Crea una regla para un atributo dentro de la etiqueta <style> </style> y
escribe varios párrafos dentro del BODY. Asígnale a uno de ellos ese id.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
p{
color: purple;
}
#rojo{
color: red;
}
</style>
</head>
<body>
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,</p>
<p id="rojo">no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,</p>
<p>darga antigua, rocín flaco y galgo corredor.</p>
</body>
</html>
Como era de esperar el resultado serán párrafos de color púrpura y el de id=”rojo”, será de color rojo.
De momento todo coincide con lo que ya sabemos de otros tutoriales, la regla con selector id sobrescribe a la regla con selector párrafo
porque está después. Pero…
¿Qué pasa si reordenamos las reglas y colocamos la del id la primera? ¿debería ser sobrescrita por la regla global para los párrafos?
<style type="text/css">
#rojo{
color: red;
}
p{
color: purple;
}
</style>
El resultado será exactamente el mismo porque el selector id prioriza en las reglas. Lo pongas donde lo pongas hace una selección
concreta para un elemento y le asigna el estilo de su regla obviando al resto.
Selectores class
Para facilitarnos la vida y poder agrupar elementos, CSS nos ofrece la posibilidad de usar clases mediante el selector class. Con ellas
podemos asignar un estilo a un grupo de elementos HTML. Este grupo puede estar formado por varios elementos iguales o diferentes.
Es decir, le podemos asignar por ejemplo el mismo color a un párrafo y aun titular que son de la misma class. Su representación en la
regla comienza por un punto ( . ).
Si tenemos varios elementos en una misma página que van a compartir características a todos les asignaremos la misma class. En
cuanto a la nomenclatura de un selector class hay que seguir las mismas directrices que en el caso de los id.
Ejercicio: Crea tu primer selector class
En el ejemplo vamos a crear una clase naranja que vamos a aplicar a un h2 y a un párrafo. Como en el ejemplo anterior puedes usar
solo el archivo HTML, aunque si lo prefieres puedes trabajar también desde el archivo externo enlazado.
Asigna estilo a los párrafos y al título. Luego declara la regla para la clase naranja.
p, h2{
color: purple;
}
.naranja{
color: orange;
}
Dentro del BODY del HTML añade un h2 y varios párrafos. Asigna la clase naranja al título y a uno de los párrafos.
Si ya tienes el resultado y tanto el título como el párrafo se ven de color naranja, prueba a cambiar el orden de las reglas como en el
ejemplo de los id. Verás que sigue dando el mismo resultado. Las clases hacen una selección de un grupo y sus reglas priorizan
sobre el resto.
h2{
font-size: 30px;
color: white;
padding: 10px;
background: black;
display: inline;
}
p, span{
color: black;
font-size: 18px;
}
#rojo{
color: red;
background: silver;
}
.naranja{
color: orange;
}
.cursiva{
font-style: oblique;
}
.destacado{
text-transform: uppercase;
font-size: 20px;
}
Desde las reglas hemos aplicado a los párrafos, título y span unas propiedades y valores generales desde distintas reglas. Si no conoces
la etiqueta <span> </span> de HTML enseguida descubrirás para qué se usa.
Vamos a seleccionar un texto largo para poder aplicar estas reglas tan variadas. Partimos de que todo el texto es negro.
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt...</p>
Primero comprueba el resultado ejecutando el archivo HTML en el navegador, que será algo así:
Vamos con los ejercicios.
En el primer ejemplo vamos a combinar una clase y un id para el titular H2. El texto del título pasará a ser rojo con el fondo en gris y
las letras en mayúsculas.
Como ya hemos asignado el id a un elemento no podemos hacerlo para otro. No así con la clase que vamos a asignarla a tantos
elementos como queramos.
Ejecuta el archivo en el navegador para ir viendo los cambios que se irán produciendo.
Sin borrar el trabajo realizado en el ejemplo anterior, decide a qué párrafo vas a asignarle dos clases. El párrafo pasará a estar en
cursiva y será de color naranja.
<p class="cursiva naranja">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
Fíjate que para añadir dos clases las hemos separado por un espacio en blanco dentro del mismo atributo class. Puedes asignar la
cantidad de clase que necesites siempre que respetes esta nomenclatura.
Como en el caso anterior no modifiques nada de lo que has hecho y usa otro párrafo para el ejemplo.
La siguiente práctica consistirá en añadir una clase a un párrafo y cambiar de color una parte sobrescribiendo la regla en línea.
<p class="cursiva naranja">Nulla consequat massa quis enim. <span style="color:green;">Donec pede
justo</span>, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo.</p>
A pesar de que las clases aplicadas al párrafo le obligan a un cierto comportamiento, la etiqueta HTML <span> crea otro elemento
dentro del párrafo al que no le afectará en nada y nos permitirá añadir nuevo estilo a un fragmento de este.
Si todo ha ido bien el resultado de tu personalización durante los ejercicios debe quedar así:
Para los casos en que necesitemos seleccionar un elemento contenido en otro la sintaxis será:
p span{
color: silver;
}
En este caso hemos seleccionado a todos los span que están dentro de cualquier párrafo.
¿Pero qué pasa si no quieres seleccionarlos a todos y solo quieres seleccionar una parte de ellos?
Si pensabas que habíamos agotado las posibilidades de los selectores id y class, estabas equivocado. Veamos qué más cosas podemos
hacer con ellos.
Gracias a este tipo de selección tenemos acceso a elementos que se encuentran dentro de otros solo si tienen el atributo de una cierta
clase. Evitamos crear nuevas clases a esos elementos porque podemos seleccionarlos de otra manera.
Por ejemplo tenemos un párrafo de class=”rojo” y dentro un span de class=”amarillo”. En el código HTML sería:
.amarillo{
color: yellow;
}
pero nos ha costado crear una regla nueva y añadirle el atributo al span. Imagina que tienes decenas de span de esta clase entre el
código. La forma óptima de seleccionarlos sería no asignándoles una clase en el código HTML…
<p class="rojo">Este párrafo es de clase rojo y tiene un <span>span sin ninguna clase</span></p>
.rojo span{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
.destacado span{
color:red;
}
</style>
</head>
<body>
<h2>El ingenioso hidalgo Don Quijote de la Mancha</h2>
<p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que
<span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
</p>
<p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los
<span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los
<span>domingos</span>, consumían las tres partes de su hacienda.</p>
<p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus
pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
</body>
</html>
Si te fijas a pesar de existir otros span dentro de los párrafos, solo se han visto afectados por la regla los span que están dentro de un
elemento de class=”destacado”. Y nos da igual si son párrafos u otro tipo de elemento.
Prueba tu mismo a añadirle la class=”destacado” también al título h2 y ponle dentro un span. También será de color rojo.
Ahora la pregunta es la siguiente: ¿Cómo selecciono un elemento que está dentro de otro específico que tiene asignada una clase, y no
en todos los demás de esa misma clase?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
.destacado span{
color:red;
}
</style>
</head>
<body>
<h2 class="destacado">El ingenioso hidalgo <span>Don Quijote de la Mancha</span></h2>
<p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que
<span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
</p>
<p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los
<span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los
<span>domingos</span>, consumían las tres partes de su hacienda.</p>
<p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus
pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
</body>
</html>
p.destacado span{
color: red;
}
Cuando ejecutes tu archivo en el navegador verás que al span de la título h2 ya no se ve afectado, y solo lo hacen los span que están
dentro del elemento class=”destacado” si es un párrafo.
Practica con este ejemplo afectando solo al span que está dentro del título h2.
Para finalizar al artículo te voy aponer a prueba y no te daré la solución a menos que la pidas, aunque no creo que a estas alturas haga
falta. Debes localizar el span que está en el primer párrafo y colorearlo de rojo. Te dejo el código HTML y una regla aplicada para que
añadas otra que la sobrescriba.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
div p {
color:black;
}
CREA TU REGLA AQUÍ{
color:red;
}
</style>
</head>
<body>
<div id="principal">
<h2>Ejercicio final del capítulo</h2>
<p class="conSpan">En este ejercício debes localizar <span>este span</span> dentro de un párrafo</p>
<p>Pero no a <span>este otro span</span> dentro de este párrafo</p>
</div>
</body>
</html>
Todas estas selecciones discriminatorias que hemos hecho con las clases podemos hacerlas con los id.
Evidentemente solo existirá un elemento con el mismo nombre de atributo id en cada página. Pero si estamos usando un archivo
externo que afecte a varios documentos HTML la cosa cambia, ya que se puede repetir el nombre de id si está en páginas diferentes.
Por ejemplo en la home de la web, en la página de contacto, en la de servicios…
Te falta conocer la lista de propiedades CSS que permiten manipular elementos HTML. Es posible que no lo hayas pensado
porque te he ido guiando por los ejemplos, pero existen muchas más propiedades CSS que podemos usar durante el diseño de una
página web.
Aunque te recomiendo que dejes su lectura de momento, puedes descargar el archivo con la lista de propiedades CSS desde aquí en
formato PDF.
Ahora que ya sabemos cómo aplicar estilo de diferentes formas, es importante aprender qué propiedades CSS básicas pueden
modificar a un elemento HTML.
Desde dentro y hacia afuera las propiedades CSS más comunes son las siguientes:
Podemos afectar a los elementos con las propiedades de forma general (para los 4 lados), o de forma individual para cada uno de los
lados asignando medidas diferentes. Incluso disponemos de un atajo.
Del mismo modo que tratamos el padding podemos implementar el margin y el border.
Como hacemos siempre vamos a aprender CSS desde cero practicando lo que acabamos de ver. Te hace falta utilizar los mismos
archivos HTML y CSS de anteriores tutoriales. Si has estado trabajando con ellos y quieres descargarlos de nuevo en su estado original
puedes descargar desde aquí el archivo HTML y desde aquí el archivo CSS.
Puesto que el padding no se visualiza necesitamos poner color de fondo a nuestro elemento, que por tradición va a ser un párrafo.
En nuestro archivo CSS externo creamos una regla para aplicar color de fondo y padding al párrafo:
p{
background: #2E9AFE;
padding: 15px;}
Y en el archivo HTML escribimos un párrafo y como ya sabemos también añadimos color al texto en línea.
Te estarás preguntando por qué el fondo azul ocupa todo el ancho y no se ajusta al texto. Muchos elementos HTML llamados de
bloque se muestran ocupando líneas completas . Para que un elemento h1, h2, h3, h4, h5, h6 o párrafo se ajuste al texto deberás
aplicarle la propiedad display:inline-block.
Para seguir practicando, al mismo párrafo asígnale a cada lado diferentes valores de padding.
p{
background: #2E9AFE;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 30px;
display: inline-block;
}
O lo que es lo mismo:
p{
background: #2E9AFE;
padding: 25px 15px 20px 30px;
display: inline-block;
}
Párrafo con color de fondo y diferentes medidas de padding
Los bordes por defecto son transparentes y delimitan el relleno (padding) de un elemento. Se les puede asignar grosor, color y tipo.
Veamos cómo:
p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 2px solid #FE9A2E;
}
Además de el color y el borde podemos decidir el tipo que queremos. En el ejemplo anterior hemos aplicado al borde un estilo solid, y
ahora vamos a aplicar otros estilos.
p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px dashed #FE9A2E;
}
Párrafo con fondo, padding y borde
Sigue practicando y dale otros estilos al borde. Puedes descubrirlos tú mismo asignando los valores double, inset, outset y dotted.
Por ejemplo:
p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px outset #FE9A2E;
}
Como en el caso del margin y el padding, podemos asignar borde solo a uno de los lados por ejemplo para destacar un texto.
p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}
y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo
electrónico.
Vamos a comentar la regla del ejercicio anterior haciendo que el elemento <p> no se vea afectado por ninguna regla.
/*
p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}
*/
También puedes ocultar una o varias de las sentencias. Te hubiera venido muy bien en el ejercicio anterior para ir conectando y
desconectando los diferentes tipos de bordes:
p{
background: #fcfcfc;
padding:15px;
display: inline-block;
/* border-left: 5px solid #FE9A2E; */
/* border-left: 5px double #FE9A2E; */
/* border-left: 5px inset #FE9A2E; */
/* border-left: 5px outset #FE9A2E; */
border-left: 5px dotted #FE9A2E;
font-weight: bold;
}
La sentencia !important
Nos encontraremos situaciones en que por diversas causas una regla no surta efecto. Bien porque hayamos asignado estilo con un
selector que priorice sobre la actual, o porque estemos manipulando código en que hayan usado la sentencia !important para evitar
un cambio sobre una propiedad CSS. En estos casos usaremos !important.
Cuidado no abuses, porque la sentencia !important solo se anula con otra sentencia !important.
Ejercicio: ¿cuándo y cómo usar !important?
Si estamos modificando código ya programado, por ejemplo en una web realizada con plantilla, los programadores quizá hayan
decidido que algún elemento se muestre de una forma especial mediante su selección con selectores anidados.
En el ejemplo, el autor a decidido que todos los elementos <span> contenidos en un <p> que estén dentro de un <div> de clase general
se muestren de color rojo:
.general p span{
color: red;
}
Por mucho que nosotros añadamos una nueva regla posteriormente, los <span> no se verán afectados y seguirán siendo de color rojo.
.general p span{
color: red;
}
span{
color: green;
}
Para que la regla inicial en la que se ha utilizado un selector con elementos anidados sea sobrescrita, deberemos utilizar !important.
.general p span{
color: red;
}
span{
color: green !important;
}
Aquí la solución sería tan sencilla como eliminar la primera regla, pero puede ocurrir que las reglas estén en diferentes archivos y que
no sepas desde cuál se está enviando la orden. En vez de estar navegando por los archivos CSS de tu web en busca de la dichosa regla,
esta sería la solución.
p{
color: black!important;
}
Esto hará que por mucho que asignemos otros colores a los párrafos siempre se muestren negros. Para anular al primero, tendremos
que añadir un segundo !important a la regla posterior.
Haz una copia de tu archivo HTML y cámbiale el nombre para tener dos archivos. Los dos documentos estarán enlazados con el
archivo CSS externo que tienen la sentencia !important que has pegado hace un momento.
p{
color: silver;
}
Ahora añade la sentencia !important a uno de los archivos HTML. Al que quieras que sea de color gris.
p{
color: silver!important;
}
Selector HOVER
No podemos aprender CSS sin conocer los efectos que genera el selector hover ¿Te has fijado que al ir a clicar sobre un botón suele
cambiar de color? Recurriendo al efecto hover podrás crear sencillas animaciones que cambian temporalmente una regla CSS por
otra.
Un enlace que por defecto se muestra en azul, en el ejemplo vamos a hacer que se muestre verde.
a{
color: green;
}
<a href="http://undominio.com/url-a-la-que-apunta-el-enlace">Texto del enlace</a>
a:hover{
color: red;
}
En el archivo CSS tendrás que añadir las dos reglas, una para su comportamiento normal y otra para su comportamiento con hover, que
siempre irá en segundo lugar.
a{
color: green;
}
a:hover{
color: red;
}
El selector hover puede afectar a cualquier elemento HTML cambiando su estilo de forma temporal, siendo capaz de crear
animaciones más complejas con la propiedad transition.
Como el objetivo para estudiar y aprender CSS es practicar lo aprendido y aplicarlo a nuestra web, esta es la sección del tutorial que
más te va a gustar. Es la parte donde aplicando lo aprendido vas a ver los resultados de tanto esfuerzo.
Vamos a crear nuestro primer botón aplicando técnicas que hemos aprendido durante el manual.
Como sabes nos hacen falta dos reglas, una para el enlace estándar y otra para el enlace con selector hover. El resultado que queremos
es este.
Las reglas que debes aplicar desde el HEAD o tu documento CSS externo son:
#ejemploHover1{
padding: 15px 20px;
display: inline-block;
background: #91b4c0;
color: white;
border-radius: 6px;
}
#ejemploHover1:hover{
background: #66cdaa;
}
Ahora por tu cuenta haz que cambie también el color del texto, añadiendo una nueva sentencia al selector. Después crea otros botones
con diferente id y prueba con otros estilos.
Es el momento de ir un poco más allá y hacer una animación suave en el botón. Pega este código en tu archivo.
#ejemploHover2{
padding: 15px 20px;
display: inline-block;
background: #ff0081;
color: white;
-webkit-transition: background 1s;/* PARA VERSIONES 3.1 A 6.0 DE SAFARI */
transition: background 1s;
}
#ejemploHover2:hover{
background: #524d9c;
}
#ejemploHover3{
padding: 15px 20px;
display: inline-block;
background: #464646;
color: white;
-webkit-transition: background 0.8s, color 0.8s;
transition: background 0.8s, color 0.8s;
}
#ejemploHover3:hover{
background: silver;
color: #464646;
}
<a id="ejemploHover3" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>
Como orientación vamos a ver algunos ejemplos con código incluido que te serán de ayuda y seguro incluirás en tu web.
Observa que algunas veces hay que aplicar estilos adaptados a los diferentes navegadores. No todos entenderán este tipo de sentencias
CSS genéricas.