Selectores, seleccionando elementos para aplicar CSS

Una hoja de estilo CSS esta compuesta por declaraciones del tipo:

selector {propiedad:valor; propiedad:valor;}

Donde el selector indica el elemento o elementos del documento HTML al que se le aplicaran las reglas de estilo.

Los selectores básicos que se pueden incluir en una hoja de estilo son: Leer más “Selectores, seleccionando elementos para aplicar CSS”

Raíz Cuadradada de un Numero Utilizando método numérico.

La raíz cuadrada de un número m es un número x tal que el cuadrado de x es igual al valor de m:

 

raiz-2.png
Definición de la raíz cuadrada de un número, la función y su primera derivada.

Si pasamos el valor de m al lado izquierdo de la ecuación la podemos transformar en una función, donde el valor de la raíz es el valor de la raíz cuadrada. Leer más “Raíz Cuadradada de un Numero Utilizando método numérico.”

Efectuando Enlaces a Hojas de Estilo en Cascada CSS

Una hoja de estilo en cascada es un archivo de texto guardarlo con extensión .css y que esta constituido por una serie de reglas aplicadas a selectores, que son elementos HTML. En la siguiente figura se muestra la estructura de un archivo CSS.

cssrefext-1
Estructura tipica de un archivo de hoja de estilos CSS

Para vincular una hoja de estilo externa con un documento HTML existen las siguientes formas:

  1. Estableciendo un enlace con la etiqueta <link>.
  2. Utilizando la instrucción @import
  3. Utilizando enlace http.

Estableciendo un Enlace con la Etiqueta <link>

La etiqueta link tiene la siguientes sintaxis:

<link rel=”stylesheet” type=”text/css” href=”URL” media=”tipo de medio”>

Esta etiqueta va incluida dentro de las etiquetas <head> y </head>.

Los atributos:

rel indica el tipo de relación (relation) y su valor es stylesheet.

type tiene siempre igual valor text/css.

href es para indicar la dirección y el nombre del archivo CSS. Se recomienda revisar las formas de referenciar archivos.

media se refiere el tipo de medio a donde se aplicara la hoja de estilo. Por defecto se utiliza media=”screen”.

Por ejemplo si tenemos un archivo con nombre miestilo.css

cssrefext-2
Ejemplo de un archivo CSS.

y tenemos un documento HTML como el que se muestra a continuación:

cssrefext-3
Ejemplo de un documento HTML con enlace a una de hoja de estilo CSS utilizando la etiqueta link.

En este documento se esta haciendo un enlace al archivo miestilo.css, el cual se encuentra en la misma carpeta que el documento HTML desde el que se hace el enlace.

Se pueden hacer enlaces a varias hojas de estilo y se aplicara la combinación de ellas.

En la siguiente figura se muestra el archivo CSS: estilo2.css.

cssrefext-5
Ejemplo de un archivo CSS

 

Se puede hacer un enlace a ambos archivos .css y es como se muestra a continuación.

cssrefext-6
Ejemplo de documento HTML con enlace a dos hojas de estilo utilizando la etiqueta link.

Y el resultado es el que se muestra a continuación.

cssrefext-7.png
Página donde se muestran los estilos aportados por las hojas miestilo.css y estilo2.css

En la salida se observa como se mezclan las reglas que están contenidas en ambas hojas de estilo y se aplican al documento. Las reglas para los elementos h1 y h2 se encuentran en mi estilo.css y las reglas para los elementos h3 y h4 se encuentran en el archivo estilo2.css. En ambos archivos se encuentran las reglas para el elemento p.

Cuando existen reglas para el mismo elemento en diferentes archivos, la que se aplica es la ultima que ha sido declarada. En el ejemplo anterior la regla para el elemento p esta repetida en ambos archivos.

miestilo.css

p { color: black; font-size: 25px; }

estilo2.css

p { color: black; font-size: 25px; }

