CSS3: Estructura, Códigos y Ejemplos + PDF

 

CSS3 ¿Qué es?

 

Los códigos CSS o Cascade Style Sheet, es un lenguaje de etiquetas que funciona en conjunto con HTML. Los códigos CSS se encargan de editar visualmente el contenido/ estilo de una página web, es decir, colores, tipografías, tamaños, etc.

HTML crea el contenido de una página web, CSS edita el estilo de dicho contenido

Los códigos CSS se asocian a elementos HTML, individualmente o en conjunto, para ser editados. La estructura que puede tener un código CSS se explica a continuación.

Estructura de los códigos CSS

 

Los códigos CSS siguen una estructura, como dije anteriormente, de enlazado con elementos HTML, los cuales necesitan ser nombrados en la hoja de estilos CSS

La estructura de este tipo de códigos es la siguiente:

Estructura básica

elemento{

propiedad: Valor;

propiedad: Valor;

propiedad: Valor;

propiedad: Valor;

}

Ejemplo 1

header{

width: 100%;

height: 50px;

background: red;

}

 

Ejemplo 2

div{

width: 50px;

height: 50px;

margin: 20px;

background: blue;

}

Se podrían poner tantas propiedades como se quisiera para un mismo elemento HTML. 

Cada «;» es el cierre de esa propiedad en concreto. Mientras que las llaves «{}» hacen referencia a la apertura del elemento para ser  editado y al cierre de este. 

De los códigos en sí hablaremos más adelante. Continuamos con el enlace de la hoja de estilos al HTML

Enlazar archivo CSS a HTML

 

Este es un factor imprescindible para editar el estilo de una página web con CSS.

Cuando diseñas una página web, tendrás mínimo dos archivos, el HTML y el CSS, ¿Cómo podemos hacer para que los cambios que yo haga en mi hoja de estilos se reflejen realmente en la web? Para ello, hay que enlazar ambos documentos con el siguiente código:

<link rel=»stylesheet» type=»text/css» href=»el nombre de tu hoja de estilos + formato»>

RECUERDA: Después del nombre de la hoja de estilos de tu CSS, debes poner obligatoriamente el formato, en este caso, .css

Se añade en el archivo HTML dentro del head. Una vez realizado lo anterior, ya puedes empezar a editar los estilos de la página web con tu código CSS.

PD: Para un Diseño Web WordPress no es necesario este paso, ya que el propio CMS te permite editar los códigos CSS desde el personalizador. 

Sistema Normalize

 

Es importante comprender que, en una página web no sólo actúa el código CSS del propio diseñador, existen otros códigos, que además, se imponen a los del disñador. La jerarquía se presenta en la siguiente imagen.

Normalize es un archivo CSS. Sirve para que tu hoja de estilos CSS, haga caso únicamente a lo que el diseñador le está indicando, para que si se indica que el ancho de una página sea del 100%, que se cumpla por encima de los estilos del navegador o del propio usuario. 

Una vez que se tenga el archivo normalize descargado en una carpeta local determinada (se recomienda que sea la misma carpeta donde se encuentra el HTML, para acortar la ruta). Añadir en el head del HTML el siguiente código para que se enlace correctamente el archivo normalize. 

<link rel=»stylesheet» type=»text/css» href=»el nombre del archivo normalize+ formato»>

En este caso, el formato también sería .css , clicando abajo puedes descargar todo el estilo CSS correspondiente al sistema Normalize.

Consejos para mantener un formato adecuado de escritura

  • Indentar los códigos CSS, dejando bien claro quien es el padre del elemento, y quien el hijo.
  • Poner anotaciones en las hojas de estilo CSS. Así logramos dejar claro que es cada elemento y evitamos perdernos entre tanto código. Para poder escribir en el editor de texto sin que afecte a los resultados, se debe poner los siguientes parámetros. /*     */ ( entre esos dos parámetros, podéis escribir lo que queráis y no afectará en nada)
  • Editar el CSS en el mismo orden del HTML. Empezar por el header e ir bajando en el mismo orden en el que está escrito el HTML. 

Prefijos de Navegadores

