Como utilizar el código CSS del archivo style.css de tu web de wordpress

El código CSS es el código que se utiliza para modificar las hojas de estilo. Este código crea y define la presentación de una web hecha con HTML. El código CSS puede ubicarse en el mismo código HTML o bien en unos archivos separados del código HTML, separando de esta manera la estructura de una web de su diseño. Cuando queda definido dentro del código HTML se difinirá el código de presentación con la simbología “style”.

En este artículo vamos a explicar las funciones mas generales que se utilizan para el 90% de los casos dentro del diseño de una página web. En las webs programadas con WordPress, el diseño CSS viene por defecto en un archivo llamado style.css y nosotros únicamente tenemos que dedicarnos a hacer las modificaciones pertinentes para dejar el diseño a nuestro gusto.

style.css html codigo web

Otros artículos que te pueden interesar:

Usos y funciones del código CSS dentro del HTML

El código CSS ofrece las siguientes funciones.

  • Propiedades de tipo y tamaño de letra o fuente.
  • Define el color del texto, del fondo, del borde, sombreados, etc.
  • Define espaciado de letras, párrafos, lineas, rellenos, etc.
  • Alineaciones de imágenes, textos y otros elementos.
  • Usabilidad para diferentes tamaños de pantallas como móviles, tablets, monitores, etc.
  • Definición del atributo <div> utilizada para posicionamiento de texto y cajas.

Dentro de los themes de WordPress, encontramos el archivo style.css que es donde está ubicado todas las instrucciones del diseño de presentación de nuestra web. Si modificamos este archivo, el diseño de nuestra web cambiará.

1. Como utilizamos las hojas de estilos?

Como hemos comentado al principio de este artículo, las hojas de estilos o bien pueden ir dentro del archivo HTML o bien fuera. Se definen 3 sistemas para utilizar las hojas de estilos.

  • Dentro de una linea de texto (dentro del código HTML)
  • Definiendo una hoja de estilo en la cabecera de la página (dentro de las etiquetas <HEAD> del código HTML)
  • Definiendo la hoja de estilo de manera externa (fuera del código HTML)

Dentro de una linea de texto

El siguiente código se utiliza únicamente para definir una única linea y se coloca dentro del archivo HTML. Ejemplo:

<p style="color:blue;">
 Texto de color azul
 </p>

Definiendo una hoja de estilo en la cabecera de la página

El siguiente código se utiliza dentro de la sección HEAD y se utiliza cuando una página utiliza un único estilo. Se escribe dentro del HTML del HEAD.

La etiqueta <style type=”text/css”> se coloca dentro de las etiquetas <HEAD> </HEAD> y es donde se ponen los diferentes estilos que va a usar la página. Ejemplo:

<head>
  <style type="text/css">
    estilo1 {font:16px;}
    estilo2 {font:22px;}
  </style>
</head>


 <body>
 <estilo1>texto primero</estilo1>
 <estilo2>texto segundo</estilo2>
 </body>

Definiendo la hoja de estilo de manera externa

Este es el sistema que se utiliza cuando una misma hoja de estilos es usada en varias páginas de tu web. Modificando únicamente el archivo de estilo, se puede modificar toda la web. Los archivos de hojas de estilos utilizan la extensión .CSS.

Para explicar la hoja de estilo de manera externa, vamos a necesitar unos cuantos campos. Empezaremos en como llamar a la hoja de estilo .CSS.

2. Como llamar a la hoja de estilo .CSS

Para que una página pueda llamar al archivo de estilo .CSS que tienes en tu web, debemos de emplear el siguiente código en el <HEAD> de la página.

<head>
<link rel="stylesheet" type="text/css" href="http://www.dominio.com/archivo.css">
</head>

Cada página de tu web a de tener este código para vincular la hoja de estilo con su página.

  • En HREF colocamos la ruta completa del archivo de estilo.

3. Diferencia entre id y class

ID y CLASS son dos atributos que quedan definidos en el archivo CSS con todas sus características como tipo de letra, anchura, tamaño, color, etc. En el código HTML se coloca el nombre del atributo antes de un texto para que queden plasmadas las características que le hemos dado en el código CSS. Estos atributos son los siguientes:

  • ID
  • CLASS