por lo que el elemento p tendrá color negro y tamaño de texto de 25 pixeles. Si cambiásemos en el archivo estilo estilo2.css las reglas para el elemento p. Estas tendrían precedencia por ser el ultimo que se declara.

por ejemplo:

estilo2.css

p { color: red; font-size: 25px; }

produciría una salida donde el texto del elemento p tendría un tamaño de 25 pixeles, pero en color rojo.

 

Utilizando la Instrucción @import

 

Otra forma de vincular una hoja de estilo externa a un documento HTML es utilizando la instrucción @import, la cual tiene la siguiente sintaxis:

@import url(dirección  y nombre del archivo) media1, media2;

donde la dirección URL del archivo .css puede ser del tipo absoluta o relativa.

media se refiere al tipo de medio donde se aplicaran las reglas de estilo. Estos pueden omitirse o colocar uno o mas medios separados por coma. al finalizar la instrucción hay que colocar el punto y coma ( ; ).

La instrucción @import va incluida dentro de las etiquetas <style type=”text/css”> y </style>, las cuales a su vez están dentro del contenedor formado por las etiquetas <head> y </head>.

Es decir @import es una instrucción para llamar una hoja de estilo externa, desde una hoja de estilo de referencia interna (incrustada dentro del documento HTML).

Cuando se utiliza @import siempre debe colocarse de primero, antes de cualquier otra regla CSS, es decir inmediatamente después de la etiqueta de apertura <style type=”text/css”>. También se pueden importar múltiples archivos .css. Al igual que con la etiqueta <link> la regla que tendrá precedencia y se aplicara será la ultima que se cargue para el elemento HTML en cuestión.

En la siguiente figura se muestra la ubicación de las instrucciones @import dentro de los contenedores <head> <style type=”text/css”> </style></head>.

cssrefext-8
Enlace de dos hojas de estilo utilizando @import

La salida que se obtiene es igual a la que se obtendría utilizando la etiqueta <link>.

Es posible combinar los dos tipos de enlace a hojas de estilo de referencia externa .

cssrefext-10.png
Ejemplo de documento HTML donde se utilizan los dos tipos de enlace a hojas de estilo de referencia externa. Con la etiqueta <link> y con la instrucción @import

Lo cual produce la siguiente salida en el navegador.

cssrefext-11
Pagina donde se ha utilizado la combinación de enlaces a hojas de estilo de referencias externa

Otra forma de utilizar la instrucción @import es desde otra hoja de estilo externo. De esta forma una hoja de estilo externo podría centralizar varias hojas de estilo. Esto no podría hacerse con la etiqueta <link>, ya que las hojas de estilo .ccs no aceptan etiquetas HTML.

 

En este caso hay que colocar las instrucciones @import en la parte superior del archivo .css antes de colocar cualquier regla CSS.

cssrefext-12
Ejemplo del uso de enlace de hojas de estilo desde otra hoja de estilo.

El archivo estilo3.css se esta utilizando para centralizar las hojas de estilo externa, miestilo.ccs y estilo2.css, las cuales han sido vinculadas a la hoja de estilo estilo3.css utilizando la instrucción @import url(archivo.css).

cssrefext-13.png
Ejemplo de enlace a una hoja de estilo que esta centralizando otras hojas de estilo, mediante el uso de la instrucción @import

El archivo CSS estilo3.css entonces puede ser vinculado al documento HTML utilizando la etiqueta <link>.

 

Al utilizar esta referencia externa en el documento HTML produce la siguiente salida.

cssrefext-14
Página con uso de archivo estilo3.css

CSS–Formas de Incluir Reglas de Estilo en Documentos HTML

Los códigos de estilo CSS pueden ser incluidos en los documentos HTML de 3 formas:

  1. Con un archivo de texto con extensión .css. (Referencia Externa).
  2. Con las etiquetas <style type=”text/css”><style> incluidas dentro de las etiquetas <head></head> del documento HTML. (Referencia Interna).
  3. Con el atributo style dentro de las etiquetas de los elementos HTML a las que se desea dar formato y estilo. (En línea).

