Home

      Comment post English
x

Select your language

EnglishEspañol

Tutorial de CSS - Primera parte


Be the first to like it


<< VIENE DE TUTORIAL DE CSS - INTRODUCCIÓN
 

Editores de CSS

Antes de comenzar a aprender CSS, se debe saber con qué herramientas se va a trabajar. Primero hay que entender que CSS, así como HTML, es un lenguaje interpretado por los navegadores; eso significa que si escribimos correctamente los comandos en el código fuente de un archivo de formato .css o dentro del código fuente de un archivo .html o .htm, el contenido de este archivo será visualizado en cualquier navegador de Internet.

Si queremos ver cómo está hecha una página Web, podemos hacerlo tocando sobre cualquier punto de ésta con el botón derecho de nuestro mouse, lo cual abrirá un menú contextual con varias opciones, en nuestro caso seleccionaremos Ver Código Fuente; y así se abrirá otra ventana con el código fuente de la página Web que se está visualizando. Como se supone que ya saben HTML, seguramente entienden una buena parte de lo que figura en su código fuente (también pueden haber partes escritas en CSS o Javascript). Lo más probable es que se encuentre, en la sección de la cabecera, (entre las etiquetas <head> y </head> ) una línea bastante similar a la siguiente:

<link rel="stylesheet" type="text/css" href="nombre-de-archivo-de-estilos.css" />