Es muy común que a ciertos códigos CSS sea necesario añadirles el prefijo del navegador que estés usando, para poder apreciar los cambios. Si en algún momento los códigos no se aplican, prueba a poner el prefijo de tu navegador:

 

Prefijos

 

-webkit-

Google Chrome, Safari, Navegador Android

-moz-

Firefox

-o-

Opera

-ms-

Internet Explorer, Edge

-khtml-

Konqueror

Códigos CSS

Selectores, ID y Class

  • Selectores:

Los selectores son propiedades importantes para el lenguaje CSS, que nos permite seleccionar específicamente el elemento que queremos editar. Ejemplo:

 

h2{

color:red;

}

 

Si aplicamos el código anterior, todos los h2 de nuestra página web van a cambiar a un color rojo.

 

Selector 1:  Vamos a ver el primer selector posible. Es de los selectores más generales. Por ejemplo, si tienes un título H2 dentro de tu cabezera (header) y sólo quieres cambiar el formato de ese h2, entonces puedes aplicar el siguiente código, haciendo referencia al selector «header»:

 

header h2{

color:red;

}

 

Selector 2:  Este selector serviría para cambiar varios elementos en conjunto dentro de un mismo apartado del HTML, en este ejemplo, el «header». Con el siguiente código CSS, cambiaría todos los h1 y h2 que estén dentro de la cabecera.

 

header h1,h2{

color:red;

}

 

  • ID:

El selector ID es uno de los selectores con mayor prioridad para los códigos CSS. Es único e irrepetible, sólo se puede asignar un elemento a un mismo ID.

Primero debes agregar tu ID al elemento HTML y luego nombrarlo en la hoja de estilos CSS.

En HTML se debe poner el identificador dentro del elemento, en este caso vamos a ver un ejemplo con un párrafo, sería así.

 

<p id=»prueba»> El párrafo que quieras </p>

 

Para hacer referencia a ese identificar en la hoja de estilos CSS y sólo editar el elemento que contiene el ID, se haría así:

 

#prueba{

width:50px;

todo el código que quieras;

}

 

Como puedes ver, en la hoja HTML de la izquierda, el segundo párrafo (p) tiene el identificador «carlos», y en la hoja de estilos CSS le di a todos los párrafos los comandos para que cambien a color rojo. Sin embargo, en el párrafo que contiene el ID prevalece, al indicarle que cambie de color azul, omite la llamada a los párrafos estandar, y hace caso a lo impuesto en el Identificador.

 

  • Class:

El selector CLASS funciona de manera parecida al ID, sin embargo, tiene menos prioridad y pueden existir varios class con el mismo nombre, es decir, no es único. 

En el HTML se debe poner la clase (Class) dentro del elemento, igual que lo hicimos con ID. Vamos a ver un ejemplo con un párrafo.

 

<p class= «hola»>

el párrafo que quieras

</p>

Para hacer referencia a esa clase en la hoja de estilos CSS, se debe nombrar así:

 

.hola{

el código que quieras escribir

}

En este caso ha sido posible seleccionar varios elementos a la vez gracias al parámetro CLASS. Todos los párrafos tienen la misma clase «carlos» por eso, han sido todos editados visualmente.

 

Medidas Relativas

Son medidas adaptables que cambian en función de diferentes factores, por ejemplo, se adaptan dependiendo del tamaño de la pantalla. Los píxeles son medidas relativas. un ejemplo de código con medidas relativas sería el siguiente:

 

body{

font-size: 14px;

}

 

Con el código anterior hemos establecido que por norma general, a no ser que se diga lo contrario, el tamaño de la fuente va a ser de 14px.

 

Medidas Absolutas

Las medidas absolutas no se adaptan a las diferentes pantallas, 5cm van a ser 5cm SIEMPRE. sea cual sea la resolución de la pantalla del usuario.

Para pulgadas

p{

font-size: 5in;

}

 

Para centímetros

p{

font-size: 5cm;

}

 

Para milímetros

body{

font-size: 5mm;

}

 

Medidas Porcentuales

Las medidas porcentuales en la hoja de estilos CSS, como su propio nombre indica, funcionan por porcentajes