La forma mas recomendable es utilizar uno o varios archivos con extensión .css, que contengan las reglas de formato y estilo que deseemos aplicar. Al utilizar archivos externos, estos pueden utilizarse para modificar múltiples páginas.

Con la referencia interna solo podríamos aplicar el código CSS a la página que contiene dicho código, lo cual podría ser suficiente si se desea aplicar el código a una sola página.

Y finalmente el menos recomendado es utilizar CSS en línea con el atributo style, ya que su aplicación es elemento por elemento y pueden sobrecargar mucho el documento HTML. Solo se recomienda si el documento es pequeño o si deseamos hacer un cambio especifico a un elemento en particular. Los cambios que se hacen de esta forma tienen mayor nivel de precedencia y anulan los cambios que pudiesen haberse efectuado con CSS de referencia interna  o externa.

css-refere1

CSS Introducción a las Hojas de Estilo en Cascada

Las hojas de estilo en cascada constituyen una gran herramienta para la construcción de páginas web. Su función es la de definir el formato, presentación y diseños de los diferentes elementos que integran un documento.

Una hoja de estilo CSS es básicamente un código donde se hacen declaraciones sobre las características y como deben presentarse los elementos HTML.

HTML por si mismo puede ser utilizado para dar formato, y hasta cierto nivel diseñar como se presentaran los diferentes elementos en la pagina web. Sin embargo al utilizar CSS para las tareas de formato y diseño, se puede concentrar el uso de HTML para el contenido y la estructura del documento. Una de las ventajas de esto es que el documento HTML es menos complicado, de mas fácil lectura, sin tantos atributos y etiquetas adicionales.

Otra de las ventajas es que al centralizar el formato y el diseño en CSS se pueden manipular todos elementos de un mismo tipo dentro de un documento desde un mismo lugar, no se tendría que ir elemento por elemento HTML para cambiarlos. Adicionalmente, como veremos mas adelante, se pueden hacer cambios a elementos ubicados en  diferentes páginas de un mismo sitio web.

Estructura de una declaración CSS

La sintaxis de una declaración CSS es muy simple, tal como se muestra a continuación.

CSS-intro-2

Existen dos partes una es el selector, que indica el elemento HTML al cual se le aplicaran los códigos para dar formatos y estilos. Y la otra parte es el bloque de declaraciones, que están integradas por declaraciones individuales. El bloque de declaraciones comienza con una llave y se cierra con otra llave.

cada declaración esta integrada por dos partes: la propiedad y su valor, los cuales están separadas por dos puntos( : ) y luego de cada declaración se coloca un punto y coma ( ; ).

Un ejemplo de codigo CSS se muestra a continuación:

p { color:red; background:gray; }

en este caso el selector es p, es decir se aplica a los elementos con la etiqueta <p>, hay dos declaraciones en la primera se aplica la propiedad color y su valor es rojo, lo que indica un texto de color rojo. En la segunda declaración se aplica la propiedad background y se le da el valor gray.

Formas de aplicar código CSS a una página

Existen 3 formas de aplicar código CSS a un documento HTML:

  1. En línea, Incluido dentro del documento HTML.
  2. Referencia interna, incluyendo el código dentro de la misma página.
  3. Referencia externa, creando un archivo tipo css y realizando un enlace desde el documento HTML.

En Línea con el Documento HTML

Una de las formas de aplicar formato y estilo en un documento HTML es aplicarlo directamente al elemento como un atributo dentro de la etiqueta de apertura del elemento. El atributo es style y la sintaxis es la siguiente:

<elemento style=”propiedad:valor; propiedad:valor; propiedad:valor;”>

donde elemento se refiere a cualquiera de los elementos HTML que se utilizan en un documento, por ejemplo <p>, <h1>, <h2>, <div>, <body>, etc. Por ejemplo:

<h1 style=”color:green; background-color:yellow; font-size:40px;”>

<h2 style=”color:red; font-size:30px;”>

CSS-intro-5