Donde nombre-de-archivo-de-estilos puede ser el nombre de cualquier archivo de tipo CSS, en el que se definen los atributos de estilo estético que determinan cómo se verá cada elemento de las páginas que comprenden un sitio Web. Si se quiere abrir el archivo de estilos CSS y ver su código fuente, simplemente buscamos la ubicación indicada dentro del atributo href de <link> y la abrimos en otra pestaña del navegador Web que estamos utilizando, con lo cual abrirá el archivo de tipo .css, mostrando su código fuente; (si estamos utilizando Mozilla Firefox se puede entrar a los archivos .css desde el mismo visualizador de código fuente, ya que las ubicaciones de los archivos se muestran como enlaces o links.

También es probable que haya algún conjunto de líneas de atributos en CSS colocadas entre las etiquetas de apertura y cierre <style>, las cuales se encuentran dentro de la cabecera, entre las etiquetas <head>, viéndose algo similar a esto:

<style type="text/css">..........aquí van los atributos en css.......... </style>

Entre medio de las etiquetas <style> se agregan los atributos en CSS que definen cómo se verán únicamente los elementos de esa misma página.

También es probable que dentro de etiquetas HTML encontremos atributos como style, class o id; dentro de los cuales habrán atributos de tipo CSS que definen estéticamente cómo se muestran aquellos elementos en cuyas etiquetas se colocan dichos atributos CSS.

Por ejemplo una línea así:

<p style="color: fuchsia; font-family: courier; font-size: 4em;"> Texto de párrafo </p>

No se preocupen si todavía no entienden nada de CSS, simplemente quiero que comiencen a familiarizarse con estos comandos, sabiendo primero dónde encontrarlos.

Ya saben cómo ver el código fuente donde se encuentran los atributos CSS, ahora deben saber con qué herramienta podrán hacer sus propias páginas. Hay muchos editores, como el Dreamweaver por ejemplo, pero en mi opinión la mejor manera de aprender es utilizando una aplicación que todos tenemos en nuestras computadoras, el Bloc de notas. En realidad, con esta simple herramienta se pueden crear sitios Web desde los más pequeños y simples, hasta portales de redes sociales de los más complejos, ya que con el Bloc de notas se puede programar en distintos lenguajes de desarrollo Web. La diferencia entre los editores como Dreamweaver y el Bloc de notas, es que los primeros cuentan con muchas ayudas y herramientas que facilitan el trabajo de desarrollo de sitios Web; pero con el Bloc de notas se pueden hacer exactamente las mismas cosas e incluso más, ya que con éste se puede programar en cualquier lenguaje y además es una excelente herramienta de práctica durante la etapa de aprendizaje.

Los archivos de las páginas Web tienen que ser de tipo .htm o .html, los dos tipos son lo mismo, por lo tanto no habrán diferencias en los documentos que se vayan a crear, está en nosotros elegir cualquiera de los dos tipos. En cuanto a los archivos CSS individuales, donde se definen los atributos visuales de multiples páginas de un sitio Web, se deben guardar en formato .css .

Para guardar un archivo de página Web o de estilos CSS, vamos al menú Archivo de nuestro Bloc de notas, seleccionamos Guardar como, elegimos un nombre, luego en tipo de archivo cambiamos de Documentos de texto a Todos los archivos; esto último es muy importante, ya que si no seleccionamos Todos los archivos, lo que hayamos escrito en el código fuente se guardará como archivo de tipo .txt; y nosotros queremos guardarlo como archivo .htm o .html (para páginas Web) o .css para archivos individuales de estilos CSS.

Editar HTML con Bloc de notas
Bloc de notas de Windows

 
Ahora pasaremos a lo más importante, los comandos CSS que nos permiten dar formato estético a los elementos de páginas Web.

Debo aclararles que todos los ejemplos de código fuente incluidos en este tutorial de CSS, pueden ser copiados y pegados en cualquier editor (como el Bloc de notas) para poder ser probados; a diferencia de otros tutoriales en los que una vez que se avanza, solamente se incluyen en el código fuente de los ejemplos provistos, los últimos comandos o elementos aprendidos, haciendo que el estudiante tenga que agregar todos los elementos obligatorios del código fuente por su cuenta; aquí cada ejemplo es una página completa de principio a fin, con todos las etiquetas necesarias para hacer funcionar el código fuente con tan sólo copiarlo y pegarlo.

Otra cosa que es necesario saber antes de comenzar, es que se recomienda que se escriba todo el código fuente de las páginas Web -tanto en HTML como en CSS- en letras minúsculas. Eso es así porque el consorcio de la World Wide Web (telaraña o red mundial) llamado W3C (por World Wide Web Consortium), que se encarga de estandarizar todos los lenguajes, comandos y elementos de diseño y desarrollo Web, sugiere que tanto las etiquetas y atributos HTML así como las de CSS, deben estar escritas con letras minúsculas, y se supone que los creadores de navegadores Web deben adherir a dichos estándares, dándose la posibilidad de que las páginas Web con etiquetas, atributos y propiedades que no están escritas en letras minúsculas, posiblemente no puedan ser visualizadas correctamente en algunos navegadores que siguen al pie de la letra las recomendaciones de la W3C.
 

Cómo insertar CSS en HTML

Hay tres maneras de insertar los atributos CSS que darán formato estético a las páginas HTML:

  • A través de hojas de estilo externas.
  • A través de hojas de estilo internas.
  • A través de estilos incrustados dentro de etiquetas HTML.

 
HOJAS DE ESTILO EXTERNAS

Las hojas de estilo externas son ideales para insertar formato estético a distintas páginas Web sin necesidad de modificar cada una de ellas, dado que con sólo modificar un archivo (de extensión .css) cambia la estética de los elementos de todas las páginas que forman parte del sitio en los que se aplicaron esos atributos css.

Por ejemplo, se puede cambiar el color de fondo de todas las páginas del sitio con tan sólo modificar el atributo de fondo de pantalla ubicado en el archivo de estilos .css. Antes de la existencia de CSS o de su popularización, para hacer lo mismo, los diseñadores debían cambiar el atributo de color de fondo de pantalla de cada una de las páginas que formaban parte del sitio, tornándose en un trabajo muy tedioso.

Para insertar en una página HTML, los atributos CSS ubicados en un archivo de estilos, para que así puedan ser implementados en las distintas etiquetas de la página, hay que agregar en la sección de cabecera, delimitada por las etiquetas de apertura y cierre  <head> </head>, una etiqueta <link> de la siguiente manera:

<html>
<head>
<title>Ejemplo de página con hoja de estilo CSS externa insertada</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>

<body>

<p>Ejemplo de página con hoja de estilo CSS externa</p>
<hr />

</body>
</html>

 

Lo que hace la etiqueta <link> (que en inglés significa vincular), es insertar todos los atributos de tipo CSS de un archivo de hojas de estilo, dentro de la página HTML para que puedan ser utilizados por sus etiquetas. El atributo rel indica el tipo de relación que tendrán la página y el archivo insertado; el valor siempre debe ser "stylesheet", que significa hoja de estilo. El atributo type indica de qué tipo de archivo se trata, su valor siempre debe ser "text/css" el cual indica que el archivo insertado es de texto con sintaxis de lenguaje CSS. Finalmente, en el atributo href se indica la ubicación del archivo .css a insertar, el cual puede localizarse en la misma carpeta de la página HTML, en otra carpeta o incluso en otro sitio Web; simplemente hay que indicar su dirección URL. El nombre del archivo de hojas de estilo externas puede tener cualquier nombre, pero su extensión siempre debe ser .css .

El archivo de hojas de estilo CSS puede ser escrito dentro de cualquier editor de texto, en nuestro caso utilizaremos el Bloc de notas de Windows. El archivo CSS no debe contener ninguna etiqueta HTML y solamente puede incluir atributos de tipo CSS; además siempre hay que guardarlo con una extensión de tipo .css (por ejemplo estilos.css).

Veamos un ejemplo de archivo de hojas de estilo externas CSS:

body {background-color:black;}
p {color:red; font-family:arial;}
hr {color:red;}

No importa que todavía no entiendan la sintaxis CSS, el ejemplo simplemente sirve para mostrarles cómo se ve un archivo de estilo de tipo .css en el que solamente hay atributos CSS. En este ejemplo se indica que todas las páginas HTML que incluyan mediante una etiqueta <link> a este archivo .css tendrán un fondo de color negro, los caracteres de sus etiquetas <p> serán de color rojo y tipo de fuente Arial y sus líneas horizontales <hr> también tendrán color rojo.

La ventaja de este método, es que sin importar el número de páginas que tiene el sitio Web, si en todas esas páginas se ha insertado, en sus secciones de cabecera, este archivo .css, mediante la etiqueta <link> descrita anteriormente, si hacen un cambio en uno de los atributos CSS, el mismo se implementará inmediatamente en todas las páginas del sitio que incluyen a ese archivo de hojas de estilo .css . Por ejemplo, si modifican el color de fondo en la línea
body {background-color:black;} del archivo .css, todas las páginas HTML del sitio cambiarán automáticamente de color de fondo.
 
 
HOJAS DE ESTILO INTERNAS
 
También si se prefiere, se pueden agregar internamente en cada página de un sitio Web, los estilos que definen el aspecto visual de cada uno de sus elementos. Aunque no tiene mucho sentido hacer eso, ya que utilizar un sólo archivo de estilos CSS externo y aplicarlo a todas las páginas del sitio Web es más cómodo, puede que en algunas situaciones particulares fuera necesario definir los atributos CSS en cada una de las páginas de un sitio Web, por ejemplo en casos en los que cada página tiene un estilo estético distinto.

Para definir los atributos CSS de una página Web internamente, se deben incluir dichos atributos entre las etiquetas de apertura y cierre <style> (estilo) de la sección de cabecera de la página Web de la siguiente manera:

<html>

<head>
<title>
Ejemplo de página con hoja de estilo CSS interna</title>

<style type="text/css">
body {background-color:black;}
p {color:red; font-family:arial;}
hr {color:red;}

</style>

</head>

<body>

<p>Primer párrafo de texto de la página con hoja de estilo CSS interna</p>
<hr />
<p>Segundo párrafo de texto de la página con hoja de estilo CSS interna</p>
<hr />

</body>
</html>

 
En el ejemplo anterior, se define una sección de estilos CSS dentro de la cabecera de la página, mediante el uso de la etiqueta <style>, en cuyo atributo type (tipo) se indica que lo que se incluirá entre las etiquetas <style>...........</style> es texto de tipo CSS; por eso el valor de type en estos casos siempre debe ser "text/css".

Siempre, entre las etiquetas <style>............</style> deben incluirse atributos CSS y nada de HTML; es como si se tratase de una interrupción del código fuente HTML para darle lugar a CSS, hasta que luego de </style> HTML vuelve a tomar el mando.

Las hojas de estilo internas, o sea las etiquetas <style>............</style>, siempre deben estar en la sección de cabecera, entre las etiquetas <head>............</head> así como sucede con las etiquetas <title> o <meta>, entre otras, que ya han sido descritas en el Curso de HTML.

En el ejemplo que vimos con anterioridad, la página que contiene los estilos CSS que se pueden ver en el código fuente, tendrá un color de fondo negro, y textos de párrafos con un tipo de fuente Arial de color rojo y una línea horizontal también de color rojo. Por lo que cada vez que se incluya una etiqueta <p> el texto tendrá fuente de tipo Arial de color rojo; así como cada línea horizontal <hr />  agregada, será también roja.
 
 
ESTILOS DENTRO DE ETIQUETAS HTML

Además de las otras formas de insertar estilos CSS, también se pueden definir aspectos visuales, directamente desde dentro de las propias etiquetas HTML, mediante el uso del atributo style, donde sus valores no son otra cosa más que comandos CSS con un símbolo de ; (punto y coma) al final de cada atributo. Esto se vería de la siguiente manera:

<p style="font-family: arial; color: red;">Ejemplo de texto con estilos aplicados en la propia etiqueta.</p>

De esta manera, estos atributos solamente serán aplicados en el elemento donde fueron insertados, en el ejemplo anterior en un párrafo individual.

Se sugiere insertar estilos CSS dentro de etiquetas HTML sólo cuando sea muy necesario; por ejemplo para definir un estilo único a los elementos de una página en particular y no a nivel general en todo un sitio Web; dado que para esto último como ya se ha mencionado, lo mejor es utilizar hojas de estilo externas en las que se definen los estilos para todas las páginas de un sitio Web desde un archivo .css aparte, ahorrando así mucho trabajo a los diseñadores.

Veamos un ejemplo de página con estilos CSS definidos dentro de las etiquetas de los elementos HTML mediante el atributo style:

<html>
<head>
<title>Ejemplo de página con estilos CSS definidos dentro de las etiquetas HTML</title>
</head>

<body>

<p style="color:red; font-family:arial;">Primer texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Segundo texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Tercer texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Cuarto texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Quinto texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Sexto texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">S&eacute;ptimo texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Octavo texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Noveno texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">D&eacute;cimo texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Onceavo texto del ejemplo</p>
<hr style="color:red;" />
<p style="color:red; font-family:arial;">Doceavo texto del ejemplo</p>
<hr style="color:red;" />

</body>
</html>

En este ejemplo, se definen los mismos estilos CSS que en los ejemplos anteriores, sólo que desde dentro de cada etiqueta. Por ejemplo, si no se definieron estilos CSS externos en un archivo .css o internos en la zona de cabecera de la página, será necesario especificar el estilo de cada uno de los elementos desde dentro de sus etiquetas. Si en el código fuente anterior se llegasen a insertar:

<p>Doceavo texto del ejemplo</p>
<hr />

Sin estilos CSS definidos con el atributo style; tendrían el párrafo tendría una apariencia estándar con el tipo de fuente por omisión y color negro y la línea horizontal sería la de tipo estándar, sin modificaciones. Por eso utilizar hojas de estilo externas es mucho más cómodo, ya que el aspecto visual se define desde un solo lugar, una sola vez y para todas las etiquetas de todas las páginas Web que componen un sitio; por ejemplo se puede definir en una sola línea el aspecto visual de todos los párrafos <p> de un sitio Web.

Por lo tanto, los estilos CSS insertados dentro de las etiquetas de los elementos HTML solamente son necesarios si se pretende definir un estilo único y particular para un determinado elemento de una página, distinto a todos los demás del sitio. Por ejemplo un color especial únicamente para un párrafo en particular. Pero para definir el aspecto estético de elementos comunes a todas las páginas de un sitio Web, es mejor utilizar hojas de estilo externas definidas en archivos de tipo .css .
 

Sintaxis CSS

Las definiciones de estilos en CSS se dividen en dos partes: La parte del selector que indica a qué elemento se le aplicarán los atributos de estilo y la parte de las declaraciones, las cuales a su vez están compuestas por propiedades y los valores de las mismas. El conjunto de declaraciones siempre debe estar colocado entre llaves { }.

Selector {nombre-de-propiedad1: valor1; nombre-de-propiedad2: valor 2; }

Donde selector debe ser el nombre de la etiqueta o elemento al que se le aplicarán las modificaciones de estilo estético (por ejemplo p para <p>, h1 para <h1>, ul para <ul>, etc), nombre-de-propiedad es la propiedad que se quiere modificar (por ejemplo color de texto, tamaño de fuente, ancho de celda de tabla, etc), y valor es el valor que tomará la propiedad. Cada declaración debe finalizar con el signo ; (punto y coma), como se puede ver en el ejemplo genérico anterior.

Veamos un ejemplo concreto

p {color: red; font-family: arial; }

Aquí se indica que los párrafos <p> de la página serán de color rojo y tendrán una fuente de tipo Arial. Es importante notar que en la sintaxis de CSS, los nombres de las etiquetas HTML no deben escribirse entre signos < y >, por lo que en lugar de escribir <p> debemos poner simplemente p, o en lugar de <ul> simplemente ul, y así con todas las etiquetas HTML.

Otra cosa muy importante a tener en cuenta es la de no olvidar de poner el signo ; (punto y coma) al final de cada declaración, como se puede ver claramente en el ejemplo anterior; esto es muy importante, dado que en algún navegador puede que no se muestren bien los resultados; así que no me cansaré de repetirles que coloquen siempre, PERO SIEMPRE, el signo ; (punto y coma) al final de cada declaración CSS.

También se pueden colocar cada una de las propiedades de un elemento en distintos renglones, para mayor prolijidad y para que se noten mejor cada una de ellas en el código fuente:

p {
color: red;
font-family: arial;
}


Tampoco deben olvidar de encerrar a las declaraciones siempre entre llaves. Dicho esto, podemos continuar con el tutorial.
 

ID y Clases

Con CSS además de poder definir los estilos estéticos de los distintos tipos de etiquetas HTML desde un archivo externo o desde la sección cabecera de una página, se pueden definir los estilos para determinados elementos en particular (por ejemplo un párrafo individual, un título, una tabla, etc.).

Por ejemplo, si definimos los estilos para p, todos los párrafos <p> HTML de la página tendrán la misma apariencia estética (color de texto, tipo de fuente, tamaño de texto), en cambio si queremos especificar el estilo estético solamente de un párrafo de la página, eso lo podemos lograr agregando a la etiqueta en cuestión el atributo id, el cual debe tener el nombre de un identificador inventado por nosotros. Luego en la sección CSS (ya sea entre las etiquetas <style> y </style> de la misma página o en un archivo externo de formato .css, se indican las propiedades del identificador, colocando en lugar del nombre de un tipo de etiqueta, el nombre del identificador precedido por un signo numeral #. De esta manera evitamos usar atributos style dentro de las etiquetas.

Veamos un ejemplo más claro:

<html>

<head>
<title>
Ejemplo de identificador ID definido en hoja de estilo CSS interna</title>

<style type="text/css">
body {background-color:black;}
p {color:red; font-family:arial;}
hr {color:red;}
#parrafo2 {color:blue; font-family: verdana}
</style>

</head>

<body>


<p>Primer p&aacute;rrafo de la p&aacute;gina</p>
<hr />
<p id="parrafo2">Segundo p&aacute;rrafo de la p&aacute;gina con nombre de identificador "parrafo2"</p>
<hr />

</body>
</html>

En el código fuente anterior se creó una página con estilos CSS definidos internamente en la propia página, los cuales definen las propiedades del <body> o cuerpo de la página (color de fondo negro en este caso), el color y tipo de fuente del texto de los párrafos <p> de la página (en este caso de color rojo y tipo Arial), el color de las líneas horizontales <hr> que tendrá el documento Web (de color rojo en este ejemplo) y a lo último se definen las propiedades del identificador que bautizamos con el nombre de #parrafo2 (con color de texto azul y tipo de fuente Verdana), el cual será aplicado únicamente a un y solamente un párrafo <p> de la página Web en cuestión, agregando en su etiqueta el atributo id con valor el nombre del identificador que en este caso es "parrafo2".

Es necesario aclarar que cuando definimos en CSS el nombre de un identificador, el mismo debe ir siempre precedido por el signo numeral, sin embargo cuando lo aplicamos a una etiqueta HTML como valor del atributo id, debe escribirse sin el signo numeral #.

Por lo tanto, en el ejemplo anterior, el párrafo <p> con el identificador llamado "parrafo2", tendrá estilos exclusivamente creados para él.

Los identificadores id solamente pueden aplicarse a un único elemento de la página, por ejemplo a un párrafo; mientras que si se quieren especificar los estilos de más de un elemento de la página, en conjunto, se deben utilizar clases utilizando el atributo class.

Las clases class funcionan de manera similar a los identificadores id, solamente que en lugar de definirse con un nombre precedido por el signo numeral #, a su nombre debe anteponerse un punto . , mientras que se aplican a los distintos elementos HTML utilizando el atributo class con valor el nombre de la clase que hayamos creado.

Veamos un ejemplo más concreto:

<html>

<head>
<title>
Ejemplo de identificador ID definido en hoja de estilo CSS interna</title>

<style type="text/css">
body {background-color:black;}
hr {color:red;}
.textos {color:blue; font-family: verdana}

</style>

</head>

<body>

<h1 class="textos">Ejemplo de clases</h1>
<p class="textos">Primer p&aacute;rrafo de la p&aacute;gina con clase de nombre "textos"</p>
<hr />
<p class="textos">Segundo p&aacute;rrafo de la p&aacute;gina con clase de nombre "textos"</p>
<hr />

</body>
</html>

En el código fuente anterior, se creó una página con estilos CSS definidos internamente en la propia página, los cuales definen las propiedades del <body> o cuerpo de la página (color de fondo negro en este caso), el color de las líneas horizontales <hr> que tendrá el documento Web (de color rojo en este ejemplo) y a lo último se definen las propiedades de la clase que bautizamos con el nombre de .textos (con color de texto azul y tipo de fuente Verdana), el cual será aplicado a más de un párrafo <p> de la página Web, así como también a etiquetas de título <h1>, agregando en su etiqueta el atributo class con valor el nombre del identificador que en este caso es "textos".

Es necesario aclarar que cuando definimos en CSS el nombre de una clase, la misma debe ir siempre precedida por un punto . , sin embargo cuando lo aplicamos a una etiqueta HTML como valor del atributo class, debe escribirse sin el punto . .

En el ejemplo anterior, los párrafos <p> y los títulos <h1> con clase de nombre "textos", son de color azul y con tipo de fuente Verdana.

Por lo tanto, la principal diferencia entre los identificadores id y las clases class es que los primeros pueden aplicarse a solamente un elemento por nombre de identificador, mientras que los segundos pueden aplicarse a más de un elemento de la página.

También hay otra manera de crear clases, y es la de definirlas únicamente para un tipo de elemento HTML, por ejemplo:

p.centrado {text-align:center;}

Lo que hará es que todos los párrafos que contengan la clase "centrado" en su atributo de etiqueta class, van a aparecer centrados en la página.

Para los nombres de identificadores y clases, podemos elegir el nombre que se nos ocurra. Una buena costumbre es siempre utilizar nombres que tengan alguna relación con el elemento que definen.
 
Recuerden que los nombres de id y class nunca deben comenzar con un número, por ejemplo:

#1textos ------- es incorrecto
.1textos--------- es incorrecto
#textos---------- es correcto
.textos----------- es correcto
#textos2--------- es correcto
.textos2---------- es correcto

Se pueden colocar números en los nombres de clases e identificadores entre medio de los caracteres o al final, pero nunca al principio.
 

Jerarquía de estilos CSS

Ya se mencionó en la introducción a CSS, que el nombre del lenguaje es por las siglas de Cascading Style Sheets, que en inglés significa Hojas de Estilo en Cascada. Pero este nombre no es fortuito, sino que tiene un sentido que está relacionado con la manera de aplicar los estilos CSS a las etiquetas HTML.

Cascada es sinónimo de jerarquía, y eso es porque los estilos se aplican a las etiquetas HTML por niveles de jerarquía, de prioridad menor o más general, a mayor prioridad o más específica.

¿Pero qué significa esto? Simple, como ya vimos hay tres maneras de insertar los estilos CSS:

  • A través de hojas de estilo externas en un archivo .css .
  • A través de hojas de estilo internas (en la misma página con etiquetas <style>).
  • A través de estilos incrustados dentro de etiquetas HTML (mediante el uso del atributo de etiqueta style).

Cada uno de estos métodos de inserción de estilos tiene orden de prioridad distinto, de menor a mayor; siendo los de menor prioridad las hojas de estilo externas y las de mayor prioridad las de estilos incrustados dentro de las etiquetas.

Esto significa que si definimos una serie de propiedades para un determinado tipo de elemento HTML, en un archivo de tipo .css, todos los elementos de ese tipo, en todas las páginas del sitio Web, tendrán esas propiedades estéticas, especificadas en ese archivo de hojas de estilo externas.

Sin embargo, si llegamos a definir internamente en una determinada página, las propiedades estéticas de ese mismo tipo de elemento HTML, estas últimas definiciones tendrán mayor prioridad que las especificadas en el archivo .css externo. Entonces, todos los elementos de ese tipo, en todas las páginas del sitio, heredan las propiedades establecidas de manera externa, con la excepción de la página donde insertamos internamente (con etiquetas <style>..</style>) los estilos para ese elemento específico. Por lo tanto heredará las propiedades definidas en <style>...</style>, por sobre las indicadas en el archivo externo.

Pero si en esa misma página, con estilos estéticos establecidos internamente para ese mismo elemento HTML, además le agregamos dentro de la etiqueta de ese elemento las propiedades de estilo mediante un atributo style, estas últimas se impondrán por sobre las definidas internamente en <style>...</style>, las cuales a su vez, se imponen por sobre las establecidas externamente. Por lo tanto, finalmente tendrá las propiedades estéticas especificadas dentro del atributo style de su propia etiqueta por sobre las otras.

Veamos un ejemplo concreto.

Supongamos que tenemos un archivo de estilos CSS llamado estilos.css:

p {
color: red;
text-align: left;
font-size: 12pt;
}

En ese archivo de tipo .css se establece que los párrafos de las páginas del sitio Web tendrán texto de color rojo, estarán justificadas a la izquierda y tendrán un tamaño de fuente de 12 puntos (en próximos capítulos se explicarán las unidades de medida de fuentes).

Ahora veamos lo que se especifica en una página en particular.

<html>
<head>
<title>Ejemplo de jerarquías de estilos CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<style>
p {
color: blue;
text-align: center;
font-size: 22pt;
}

</style>

</head>

<body>

<p>Ejemplo de jerarqu&iacute;as en una p&aacute;gina con estilos CSS externos e internos</p>
<hr />

</body>
</html>

 
En los estilos CSS internos del código anterior, se indica que los párrafos de esta página tienen texto de color azul, estarán centradas y tendrán un tamaño de fuente de 22 puntos.

Dado que los niveles de jerarquías en CSS determinan que los estilos internos tienen mayor prioridad que los externos, entonces los párrafos <p> de la página tendrán los estilos establecidos internamente en lugar de los externos.

No obstante, si se borra la parte de los estilos internos, entonces sí heredará aquellos definidos en el archivo estilos.css.

¿Pero qué sucedería si a uno de los párrafos <p> le agregamos dentro de su etiqueta un atributo style con propiedades CSS distintas a las indicadas en la sección <style>..</style>? Simple, estas propiedades se superpondrían a las definidas internamente en la sección <style>..</style>.

Veamos qué sucede si al código fuente anterior le agregamos un párrafo con estilos propios definidos dentro de su etiqueta:

<html>
<head>
<title>Ejemplo de jerarquías de estilos CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<style>
p {
color: blue;
text-align: center;
font-size: 22pt;
}

</style>

</head>

<body>

<p>Ejemplo de jerarqu&iacute;as en una p&aacute;gina con estilos CSS externos e internos</p>
<p style="color: green; text-align: right; font-size: 20pt;">P&aacute;rrafo con estilos CSS propios</p>
<hr />

</body>
</html>

En el código fuente anterior se inserta un archivo CSS externo que indica que los párrafos <p> de todas las páginas del sitio Web, deben tener textos de color rojo, un tamaño de 12pt y estar alineados a la izquierda.

Sin embargo, se establece internamente que los párrafos <p> deben ser de color azul, con textos de un tamaño de 22pt y centrados. Por lo tanto, como las propiedades establecidas internamente tienen mayor prioridad que las externas del archivo CSS, los párrafos de esta página tomarán las propiedades definidas en la sección <style>..</style>.

Pero uno de sus párrafos, el cual tiene estilos propios, definidos dentro de su etiqueta <p>, mediante un atributo style, tendrá textos de color verde, alineados a la derecha y tamaño de fuente 20pt. Esto será así, dado que las propiedades definidas dentro del atributo de etiqueta style, tendrán mayor prioridad que las propiedades indicadas internamente en <style>..</style> y obviamente que aquellas establecidas externamente en el archivo estilos.css.

Todavía queda una cuestión por aclarar acerca de las jerarquías de estilos CSS. ¿Qué sucedería si por ejemplo, en una página se inserta un archivo CSS con cuatro propiedades definidas para los párrafos <p> de todas las páginas del sitio, y en una de las páginas definimos internamente en la sección <style>..</style> solamente dos propiedades de párrafos distintas a las establecidas externamente?

La respuesta es simple, las dos propiedades definidas internamente se superpondrían a aquellas dos del mismo tipo definidas externamente, pero las otras dos se heredarían del archivo externo.

Para no confundirlos tanto con teoría, vamos a un ejemplo concreto de una situación así:

Tenemos un archivo de estilos externo, en el que se establecen cuatro propiedades para los párrafos <p> de todas las páginas del sitio, que indican que sus textos deben ser de color rojo, alineadas a la izquierda, de tamaño de fuente 12pt y tipo de fuente Arial. Pero en uno de los archivos de página HTML, se establece internamente que sus párrafos <p> serán de color azul y de fuente de tipo Verdana.

Lo que sucederá es que como solamente se definen internamente dos propiedades con valores distintos a los del archivo externo (color de texto y tipo de fuente), las otras dos propiedades (alineación y tamaño de fuente) se heredarán directamente del archivo CSS externo.

Veamos el código fuente de este ejemplo:

Archivo estilos.css :

p {
color: red;
text-align: left;
font-size: 12pt;
font-family: arial;
}

 
Página HTML:

<html>
<head>
<title>Ejemplo de jerarquías de estilos CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<style>
p {
color: blue;
font-family: verdana;
}

</style>

</head>

<body>

<p>Ejemplo de jerarqu&iacute;as en una p&aacute;gina con estilos CSS externos e internos</p>
<hr />

</body>
</html>

Los párrafos <p> de esta página Web serán: de color azul y de fuente Verdana (por lo definido internamente), alineamiento izquierdo y tamaño de 12pt (dado que las otras dos propiedades no han sido contradichas por ninguna definición interna en la sección <style>..</style>).
 
Si a esta página le agregamos otro párrafo en cuya etiqueta <p> se indica a través de un atributo style, que el texto debe estar centrado, lo indicado en el archivo externo (que los párrafos deben estar alineados hacia la izquierda), en ese párrafo en particular, será reemplazado por lo indicado en el atributo style de la etiqueta <p>.

<html>
<head>
<title>Ejemplo de jerarquías de estilos CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<style>
p {
color: blue;
font-family: Verdana;
}

</style>

</head>

<body>

<p>Primer p&aacute;rrafo</p>
<p>Segundo p&aacute;rrafo</p>
<p style="text-align: center;">Tercer p&aacute;rrafo</p>
<hr />

</body>
</html>

Lo que se verá entonces aquí es una página con párrafos de color azul, fuente Verdana, tamaño de texto de 12pt y alineación izquierda (salvo en el tercer párrafo en el que la propiedad de alineación centrada, definida en su etiqueta <p> se superpondrá a la establecida en el archivo estilos.css.).
 

Comentarios en CSS

Así como en HTML (y todos los demás lenguajes de programación existentes), se pueden agregar al código fuente, comentarios que no son interpretados por los navegadores y por lo tanto no se ven en la página Web. Sirven para indicar en lenguaje humano, lo que se quiere hacer en una determinada parte del código fuente, especialmente útil si otros programadores tendrán acceso en algún otro momento al código fuente, o nosotros mismos, si lo hacemos luego de cierto tiempo y olvidamos qué pretendíamos hacer. Son una especie de guía, más que nada para los desarrolladores, donde se puede colocar lo que se quiera.

Los comentarios siempre deben ir colocados entre /* y */

/* Esto es un comentario y no se muestra en la página */
p
{
text-align:center;
/*Este es otro comentario*/
color:black;
font-family:arial;
}

 

A continuación, en los próximos capítulos comenzaremos con la explicación de cada una de las propiedades CSS y su aplicación en ejemplos de páginas Web totalmente funcionales. 


Be the first to like it

Share
Related Articles

Suggested posts
Follow Youbioit






Comments

Buenas, me gustaria saber si

Buenas, me gustaria saber si el tutorial de CSS acaba con la primera parte o continua pues no encuentro la 2ª parte

Gracias

Pablo

Estoy trabajando en la

Estoy trabajando en la continuación del tutorial de CSS y sus siguientes partes. Pronto las voy a publicar.

Post new comment

The content of this field is kept private and will not be shown publicly.