Hay que tener en cuenta quien es el padre y quien el hijo de cada elemento. Si marcas con códigos CSS que un párrafo mida el 50% y este no tiene padre alguno más que el propio «Body», ese párrafo va a medir el 50% de toda la pantalla. 

En otro ejemplo, si mi párrafo es hijo de un grupo (div) que mide 100px y yo le indico que mi párrafo mida el 50%, ese párrafo pasará a medir el 50% de 100, es decir, 50px. Porque el Div es el padre del párrafo. 

Las medidas porcentuales son las que mejor se adaptan al tamaño de los dispositivos y al cambio de sus pantallas. Es la mejor opción para el Diseño Responsive

Códigos CSS3: Modelo de Caja

Padding y Margin

  • Padding: es el espacio que tienen los elementos en sí mismos, de relleno, con respecto a todos los lados de ese elemento en concreto. El área de padding en los códigos CSS es el espacio entre el contenido del elemento y su borde.
  • Margin: Son los márgenes que existen en CSS por fuera de la «caja». Es el margen que existe en tre un elemento y otros elementos independientes.

PRIMERO VEREMOS UNOS EJEMPLOS DE MARGIN Y PADDING, LUEGO, TE MOSTRARÉ LOS CÓDIGOS CSS DE CADA ELEMENTO

Ejemplo de Margin en CSS3

Div{

Width: 100px;

height: 100px;

border: 1px solid black;

margin:20px;

}

 

Los márgenes se toman con referencia, en este caso, al body, porque es su padre directo. 

Ese div (caja), aunque no lo parezca, no va a medir 100px*100px, sino que, va a medir 102px*102px. ¿Por qué?

Porque se le está sumando 1px por cada lado de los bordes sólidos. De hecho, esa caja que hemos creado, mide concretamente 142px (102 de la caja + los bordes y 20px + 20px de los márgenes). 

TODO CUENTA. Es importante tenerlo presente en los códigos CSS para el Responsive Design 

Ejemplo de Padding CSS3

Div{

Width: 100px;

height: 100px;

border: 1px solid black;

margin: 20px;

padding: 50px;

}

 

Con respecto el ejemplo anterior sobre margin en CSS, sólo hemos añadido el código para padding, y como puedes ver, la caja es más grande ahora. Esto ocurre poruqe como dije antes, padding rellena el contenido del elemento con respecto a sus bordes, es como si le hubiera añadido un relleno. 

Este div mide ahora 242 px (102px de la caja mas los bordes, 40px de margin + 100px de padding)

Tip Padding para enlaces con CSS

