¿Qué es CSS?

Con este artículo aprenderás qué es CSS y cómo utilizar sus funciones básicas.

Antes de entrar en materia te recomiendo que sepas algo de HTML. Si no sabes nada de HTML puedes revisar mi artículo ¿Qué es HTML?

 ¿Qué es CSS?

El CSS o hojas de estilo de cascada (acrónimo de Cascading StyleSheets) es una herramienta magnífica para agregar estilos y diseños a las páginas HTML.

Con CSS puedes agregar a tus páginas web fondos, colores, fuentes, bordes, sombras, variaciones en la visualización de diferentes dispositivos, etc.

El CSS es muy fácil de aprender y ahorra mucho tiempo. HTML fue creado para describir el contenido de la página web, no para darle formato. CSS soluciona este problema.

¿Cómo funciona?

Un CSS se compone de reglas de estilo que son interpretadas por el navegador y luego aplicadas a los elementos correspondientes en su documento. Una regla de estilo está compuesta de tres partes

  • Selector: un selector es una etiqueta HTML en la que se aplicará un estilo. Esta podría ser cualquier etiqueta como <h1> o <mesa>, etc.
  • Propiedad: una propiedad es un tipo de atributo de etiqueta HTML. En pocas palabras, todos los atributos HTML se convierten en propiedades CSS. Podrían ser de color, borde, etc.
  • Valor: los valores se asignan a las propiedades. Por ejemplo, la propiedad del color puede tener un valor rojo o # F1F1F1, etc.

selector { propiedad : valor }

Un selector puede tener más de una propiedad. En ese caso las propiedades se separan con punto y coma ‘;’

h1 { color : red; font-size : 12px; }

El selector de elementos selecciona elementos en función del nombre del elemento.

Puede seleccionar todos los elementos <p> en una página como esta (en este caso, todos los elementos <p> se alinearán en el centro, con un color de texto rojo)

p { color:red }

El Selector de id.

El selector de id usa el atributo id de un elemento HTML para seleccionar un elemento específico.

La identificación de un elemento debe ser única dentro de una página, por lo que el selector de id se usa para seleccionar un elemento único.

Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.

La regla de estilo a continuación se aplicará al elemento HTML con id = «ejemplo1»:

#ejemplo1 { text-align: center; color: red; }

Los selectores de clase

Puede definir reglas de estilo basadas en el atributo de clase de los elementos. Todos los elementos que tienen esa clase serán formateados de acuerdo con la regla definida.

.black { color: # 000000; }

Esta regla representa el contenido en negro para cada elemento con atributo de clase establecido en negro en nuestro documento. Puedes hacerlo un poco más particular. Por ejemplo:

h1.black { color: # 000000; }

Esta regla representa el contenido en negro para solo los elementos <h1> con el atributo de clase establecido en negro.

¿Cómo lo aplico?

Ya sabes cómo escribir CSS. Ahora ¿dónde colocamos este código para que funcione?

Podemos insertar el CSS de tres maneras:

Internamente. Es forma solo funcionará para la página donde está escrito el código. Funciona de la siguiente manera:

<html>

 <head>

  <title>Ejemplo</title>

  <style type="text/css">

   body {background-color: #FF0000;}

   p {color:white;}

  </style>

 </head>

 <body>

  <p>Esta es una página con fondo rojo</p>

 </body>

</html>

En este ejemplo el fondo de la página tendrá el color #FF0000 y el texto que esté dentro de la etiqueta <p> tendrá color blanco.

Fíjense donde se colocó el código CSS. Dentro de la etiqueta <head> y con la etiqueta <style> para definir que son nuestros estilos.

En línea. Este método le asigna directamente los atributos a la etiqueta HTML donde la estamos escribiendo.

<html>

 <head>

  <title>Ejemplo</title>

 </head>

 <body style="background-color: #FF0000;">

  <p style=”color:white;”>Esta es una página con fondo rojo</p>

 </body>

</html>

Es el mismo ejemplo anterior, pero usando este método.

Externo. Podemos escribir un archivo aparte de nuestro archivo HTML para escribir todo nuestro código CSS.

El archivo externo solo tendrá los códigos que queramos para nuestras páginas.

body {background-color: #FF0000;}
p {color:white;}

Y tendrá una terminación .css

Llamaremos a ese archivo .css en nuestro archivo HTML de la siguiente manera:

<html>

 <head>

  <title>Mi documento</title>

  <link rel="stylesheet" type="text/css" href="estilos.css" />

 </head>

 <body>

  <h1>Mi primera hoja de estilo</h1>

 </body>

</html>

Noten que la llamada al archivo está dentro del atributo <head>

Podemos hacer un solo archivo de estilos y llamarlo desde múltiples páginas HTML, con lo cual nos ahorra mucho tiempo ya que no necesitamos escribir en cada una de nuestros archivos HTML el mismo código para formatear nuestra página.

Muchas veces creamos varias páginas de estilo y podemos hacer llamada de todas. Incluso podemos utilizar todos los métodos al mismo tiempo (algo que no recomiendo para nada). Pero en caso de utilizar múltiples hojas de estilo o varios métodos al mismo tiempo, ¿cómo lo entiende el navegador?, ¿qué propiedad es la que utiliza?

Es muy sencillo. El navegador toma la propiedad que esté más cercana al selector seleccionado.

<head>

 <style>

  h1 {

   color: orange;

  }

 </style>

 <link rel="stylesheet" type="text/css" href="estilos.css">

</head>

Los textos dentro de <h1> tendrán el color que fue definido en «estilos.css». En cambio

<head>

 <link rel="stylesheet" type="text/css" href="estilos.css">

 <style>

  h1 {

   color: orange;

  }

 </style>

</head>

Los textos dentro de <h1> serán ‘color: orange;’

¿Te ayudó el artículo? Quieres más información. Escríbeme aquí abajo.

Deja un comentario