Cuando se utiliza el CSS en línea se sobrecarga de información el documento HTML, lo cual interrumpe un poco la legibilidad del contenido y su estructura. Por otra parte debe aplicarse elemento por elemento, por lo que a la hora de aplicar algún cambio no es muy flexible y no es muy recomendable.

La recomendación es utilizar la referencia interna, o externa y solamente utilizar CSS en línea cuando se desee hacer un cambio muy particular a un elemento.

La salida que se obtiene al aplicar CSS en línea es la que se muestra a continuación.

CSS-intro-6

 

Referencia Interna

En la referencia interna se crea el código CSS utilizando las etiquetas <style></style> y dentro de ellas se colocan las declaraciones para dar formato y estilo a los diferentes elementos HTML del documento. Las etiquetas <style></style> en la referencia interna se ubican dentro de las etiquetas <head></head>.

La sintaxis es la siguiente:

<style type=”text/css”>selectores y bloques de declaraciones</style>.

En la etiqueta de apertura se coloca el atributo type y su valor es “text/css”.

En la siguiente figura se muestra un ejemplo de un documento HTML con CSS de referencia interna. Se encerró en un rectángulo rojo las declaraciones CSS, las cuales están dentro de las etiquetas <style type=”text/css”> y </style>

CSS-intro-3

Como se observa dentro de la etiqueta body solo se muestran las etiquetas de los elementos con sus contenidos, lo que produce un documento mas sencillo y claro de leer.

La salida que se obtiene se muestra en la siguiente figura:

CSS-intro-4

 

Referencia Externa

La referencia externa se logra creando uno o mas archivos de texto con extensión .css donde se colocan todas las declaraciones con las reglas que queremos utilizar para dar formato y estilo a los diferentes elementos HTML.

la sintaxis es la que ya se mostro en la figura 1. En un archivo css no se colocan etiquetas de HTML, solo se deben colocar los selectores y el bloque con declaraciones.

Un archivo CSS tiene la siguiente configuración:

CSS-intro-7

Este archivo se realizo en notepad ++, su nombre es miestilo.css. No es necesario colocar cada declaración en una línea separada, solamente que da claridad.

para aplicar esta hoja de estilo a un documento HTML, debe crearse un enlace desde el documento HTML al archivo .css. El enlace se hace en el elemento head y se utiliza la etiqueta <link> con la siguiente sintaxis:

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

Los atributos rel=”stylesheet” le indica al navegador que el archivo es una hoja de estilo (CSS stylesheet).

type=”text/css” también informa que el archivo es una hoja de estilo css.

href es un atributo para indicar la dirección del archivo a enlazar. para una discusión sobre la referencia a archivos ver el articulo: Referencia a archivos.

En la siguiente figura se observa como se hace la referencia al archivo miestilo.css que contiene las reglas CSS.

CSS-intro-8

La salida del navegador al utilizar esta hoja de estilos es el que se muestra a continuación.

CSS-intro-9

Si queremos hacer cambio en el formato y el estilo estos se realizan en el archivo miestilo.css, sin alterar para nada el documento HTML.

por ejemplo cambiemos el fondo de los títulos a color gris

CSS-intro-10

Esto tendrá el siguiente efecto en la presentación de la página.

CSS-intro-11

De los tres metodos utilizados para indicar el codigo CSS el mas recomendable es el que utiliza referencia externa. Esto debido a que se separa en uno o varios archivos las reglas para dar formato y estilo, dejando el documento HTML aparte dedicado a la estructura y al contenido. Por otra parte una hoja de estilo CSS creado en un archivo individual puede ser utilizado en muchas paginas al crearse enlace en cada pagina al mismo archivo de reglas CSS.

La referencia interna es util cuando las reglas CSS se van a aplicar unicamente a una sola pagina. y finalmente el menos recomendado de los métodos es aplicar CSS en linea, y solo deberia ser utilizado cuando se requiera aplicar un formato o estilo a un elemento de forma muy particular.