Skip to content

Nociones básicas de CSS

Written by

Jessyca

Como parte de las nociones básicas de CSS, lo que significa “Hoja de estilos en cascada”, se describe un lenguaje mediante el cual se determina cómo se mostrarán los elementos una HTML en la pantalla de un dispositivo. Esto permite tener el control del diseño empleado en varias páginas de sitios web al mismo tiempo, lo que significa que las hojas de estilo serán almacenadas en archivos tipo CSS.

CSS

Ventaja de emplear CSS

Cuando empleas CSS tiene el completo control del estilo de tus páginas en cuanto a disposición, diseño o sus variaciones al ser visualizadas en el ordenador, móvil o tablet; ya que su tamaño se adaptará al tipo de pantalla mediante la cual se está accediendo.

Como se sabe, el lenguaje HTML describe el contenido de una página, pero si le deseas proporcionar una determinada fuente, color o estilo, necesitas aplicar lenguaje CSS. Adicionalmente esto te ahorra tiempo y dinero, ya que se guardan en archivos externos, con lo que te ofrece la posibilidad de poder cambiar todo el aspecto de tu sitio web con tan solo cambiar el archivo.css de forma fácil y segura.

¿Cómo se inserta un archivo CSS?

Las hojas de estilo CSS pueden insertarse de tres maneras: mediante una hoja de estilo externa, hoja de estilo interna o estilo en línea; cada una de ellas con sus propios parámetros, tal como se indica a continuación:

Hoja de estilo externa

Este tipo de hoja CSS te ofrece la posibilidad de cambiar el aspecto de tu web, con tan solo cambiar el archivo. Solo es necesario que se incluya una referencia a esta hoja empleando por ejemplo <link> en la sección de <head>; gráficamente la instrucción quedaría tal como sigue:

<link rel=”stylesheet” type=”text/css” href=”miestilo.css”>

Esto se escribe dentro del editor de texto, pero necesita ser guardado indicando la extensión .css, sin que contenga ningún tipo de etiqueta de las empleadas para el lenguaje HTML.

Hoja de estilo interna

Generalmente son empleadas para un estilo único, que es definido dentro de la propia página HTML siguiendo instrucciones como precisas como <head> y <style>, entre otras.

Hoja de estilo en línea

Este tipo de estilo se emplea para un solo elemento, añadiendo el atributo a dicho elemento de forma específica y otorgándole algunas propiedades CSS, tal como se indica en el siguiente ejemplo:

<h1 style=”color:red;margin-left:30px;”>Esto es un estilo en linea</h1>

Cualquier tipo de estilo que sea empleado seguirá un orden en cascada, con criterios de prioridad dentro de los cuales se ha establecido que el estilo en línea estará formando parte de un elemento HTML; mientras que las hojas tanto internas como externas, serán parte de la sección de cabecera. Pero si no es establecido en ninguno de ellos, se emplearán las que vienen por defecto en el propio navegador.

Reglas para el uso de CSS

Existen formas de sintaxis que son parte de las reglas de escritura para los estilos CSS, dentro de las cuales se deberá contar con un selector y un bloque de declaración.

El selector hace referencia al elemento HTML, como por ejemplo h2, lo que indica el tamaño de la letra o la ubicación de un contenido al que le estás aplicando un estilo; pero el bloque de declaración se forma por el nombre de una propiedad y su valor separados por dos puntos.

Una declaración dentro del lenguaje CSS deberá siempre terminar con un punto y coma, y estar rodeado por llaves. Recuerda que se trata de un lenguaje de programación.

Si deseas que un texto sea, por ejemplo, azul y centrado es necesario aplicar el lenguaje CSS que indique esta característica:

p {color: blue;text-align: center;}

Como puedes notar, las nociones sobre el manejo de un lenguaje CSS son bastante amplias y pueden requerir obtener toda una preparación dentro del campo de la programación; pero aquí hemos ofrecido algunas nociones básicas para que tengas una idea de qué se trata y te animes a probarlo cuando tengas la posibilidad de hacerlo.

Previous article

¿Cómo crear una contraseña segura?

Next article

¿Cómo contratar a un desarrollador web?

Join the discussion

Deja una respuesta