Ambos son utilizados de la misma manera a excepción de,

  • El atributo ID es utilizado para un único elemento
  • El atributo CLASS es utilizado para uno o mas de un elemento

Hagamos un ejemplo:

En el archivo CSS (en wordpress sería en el archivo style.css) colocamos el siguiente código:

.tipoletra1 {font:16px/1.2em Arial,"Arial",Arial,serif;}

En el archivo donde pongo el código HTML escribimos lo siguiente:

<div class="tipoletra1">
Estoy definiendo mi primer estilo
<div>

Con esto hacemos que el texto “Estoy definiendo mi primer estilo” se va a ver con las características que hayamos puesto en el archivo style.css dentro de “.tipoletra1”. De manera, que el tipo de letra no queda definido dentro del archivo html, sino que queda definido dentro del archivo style.css. Si queremos modificar este estilo, únicamente habremos de modificar el archivo style.css.

4. Identificar id y class dentro del archivo css

El atributo ID se identifica en el archivo CSS con una almohadilla (#).

El atributo CLASS se identifica en el archivo CSS con un punto (.).

Ejemplo:

En el archivo HTML tenemos lo siguiente:

<div id="estilo1">
<div>

<div class="estilo2">
<div>

En el archivo CSS lo definiremos de la siguiente manera. Aquí podemos ver la almohadilla (#) y el punto (.).

#estilo1 {font:16px Arial,"Arial",Arial,serif;}
.estilo2 {font:16px Arial,"Arial",Arial,serif;}

El #estilo1 corresponde en el HTML a “id”. Y el .estilo2 corresponde en el HTML a “class”.

5. Asignar las mismas características del mismo tipo o misma etiqueta

Si lo que queremos es definir que todos los elementos tipo parrafo <p> irán de color amarillo, en este caso no hemos de colocar ningún punto ni ninguna almohadilla.

p {color:yellow;}

En el siguiente, definimos que todas las etiquetas h1 y h2 van a ir de de tamaño de letra de 20px.

h1, h2{font:20px;}

Las etiquetas tipo <p>, <a>, <h1>, <h2>, <span>, <ul>, <li>, etc., no hace falta poner ni punto ni almohadilla. El punto y la almohadilla se utiliza unicamente para CLASS y ID respectivamente.

6. Como asignar dos características iguales a dos atributos diferentes

Es posible asignar dos características iguales a dos atributos diferentes. Para ello hemos de colocar dos o mas atributos delante de las características del estilo en el archivo CSS, y estos atributos han de estar separados por una coma. En el ejemplo siguiente tenemos el atributo estilo1 y el atributo estilo2 que tienen las mismas características.

.estilo1, .estilo2 {font:16px;}

Si ahora lo que queremos es que los dos estilos tengan altura de letra 16px pero que el estilo1 sea de color rojo y el estilo2 de color azul, lo colocaremos de la siguiente manera.

.estilo1, .estilo2 {font:16px;}
.estilo1 {color:red;}
.estilo2 {color:blue;}

La primera linea del código define los dos estilos. Las otras dos lineas definen otras características de cada estilo.

7. Como asignar un estilo a un elemento con un atributo dentro de otro

Dentro del código CSS podemos asignar un estilo a un elemento que tenga un atributo dentro de otro atributos. Para ello, dentro de un mismo estilo, hemos de poner dos elementos separados por un espacio, sin poner una coma. Imaginemos que tenemos el siguiente código.

<p>
<h2>texto 1</h2>
<span>texto 2</span>
</p>

El “texto 1” está dentro del atributo <h2> y <p>. O sea que está definido por dos atributos.

El “texto 2” está dentro del atributo <span> y <p>. O sea que también está definido por dos atributos.

El orden es importante mantenerlo. En el código siguiente vemos como colocamos p y luego h2. Esto es porque h2 está en el código HTML mas adentro.

Si ahora definimos el siguiente código, quedará afectado únicamente el “texto 1”. Esto es porque hemos puesto el atributo “p” y el atributo “h2” separados sin coma.

p h2{font:16px;}

Si hubiéramos colocado el código de abajo, quedaría afectado todos los elementos que están dentro de “p” y a la vez a todos los elementos que están dentro de “h2”, o sea que quedaría afectado tanto el “texto 1” como el “texto 2”. Esto es porque le hemos puesto una coma, y al poner la coma este atributo afecta a todos los elementos que están dentro de <p> y de <h2>.

p, h2{font:16px;}

8. Como asignar un estilo a un elemento con tres o mas atributos

También cabe la posibilidad que queramos atribuir un estilo a un elemento que esta dentro de otros elementos.

<p>
  <h2>
    <span class="estilo1">
      Texto para mostrar
    </span>
  </h2>
</p>

Si queremos que el “texto para mostrar” sea de color rojo, habremos de colocar el siguiente código dentro del archivo CSS.

p h2 span .estilo1 {color:red;}

En estos casos es muy importante asignar el orden adecuado, si hubiéramos colocado h2 delante de la p, el texto ya no se mostraría de color rojo.

9. Asignar todos los elementos con dos atributos

También cabe la posibilidad de asignar un estilo a un elemento que incluya dos atributos. En el ejemplo siguiente tenemos el atributo <p> y el atributo <class=”estilo1″> en la misma linea.

<p class="estilo1">texto1</p>

En este caso, para que el texto1 quede de color rojo, hemos de colocar el código junto, o sea p + .estilo1 todo junto, sin separación. Nos quedaría de la siguiente manera.

p.estilo1 {color:red;}

10. Ejemplo de combinaciones de atributos

Para aclarar un poco el tema, añadimos un par de ejemplos.

Ejemplo nº1

Con el siguiente código asignamos la altura de letra 18px a todos los elementos con class=”estilo3″ que estén dentro de un elemento con class=”estilo1″.

Código a colocar en archivo CSS

.estilo1 . estilo3 {font:18px;}

Código en HTML

<p class="estilo1">
    <p class="estilo2">
       Texto con altura 18px
    </p>
</p>

Ejemplo nº2

p#estilo4 span.estilo2 {color:blue;}

En este caso lo que hacemos es asignar el color rojos a aquellos elementos tipo <span> con un class=”estilo2″ y que a la vez estén dentro del un elemento tipo <p> con id=”estilo4″.

El código que habríamos de poner el el archivo HTML sería el siguiente.

<p id="estilo4">
    <span class="estilo2">
        Texto de color azul
    </span>
</p>

11. Utilización de código CSS para móviles, tablets y monitores

Dentro del código CSS, existe la posibilidad de adaptar tu web según el tamaño de la pantalla donde el usuario esté visualizando la web. Según las dimensiones de tu dispositivo o pantalla, podemos indicar en el código CSS que muestre tu web de una manera u otra. La función que se utiliza para este tipo de adaptación es la siguiente:

@media

@media (max-width:940px)
{
.estilo1 {width:90%;}
}

La función que acabamos de poner se aplican a todos los dispositivos como monitores, televisores, proyectores, impresoras, ordenadores, móviles. En este caso hemos indicado que es aplicable para dispositivos de un máximo de 940 píxeles.

El ejemplo anterior está muy indicado para blogs o webs que suelen tener una sidebar o barra lateral y queremos eliminarla cuando el tamaño de la pantalla es ya demasiado pequeño. En este caso, la anchura de la página principal hacemos que pase a una anchura de 90% como hemos visto. Anteriormente ha de tener una anchura menor.

Dentro de esta función existen muchas funciones que se pueden adaptar a dispositivos sistema braille, dispositivos para impresoras, etc. La mas utilizada es para dispositivos de pantallas de ordenadores (incluye tablets, móviles y monitores). La función sería la siguiente:

@media screen

Con esta función podemos indicar que aplique ciertos criterios únicamente a ordenadores, tablets y móviles. Dejando el resto (proyectores, televisores, impresoras, etc.) sin que queden afectadas. Con el ejemplo siguiente, le estamos diciendo que cuando un ordenador, tablet o móvil mida menos de 940 píxeles, que aplique una anchura en el estilo1 del 90%.

@media screen and (max-width:940px)
{
.estilo1 {width:90%;}
}

Ahora, lo que queremos es aplicar una serie de estilos para un dispositivo de anchura mínima de 800 píxeles o a un dispositivo que esté en posición horizontal. Aplicaremos el siguiente código.

@media (min-width: 800px), handheld and (orientation: landscape) {....}

Como hemos puesto una coma, afecta tanto a todos los dispositivos colocados horizontalmente y a todos los dispositivos con mas de 800 píxeles.

12. Funciones de @media

Aquí os dejamos todas las funciones que se utilizan para @media:

aspect-ratio La relación entre la anchura y la altura de la ventana gráfica
color El número de bits por componente de color para el dispositivo de salida
color-index El número de colores que el dispositivo puede mostrar
device-aspect-ratio La relación entre la anchura y la altura del dispositivo
device-height La altura del dispositivo
device-width La anchura del dispositivo
grid Si el dispositivo es una rejilla o de mapa de bits
height La altura de la ventana gráfica
max-aspect-ratio La relación máxima entre la anchura y la altura de la zona de visualización
max-color El número máximo de bits por componente de color para el dispositivo de salida
max-color-index El número máximo de colores que el dispositivo puede mostrar
max-device-aspect-ratio La relación máxima entre la anchura y la altura del dispositivo
max-device-height La altura máxima del dispositivo
max-device-width La anchura máxima del dispositivo
max-height La altura máxima de la zona de visualización (como una ventana del navegador)
max-monochrome El número máximo de bits por “color” en un dispositivo monocromático (escala de grises)
max-resolution La resolución máxima del dispositivo, utilizando ppp o dpcm
max-width La anchura máxima de la zona de visualización (como una ventana del navegador)
min-aspect-ratio La relación mínima entre la anchura y la altura de la zona de visualización
min-color El número mínimo de bits por componente de color para el dispositivo de salida
min-color-index El número mínimo de colores que el dispositivo puede mostrar
min-device-aspect-ratio La relación mínima entre la anchura y la altura del dispositivo
min-device-width La anchura mínima del dispositivo
min-device-height La altura mínima del dispositivo
min-height La altura mínima de la zona de visualización (como una ventana del navegador)
min-monochrome El número mínimo de bits por “color” en un dispositivo monocromático (escala de grises)
min-resolution La resolución mínima del dispositivo, utilizando ppp o dpcm
min-width La anchura mínima de la zona de visualización (como una ventana del navegador)
monochrome El número de bits por “color” en un dispositivo monocromático (escala de grises)
orientation La orientación de la ventana gráfica (modo horizontal o vertical)
overflow-block Cuando el contenido queda desbordado esta función crea nuevos bloques
overflow-inline Cuando el contenido queda desbordado esta función crea nuevas lineas
resolution La resolución del dispositivo de salida, utilizando dpi o dpcm
scan El proceso de exploración del dispositivo de salida
update-frequency Rapidez con la que el dispositivo de salida puede modificar la apariencia del contenido (añadido en consultas de medios Nivel 4)
width El ancho de la ventana gráfica

13. Ejemplos de funciones de @media

Ejemplo nº1

En el siguiente ejemplo podemos ver como el estilo contenido_izquierdo ocupa el 62% de la pantalla y el contenido_derecho el 35% de la pantalla. Ambos estilos están colocados uno al lado del otro. Pero solo se aplica a los dispositivos de entre 1220 píxeles y 601 píxeles. Cuando el dispositivo es igual o inferior a 600 píxeles (o sea para dispositivos pequeños tipo tablets o móviles), la anchura del contenido izquierdo pasa a ocupar toda la pantalla, el 92%. Esto obliga a que el contenido derecho quede abajo y no a la derecha.

@media only screen and (max-width: 1220px) and (min-width: 601px) {  
.contenido_izquierdo {width:62%;}
.contenido_derecho {width:35%;}
}  
@media only screen and (max-width: 600px)  {  
.contenido_izquierdo {width:92%;}
}

Ejemplo nº2

En el siguiente ejemplo de @media lo que hacemos es hacer que la altura de la letra sea de 18 píxeles cuando el dispositivo esté en posición vertical, y de 14 píxeles cuando el dispositivo esté en posición horizontal. En este caso es válido para cualquier dispositivo, desde ordenadores hasta proyectores, impresoras y televisores.

@media all and (orientation:portrait) {.estilo1{font:18px;}}
@media all and (orientation:landscape) {.estilo1{font:14px;}}

14. Funciones generales del código CSS

A continuación os indicamos la mayoría de las funciones que se utilizan en el código CSS. Al principio colocamos algunos ejemplos para indicar como han de ser utilizados estas funciones.

.estilo{font-size:18px;}
.estilo{font-family: "Times New Roman", Georgia, Serif;}
.estilo{border-bottom:1px;}
.estilo{background:transparent;}
.estilo{float:left;}

TIPO DE LETRA O FUENTE

font-family tipo de letra (fuente)
font-size tamaño
font-style inclinación (cursiva)
font-variant versalitas
font-weight grosor del trazo (negrita)

TEXTO

color color del texto
direction dirección del texto
letter-spacing espacio entre caracteres
line-height espaciado entre líneas
text-align alineación del texto
text-decoration decoración del texto
text-indent sangría de la primera línea
text-transform mayúsculas / minúsculas
unicode-bidi dirección del texto
vertical-align alineación vertical
white-space espacios en blanco, saltos de línea y wrap
word-spacing espacio entre palabras

BORDES

border cuatro bordes simultáneamente
border-top borde superior
border-right borde derecho
border-bottom borde inferior
border-left borde izquierdo
border-color color de los bordes
border-width grosor de los bordes
border-style estilos de los bordes
border-top-color color del borde superior
border-top-width grosor del borde superior
border-top-style estilo del borde superior
border-right-color color del borde derecho
border-right-width grosor del borde derecho
border-right-style estilo del borde derecho
border-bottom-color color del borde inferior
border-bottom-width grosor del borde inferior
border-bottom-style estilo del borde inferior
border-left-color color del borde izquierdo
border-left-width grosor del borde izquierdo
border-left-style estilo del borde izquierdo

MARGEN EXTERIOR

margin cuatro márgenes exterior simultáneamente
margin-top margen exterior superior
margin-right margen exterior derecho
margin-bottom margen exterior inferior
margin-left margen exterior izquierdo

PADDING

padding cuatro márgenes interiores simultáneamente
padding-top margen interior superior
padding-right margen interior derecho
padding-bottom margen interior inferior
padding-left margen interior izquierdo

FONDOS

background propiedad compuesta
background-attachment atadura de la imagen
background-color color de fondo
background-image imagen de fondo
background-position posición de la imagen de fondo
background-repeat repetición de la imagen de fondo

LISTAS

list-style propiedad compuesta
list-style-image imagen del marcador
list-style-position posición del marcador
list-style-type tipo de marcador

TABLAS

border-collapse modo de bordes
border-spacing separación entre celdas
caption-side posición de la leyenda
empty-cells borde de casillas vacías
table-layout algoritmo ancho de tabla

TAMAÑO

width anchura
min-width anchura mínima
max-width anchura máxima
height altura
min-height altura mínima
max-height anchura máxima
overflow si el contenido desborda al elemento

POSICIONAMIENTO

float modo de posicionamiento flotante
clear lado en el que no puede haber elementos flotantes
position modo de posicionamiento
top posición del borde superior del elemento
right posición del borde derecho del elemento
bottom posición del borde inferior del elemento
left posición del borde izquierdo del elemento
clip recorta el elemento
display tipo de caja
visibility visibilidad
z-index apilamiento

IMPRESORA

page-break-after salto de página después de
page-break-before salto de página antes de
page-break-inside salto de página dentro de
orphans número de líneas al final de página
widows número de líneas al principio de la página

INTERFACE DEL USUARIO

cursor tipo de cursor
outline cuatro bordes simultáneamente
outline-color color de los bordes
outline-width grosor de los bordes
outline-style estilos de los bordes

PSEUDO-ELEMENTOS

:after inserta contenido después del elemento
:before inserta contenido antes del elemento
:first-letter primera letra
:first:line primera línea de texto
content contenido generado
counter-increment incremento de contador
counter-reset puesto a cero de contador
quotes comillas

PSEUDO-CLASES

:active cuando se hace clic sobre el elemento
:first-child primer elemento hijo
:focus cuando el elemento tiene el foco
:hover cuando el ratón pasa sobre el elemento
:lang idioma
:link enlaces no visitados
:visited enlaces ya visitados

Otros artículos que te pueden interesar:

Deja un comentario

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