Cuando añadimos un Link con códigos HTML ( <a href= «###»> tu link </a> ) , ese link sólo se activaría cuando el cursor este justo encima de las letras, lo cual puede ser tedioso. En la imagen se muestra el área en la que actualmente se podría hacer click (lo podemos ver gracias al código CSS «border»)

Al añadirle 20px de padding al elemento que contiene el link (a), el área en la cual es posible hacer click aumenta. 

Para ayudarnos a ver que área ocupa cada elemento, le podemos poner un border o un background para verlo con claridad. 

Códigos CSS para Margin

Div{

margin: 20px;

}

 

Cuando se indica sólo una cifra en el comando CSS, se aplicará a todos los lados del elemento, en esta caso, esa caja tendrá 20 píxeles de margen arriba, abajo, a la izquierda y a la derecha.

En este caso, con dos cifras, la primera aplica a arriba y abajo, la segunda a izquierda y derecha del elemento

Div{

margin: 20px 50px;

}

 

Cuando se implementan cuatro medidas, el orden de aplicación va en el sentido de las agujas del reloj. (ver mejor en imagen)

Div{

margin: 20px 50px 10px 30px;

}

 

Displays

Por defecto, los elementos vienen sin la propiedad Display, por lo que un simple párrafo, ocuparía todo el ancho de la pantalla, aunque en realidad no sea así. Para evitar esto, acudimos a los códigos CSS y los diferentes DISPLAYS que existen:

Display inline-block

Con esta propiedad CSS, se consigue que los elementos ocupen el tamaño justo, y que además, a medida que no se puedan colocar a lo ancho, pasarán automáticamente hacia debajo, creando columnas. 

Esta propiedad del lenguaje de etiquetas CSS, es fundamental para el responsive design

elemento{

display: inline-block;

}

 

Display inline

A efectos prácticos, esta propiedad del CSS hace lo mismo que el Inline-block, pero sin márgenes, digamos que considera todos los párrafos y textos como una única línea, y aunque le apliques márgenes arriba y abajo, no se ajustará. Además, no hace los saltos de párrafo como los hace el inline block.

elemento{

display: inline;

}

 

  • Los párrafos naranjas no tienen la propiedad CSS «Display»
  • los párrafos azules, tienen la propiedad inline
  • los párrafos verdes, tienen la propiedad inline-block

Lenguaje de Etiquetas CSS3: Positions

Positions

Son las características CSS que establecen en que punto de la página comenzará a mostrarse el elemento HTML. Teniendo en cuenta quién es el padre del elemento al que le vamos a aplicar los «Positions»

Position Static

elemento{

position: static;

}

 

Con este comando de CSS3, se comenzará a mostrar el elemento HTML justo desde el comienzo del padre. En el caso de que el elemento al que le estamos aplicando está propiedad, ya sea el padre, entonces se comenzará a pintar desde la esquina de la pantalla. Los statics no tienen en cuenta las coordenadas.

Position Relative

elemento{

position: relative;

}

 

A este comando sí le afectan las coordenadas ( aunque si no le marcamos nada, funciona igual que el Position Static)

elemento{

position: relative;

top:20px;

left:30px;

}

 

En el comando anterior, con el Position Relative marcando el CSS, le estoy diciendo al elemento que se muestre 20 px alejados de arriba (top) y 30 px alejados de la izquierda (left). Se separa de donde se le marque.

a las localizaciones, top, bottom, left y Right se le pueden dar valores negativos.

Position Absolut

elemento{

position: absolut;

}

 

Si a un HTML no le indicamos lo contrario con lenguaje CSS, este, naturalmente se colocará justo al lado o justo debajo de otro elemento HTML. En este caso, cuando un elemento tiene marca el comando CSS de Position Absolut, es como si no existieran más elementos que ese, y por lo tanto, se va a ir a la esquina superior izquierda de la pantalla. Con esto se consigue que un elemento se monte sobre otro, como si de capas se tratase.

Position Fixed

Este tipo de posicionamiento CSS, siempre va a establecer sus coordenadas con respecto al body, sin tener presente al padre. 

elemento{

position: fixed;

top: 10px;

}

 

Con esto se consigue, que ese párrafo se aleje de la parte de arriba del body (de la pantalla) 10px.

Además, con el position fixed el elemento se queda «fijado» (si está del todo pegado a la esquina, aunque yo baje con el scroll, se va a venir bajando conmigo, seguirá apareciendo en la esquina superior izquierda, por mucha que yo descienda en la página. Muy usado para los menús que queremos que estén siempre visibles. 

Position Relative

Aunque el DIV grande le de la propiedad de position relative y le ordene que se pegue al top, este no lo hace porque respeta el espacio de los demás elementos. 

Position Absolute

En el mismo caso anterior, cuando al DIV más grande le marcamos una position absolute, este se superpone a los demás, deja de tenerlos en cuenta.

Z-INDEX

La propiedad CSS Z-Index, indica el orden que tiene un elemento con respecto a sus descendientes. Por norma general, un elemento sabe cual es el puesto que ocupa, tanto él como los demás, sin embargo, cuando le damos un Z-index con lenguaje CSS mayor que el de los demás elementos, este se superpone, se coloca por encima de los demás elementos. 

elemento{

position: relative;

z-index: 5;

}

 

Es obligatorio establecer con CSS un position relative y luego, el Z-index que deseemos. (A mayor Z-index en CSS, más elementos superpone.)

Siguiendo con los elementos del caso anterior, aquí tienes un ejemplo de cómo funciona el Z-index en CSS.

Pseudoelementos de códigos CSS3

Pseudoelemento

Los pseudoelementos son códigos CSS que se escriben para cada elemento.

Todo HTML tiene, de manera oculta, otros dos elementos: Before y After. Sin embargo, estos códigos no serán visibles hasta que no se indique con lenguaje CSS.

Los pseudoelementos no son seleccionables por el usuario, porque de hecho, no está escrito en HTML. A continuación, vamos a ver un ejemplo de cómo nombrar «before» y «after». 

Primero he creado dos párrafos con HTML, con dos ID únicas, «primero» y «segundo». Al primer párrafo, le he dado la propiedad after, con su debido «content» en el que escribirás lo que desee que se muestre. De ese párrafo, el usuario sólo podrá seleccionar las palabras «Hola, Bienvenidx» el resto, «al blog de Carlos González» es parte del pseudoelemento After. 

En el segundo párrafo , le he dado la propiedad Before, con el content «al blog de Carlos González» y el pseudoelemento Before, «Hola, bienvendos»

Con lenguaje CSS y las propiedades Position, se pueden mover los pseudoelementos a donde prefieras. Un after no necesariamente tiene que estar después de un elemento, al igual que un before. La posición de esos pseudoelementos, es editable. 

Pseudoclases globales de códigos CSS3

Animaciones con códigos CSS (explicación en vídeo más abajo)

Pseudoclase «HOVER»

Hover, es una pseudoclase CSS aplicable a todos los elementos HTML (textos, botones, imágenes…)

Se usa para crear una situación en el momento en el que el cursor del ratón PASA por encima de un elemento. (en smartphones, como no tenemos cursos, esta pseudoclase CSS se activaría cuando hiciéramos TAP)

p:hover{

color: green;

font-size: 20px;

font-weight: bolder;

}

 

Con el código CSS anterior, estoy indicando que cuando el cursor del usuario pase por ese párrafo, se active el HOVER, convirtiendo el párrafo en color verde, con un tamaño de fuente de 20px y se transforme en negrita. 

Pseudoclase «ACTIVE»

Esta pseudoclase del lenguaje CSS3, se activa cuando se hace click sobre un elemento. La acción dura el tiempo que el click se mantenga, una vez se suelte, la acción desaparecerá. 

div:active{

background: green;

width: 100%;

}

 

Con el código CSS anterior, estoy indicando que mientras se mantenga el click en la caja «div», se transforme en una caja con el fondo verde y que ocupe el 100% del ancho de la pantalla. 

Pseudoclase «FOCUS»

En este caso, también interaccionan los clics, sin embargo, en lugar de activarse mientras se mantiene el click, esta pseudoclase se activa cuando un elemento se encuentra seleccionado, en el momento en el que deja de estar seleccionado, se desactiva.  (el ejemplo más claro de esta pseudoclase CSS, es el link que cambia de color cuando se ha clicado sobre él)

a:focus{

color: orange;

font-size: 30px;

}

 

Con el código CSS anterior, estoy indicando que cuando ese link haya sido clicado, se convierta en un link (texto con hipervínculo) de color naranja y con un tamaño de fuente de 30px. 

EJEMPLOS DE HOVER, ACTIVE y FOCUS

Gracias a los códigos CSS, los pseudoelementos y estas pseudoclases, es posible crear animaciones en tu página web. En el próximo vídeo, voy a poner dos ejemplos de animaciones, usando las pseudoclases y atributos de CSS como transition-duration, con los que podremos realizar diferentes efectos.

Descárgate aquí los códigos CSS usados en el vídeo anterior.

¿Has llegado hasta aquí? ¡Vaya! ¡Muchas Gracias! Ahora viene tu regalo 🙂

Bueno, Como puedes ver, el lenguaje de etiquetas CSS3 es muy completo, abierto a multitud de variantes y ediciones diferentes, donde entra en juego la creatividad de cada diseñador.

Todos y cada uno de los códigos CSS de esta entrada, han sido expuestos de manera básica y superficial para que se entienda como funciona cada uno de ellos. Ahora, os toca jugar a vosotros con todas las opciones del lenguaje CSS. Podéis probar mil y una edicionas diferentes, hasta que tengáis el diseño que queráis, aunando HTML y CSS. ¡Ojo! si abusas de animaciones CSS y tienes demasiado Código inservible, afectará negativamente al posicionamiento SEO de tu web

 

y para que os ayude en vuestra labor de diseñadores en CSS…

Aquí tenéis el PDF descargable con + de 65 códigos del lenguaje CSS

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *