El lenguaje

HTML

Desarrollo web

1
El lenguaje HTML
El lenguaje HTML (siglas del inglés de “Hyper Text Markup Languaje” o
“Lenguaje de Marcas de Hiper Texto) es el lenguaje con el cual se
distribuyen las páginas web. Es un estándar que sirve de referencia y define
una estructura básica y un código para la definición de contenido de una
página web.

HTML no es un lenguaje de programación como Java, PHP o Phyton, si no

que es un lenguaje que describe la estructura y la semántica del
documento. Utiliza “tags” o etiquetas y está basado en el estándar DTD-
SGML (Document type definition - Standard Generalized Markup
Language).

Junto a CSS (Hojas de Estilo en Cascada ó “Cascading Style Sheets”) son la

base del funcionamiento de casi todos los sitios web que visitamos a diario.
Cuando visitas un sitio mediante un navegador web, “por detrás” el
engranaje que se activa para permitir que el sitio web se muestre es más
complejo. La computadora se basa en lo que se indica en HTML y CSS para
saber lo que tiene que mostrar y cómo mostrarlo (disposición de los
elementos que componen la página en la pantalla, por ejemplo).

Figura 1: Estructura básica de HTML

Fuente: elaboración propia.

HTML y CSS son dos lenguajes básicos que necesitamos conocer para poder
desarrollar sitios web. Es el navegador web el que hará la traducción
(intérprete) entre los lenguajes de programación y lo que se ve en la
pantalla de la computadora de un cliente.

Para crear un sitio web tienes que dar instrucciones a la computadora (al
navegador que está interpretando el código). No basta con escribir el texto

2
que se ha incluido en el sitio (como lo harías con un procesador de textos,
por ejemplo), también debes indicar dónde colocar este texto, cómo se
comportará en la pantalla, dónde insertar imágenes, crear hipervínculos o
enlaces entre diferentes páginas y varias cuestiones más en las que
ahondaremos más adelante viendo lo que se conoce como los “atributos”
de los componentes.

Estudiaremos dos lenguajes que son diferentes pero complementarios, ya

que poseen funciones diferentes:
 HTML (HyperText Markup Language): apareció por primera
vez en el año 1991, en el lanzamiento de la Web. Su función
es la gestión y organización del contenido. En HTML puedes
escribir lo que deseas mostrar en la página: texto, enlaces,
imágenes, entre otros.
 CSS (Cascading Style Sheets, u “hojas de estilo”): el papel de
CSS es gestionar la apariencia de la página web (diseño,
posicionamiento, bordes, tipografías, colores, tamaño de
texto, entre otros). Este lenguaje ha complementado el
código HTML desde 1996.

También puedes haber oído hablar de XHTML. Consiste en una variante de

HTML que es más estricta y quizás un poco más compleja de manipular.

Tal como se mencionó anteriormente, el HTML apareció por primera vez

en el año 1991, mientras que a principios del año 2000 la organización W3C
(World Wide Web Consortium, quienes regulan el estándar) lanzó el
XHTML indicando que éste sería “el futuro”, pero no obtuvo el éxito que se
esperaba. En 2009 XHTML salió de la W3C y decidió regresar a HTML para
hacerlo evolucionar. Existe una gran confusión en torno a estos lenguajes
ya que son muy similares. No es uno mejor que el otro, sino que implican
dos maneras de proceder.

Durante el transcurso de esta materia trabajaremos con la última versión

de HTML (HTML5). Al respecto se puede decir que es posible crear un sitio
web únicamente en HTML, pero para aplicar reglas de diseño más amplias
y lograr una estética razonable, necesitaremos del lenguaje CSS. Esta es la
razón por la que CSS siempre lo completa y complementa.

Mientras HTML define el contenido, CSS permite organizarlo y definir la

presentación visual: el color, la imagen que usaremos de fondo, los
márgenes a establecer, el tamaño de la tipografía, efectos, etc. CSS
necesita una página HTML para poder funcionar. Es por eso que primero es
necesario incorporar los conceptos básicos de HTML antes de lograr el
acabado estético en CSS.

3
Con el tiempo HTML y CSS han ido evolucionado y surgiendo nuevas
versiones. Por ejemplo, la primera versión de HTML (HTML 1.0) no ofrecía
la posibilidad de mostrar las imágenes.

 HTML 1: es la primera versión creada por Tim Berners-Lee

en 1991.
 HTML 2: la segunda versión de HTML, que vio la luz en 1994
culminó en el año 1996. Fue la versión que plantó las bases
sobre las que surgieron las siguientes versiones de HTML.
Las reglas y el funcionamiento de esta versión están dadas
por el W3C, mientras que la primera versión fue creada por
una única persona, Berners-Lee, quien luego fundó la W3C.
 HTML 3: se incorporó en el año 1996 y añadió numerosas
posibilidades al lenguaje tales como tablas, scripts,
posicionamiento de texto alrededor de imágenes, entre
otras.
 HTML 4: Esta es la versión más común de HTML (HTML
4.01). Apareció por primera vez en 1998 y propone el uso de
marcos o “frames” (que dividen una página web en varias
partes), tablas más complejas, mejoras en las formas, entre
otros. Además, se incorpora aquí una de las cualidades más
importantes: la introducción por primera vez de las hojas de
estilo CSS.
 HTML 5: se trata de la más reciente versión, la cual no está
muy extendida aún, cuestión que nos sorprende si tenemos
en cuenta las numerosas mejoras que incorpora, tales como
la posibilidad de incluir videos más fácilmente, mejorar el
contenido, a la vez que propone nuevas características para
los formularios, entre otros.

Por otro lado, con respecto a CSS encontramos las siguientes versiones:
 CSS 1: se trata de la primera versión. En ella se establecen
las bases de este lenguaje, las cuales permiten las mejoras
descriptas anteriormente en lo que respecta a la
presentación de páginas web.
 CSS 2: apareció el año 1999 y fue completado por CSS 2.1.
En esta nueva versión de CSS se añaden numerosas
opciones. A partir de la versión 2 es posible utilizar técnicas
muy precisas de posicionamiento de elementos de diseño
en la pantalla, las cuales permiten visualizar dichos
elementos en el lugar deseado de la página.
 CSS 3: consiste en la última versión, la cual agrega
características ampliamente esperadas por la comunidad,
tales como bordes redondeados de manera incorporada,
degradados de color, sombras, entre otros.

4
Volviendo a HTML5, podemos decir que se trata de la quinta revisión
importante del lenguaje básico de la World Wide Web, es decir, el HTML.
Esta última versión especifica dos variantes de sintaxis para HTML: un
HTML clásico (text/html), conocida como HTML5 y una variante XHTML
conocida como sintaxis XHTML5 que es servida como XML. Se trata de la
primera vez en la que el consorcio W3C desarrolla HTML y XHTML de
manera paralela. La versión definitiva de la 5º revisión del estándar se
publicó en el mes de octubre de 2014.

Tal como se ha mencionado anteriormente, existe un inconveniente: se

trata del el hecho de que las nuevas etiquetas HTML5 no son reconocidas o
interpretadas en muchas de las versiones más antiguas de los navegadores
web (Chrome, Firefox, Safari, Opera, entre otros); por lo que se
recomienda a los usuarios actualizarlos a las versiones más recientes para
poder explotar todo lo que provee HTML5. Como dijimos anteriormente, el
desarrollo de este lenguaje, es regulado por el Consorcio W3C.

A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan

añadiendo semántica y accesibilidad de manera implícita, especificando
cada detalle y eliminando cualquier ambigüedad. Se tiene en cuenta el
dinamismo de muchos sitios webs (como por ejemplo Twitter, Facebook,
Instagram, entre otros) donde su interfaz y funcionalidad son más
parecidas a aplicaciones web que a documentos estáticos, como lo eran en
el pasado.

Entonces, ¿qué necesitamos para crear una página web? En internet

existen programas de edición web, tanto gratuitos como pagos, pero en
definitiva, con un simple editor de textos (como el bloc de notas o
notepad) puedes comenzar a crear. Aunque la realidad es que al existir
aplicativos más potentes, ya nadie utiliza un bloc de notas (o similares en
otros sistemas operativos diferentes a Windows) para dicha tarea.

Es por ello que existen dos grandes categorías: por un lado, los simples
editores de texto (que pueden utilizarse para programar en otros lenguajes
más allá de HTML y CSS) y, por el otro, los del tipo WYSIWYG (es el
acrónimo de “What You See Is What You Get” - en español: “lo que ves es
lo que obtienes”), que se basan en elementos visuales que disponemos
acomodando en la pantalla sin escribir una sola línea de código, y el
programa nos genera el código HTML/CSS necesario. Podemos nombrar
alguno de los editores más conocidos como Adobe Dreamweaver, Amaya,
NVU, Kompozer, Bluefish, WYSIWYG Web Builder, iWeb, entre otros.

Navegadores web

5
Como dijimos anteriormente, los navegadores que utilizamos no siempre
muestran las páginas web de la misma manera. Esto depende de las
versiones que vayan incorporando los intérpretes del código HTML y CSS
para ir adecuándose a los estándares. Además, que muchas computadoras
o dispositivos móviles tienen diferentes versiones de un navegador
determinado, coexistiendo versiones desactualizadas con las más
recientes, lo que en cierta forma dificulta poder visualizar de manera
uniforme un sitio web en múltiples dispositivos. Si los usuarios no
actualizan el software, esta situación se convierte en un problema para los
creadores de sitios web. Generalmente, entre Firefox y Chrome existe una
gran aceptación e interpretación del código, mientras que Internet Explorer
suele estar más en cuanto a nuevas implementaciones.

Existen numerosos sitios que nos permiten comparar las características

que pueden interpretar los navegadores y cómo se visualizan las páginas
en cada uno de ellos. Un sitio bastante conocido es caniuse.com, en donde
podemos, por un lado, probar cómo se comportan los atributos de CSS más
frecuentes –que veremos más adelante– y, por el otro, ver una tabla
comparativa según las versiones del software que soporta.

Es importante destacar que la mayoría de los problemas o

incompatibilidades que surgen con aplicaciones web o sitios en general,
aparecen con versiones antiguas de Internet Explorer (versiones IE6, 7 y 8).
Más allá de lo estético -que es importante- debes chequear que la
funcionalidad no se pierda; ejemplo de ello es, por ejemplo, que los
botones funcionen en cualquier versión: si uno hace un clic en “Guardar”
efectivamente se debe estar enviando la información, más allá de si el
botón se visualiza con los colores o la forma en lo que lo diseñamos.

Analizando HTML
Los documentos HTML se encuentran estrictamente organizados. Cada
parte del documento está diferenciada, declarada y determinada por
etiquetas específicas, que van representadas entre los signos < y >. Así luce
una estructura básica:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Hola mundo! Este es el titulo</title>
</head>
<body>
Contenido...
</body>
</html>

6
Primero, comenzamos con el DOCTYPE, es muy sencillo de escribir y ha sido
recortado y, a continuación, la etiqueta HTML que tiene el atributo LANG
que especifica el idioma del sitio. Esta línea de DOCTYPE debe ser la
primera línea del archivo, sin espacios o líneas que la precedan. De esta
forma, el modo estándar del navegador es activado y las incorporaciones
de HTML5 son interpretadas siempre que sea posible o en caso contrario,
ignoradas. La etiqueta <html> se cierra al final de todo el documento. Una
etiqueta se cierra cuando especificamos con una barra, como vemos en el
título abre <title> y cierra </title> (que incluye una barra en el mismo
identificador de la etiqueta. O también lo encontramos en <html> y cuando
cierra, </html>.

HTML usa un lenguaje de etiquetas para construir páginas web. Estas

etiquetas consisten en palabras clave y atributos rodeados de los signos
mayor y menor (por ejemplo, <html lang="es">). En este caso, html es la
palabra clave y lang es el atributo con el valor es. La mayoría de las
etiquetas HTML se utilizan en pares, una etiqueta de apertura y una de
cierre, mientras que el contenido se declara entre ellas. En el ejemplo,
<html lang="es"> indica el comienzo del código HTML y </html> indica el
final. Las etiquetas de apertura y de cierre se diferencian por una barra
invertida antes de la palabra clave para cerrar el bloque (por ejemplo,
</html>). El resto de nuestro código será insertado entre estas dos
etiquetas: <html> ... </html> que engloban toda la estructura de la página
y demás etiquetas.

Tal como vemos en el ejemplo, luego de <html> tenemos el siguiente

código:

<head>
<meta charset="utf-8" />
<title>Hola mundo! Este es el titulo</title>
</head>

Al igual que en versiones previas de HTML, la primera sección es la

cabecera y la segunda el cuerpo, identificadas por las etiquetas <head> y
<body> respectivamente. El elemento <head> se ubica primero y, al igual
que el resto de los elementos estructurales, tiene una etiqueta de apertura
y una de cierre. La etiqueta no cambió desde versiones anteriores de HTML
y su propósito sigue siendo exactamente el mismo. Dentro de las etiquetas
<head> definiremos el título de nuestra página web, declararemos el set de
caracteres correspondiente, proveeremos información general acerca del
documento e incorporaremos los archivos externos con estilos, códigos
Javascript e incluso imágenes necesarias para generar la página en la
pantalla. Excepto por el título y algunos íconos, el resto de la información
incorporada en la página entre estas etiquetas es invisible para el usuario.

7
Como dijimos anteriormente, las principales partes de la estructura, son
<head> y <body>. El cuerpo representa la parte visible de todo documento
y es especificado entre etiquetas <body></body>. Estas etiquetas tampoco
han cambiado en relación con versiones anteriores de HTML. A su vez,
dentro de la cabecera del documento, existe una etiqueta que define el
juego de caracteres a utilizar para mostrar el documento. Ésta es una
etiqueta <meta> que especifica cómo el texto será presentado en la
pantalla. Exiten varios tipos de etiqueta <meta> que pueden ser incluidas
para especificar información general sobre la página, pero esta información
no es mostrada en la ventana del navegador ni al usuario, aunque sí es
importante, por ejemplo, para los motores de búsqueda. Como ejemplo de
etiquetas <meta> podemos mencionar:

<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de Etiqueta con
descripción”>
<meta name=”keywords” content=”HTML5, CSS3, Desarrollo web”>

En el código anterior, el atributo name dentro de la etiqueta <meta>

especifica su tipo y content declara su valor, pero ninguno de estos
valores es mostrado directamente en la pantalla del navegador; sí lo
visualizamos si examinamos el código fuente de la página.
Otra de las etiquetas principales -y que también viene de versiones
anteriores de HTML- es la etiqueta <title>, que sirve para especificar el
título de la página (o lo que se muestra en la barra de títulos o de la
pestaña del navegador) y que va dentro de las etiquetas <head>:
<head>
...
<title>Página web de ejemplo</title>
</head>

Otro elemento que va dentro de la cabecera del documento es la etiqueta

<link>, la cual es utilizada para incorporar estilos, códigos Javascript,
imágenes o iconos desde archivos externos. Uno de los usos más
comunes para <link> es la incorporación de archivos con estilos CSS,
que se encuentra en otro archivo:
<link rel=”stylesheet” href=”estilos_generales.css”>

En la versión 5 de HTML ya no se necesita especificar qué tipo de estilos

estamos insertando, por lo que el atributo type fue eliminado. Solo
necesitamos dos atributos para incorporar nuestro archivo de estilos: rel
y href. El atributo rel significa “relación” y trata acerca de la relación entre
el documento y el archivo que estamos incorporando por medio de href.
En este caso, el atributo rel tiene el valor stylesheet que le “dice” al

8
navegador que el archivo estilos_generales.css es un archivo CSS con
estilos requeridos para presentar la página en pantalla. Un archivo de
estilos (CSS) es un grupo de reglas de formato que ayudarán a cambiar la
apariencia de nuestra página web (por ejemplo, el tamaño y color del
texto), tal como lo veremos más adelante.

La estructura del cuerpo (el código entre las etiquetas <body>) generará la
parte que visualizamos en el navegador. HTML siempre ofreció diferentes
formas de construir y organizar la información dentro del cuerpo de un
documento, uno de los primeros elementos provistos para este
propósito fue <table>. Las tablas permitían a los diseñadores acomodar
datos, texto, imágenes y herramientas dentro de filas y columnas de
celdas, incluso sin que hayan sido concebidas para este propósito. A través
de los años el elemento <div> comenzó a dominar la escena, ya que con el
surgimiento de webs más interactivas y la integración de HTML, CSS y
Javascript, el uso de <div> se volvió una práctica común. Pero este
elemento, así como <table>, no provee demasiada información acerca
de las partes del cuerpo que está representando. Desde imágenes a
menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre
las etiquetas de apertura y cierre de un elemento <div>. En otras palabras,
la palabra clave div solo especifica una división en el cuerpo, como la celda
de una tabla, pero no nos dice nada sobre qué clase de división es, cuál es
su propósito o qué contiene. Para los usuarios estas claves o indicios no
son importantes, pero para los navegadores la correcta interpretación de
qué hay dentro del documento que se está procesando puede ser
crucial en muchos casos.

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos

que ayudan a identificar cada sección del documento y organizar el
cuerpo del mismo. En HTML5 las secciones más importantes son
diferenciadas y la estructura principal ya no depende más de los elementos
<div> o <table>. Cómo usamos estos nuevos elementos depende de
nosotros, pero las palabras clave otorgadas a cada uno de ellos nos dan
ayudan a entender sus funciones. Normalmente una página o aplicación
web está dividida entre varias áreas visuales para mejorar la
experiencia del usuario y facilitar la interactividad. Puede ampliar mayor
información sobre esta temática en la bibliografía básica.

CSS

La nueva especificación de HTML (HTML5) no describe sólo los nuevos

elementos HTML o el lenguaje mismo. La web no solo demanda
organización estructural o definición de secciones, sino también diseño y
funcionalidad. En este nuevo paradigma, HTML se presenta junto con

9
CSS y Javascript (que también veremos en esta lectura) como un único
instrumento integrado.

Por otro lado, cabe aclarar que CSS nada tiene que ver con HTML5. CSS no
es parte de la especificación sino que este lenguaje es, de hecho, un
complemento desarrollado para superar las limitaciones y reducir la
complejidad de HTML. Al comienzo, atributos dentro de las etiquetas
HTML proveían estilos esenciales para cada elemento, pero a medida
que el lenguaje evolucionó, la escritura de códigos se volvió más compleja
y HTML por sí mismo ya no pudo satisfacer las demandas de los
diseñadores. En consecuencia, CSS fue adoptado como la forma de separar
la estructura de la presentación y, desde entonces, ha crecido y ganado
importancia, pero siempre desarrollado en paralelo.

La especificación de HTML5 fue desarrollada considerando CSS a cargo del

diseño. Debido a esta consideración, la integración entre HTML y CSS es
ahora fundamental para el desarrollo web y esta es la razón por la que
cada vez que se mencione HTML5 también estamos haciendo referencia a
CSS3. En este momento las nuevas características incorporadas en CSS3
están siendo implementadas e incluidas junto al resto de la especificación
en navegadores compatibles con HTML5.

El modo de funcionamiento de las hojas de estilo consiste en definir,

mediante una sintaxis especial, la forma de presentación que le
aplicaremos a:
 Una página web completa; de modo que se puede definir la
forma de todo el sitio de una sola vez (como es el
encabezado, imagen de fondo, tipografía y tamaño, entre
otros).
 Un documento HTML o página; se puede definir la forma, en
una pequeña porción de código en la cabecera, a toda la
página.
 Una porción del documento, aplicando estilos visibles en
una sección de la página.
 Una etiqueta en concreto, llegando incluso a poder definir
varios estilos diferentes para una sola etiqueta. Esto resulta
muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de
párrafos: en rojo, en azul, con márgenes, sin ellos, entre
otros... o lo que es muy común: definir cómo se comportan
los enlaces o hipervínculos (si están subrayados o no, si son
azules u otro color, etc.).

La potencia de la tecnología está, entonces, a la vista. Pero las implicancias

también van más allá, ya que además esta sintaxis CSS permite aplicar el

10
formato al documento de modo mucho más exacto. Si antes el HTML se
nos quedaba corto para maquetar las páginas y debíamos utilizar trucos
para conseguir nuestros efectos, ahora contamos con más herramientas
que nos permiten definir esta forma:
 Podemos definir la distancia entre líneas del documento.
 Se puede aplicar indentado a las primeras líneas del párrafo.
 Podemos colocar elementos en la página con mayor
precisión y no dar lugar a errores.
 Definir la visibilidad de los elementos, márgenes,
subrayados, textos tachados, entre otros.
 Los tamaños pueden ser definidos con una variedad de
unidades:
o Pixels (px) y porcentaje (%), como antes;
o Pulgadas (in);
o Puntos (pt);
o Centímetros (cm);

Con respecto a la estructura, básicamente cada navegador ordena los

elementos por defecto de acuerdo a su tipo: block (bloque) o inline
(en línea). Esta clasificación está asociada con la forma en la que los
elementos son mostrados en pantalla.
 Elementos block: son posicionados uno sobre otro hacia
abajo en la página.
 Elementos inline: son posicionados lado a lado, uno al lado
del otro en la misma línea, sin ningún salto de línea a menos
que ya no haya más espacio horizontal para ubicarlos.

Casi todos los elementos estructurales en nuestros documentos serán

tratados por los navegadores como elementos block por defecto. Esto
significa que cada elemento HTML que representa una parte de la
organización visual (por ejemplo, <section>, <nav>, <header>, <footer>,
<div>) será posicionado debajo del anterior.

Ahora bien, ¿cómo es esto de los CSS y cómo se complementan con HTML?
¿dónde van estas reglas en forma de sintaxis? Una de las técnicas más
simples para incorporar estilos CSS a un documento HTML es la de asignar
los estilos dentro de las etiquetas por medio del atributo style. El siguiente
ejemplo contiene el elemento <p> (párrafo en HTML), modificado por el
atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por
defecto del texto dentro del elemento <p> a un nuevo tamaño de 20
pixeles.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título de la página</title>

11
 </head>
<body>
<p style=”font-size: 20px”>Texto de ejemplo en tamaño
20 pixeles.</p>
</body>
</html>

Usar la técnica del ejemplo anterior es una buena manera de probar estilos
y obtener una vista rápida de sus efectos, pero no es recomendado para
aplicar estilos a todo el documento. La razón es simple: cuando usamos
esta técnica, debemos escribir y repetir cada estilo en cada uno de los
elementos que queremos modificar, incrementando el tamaño del
documento y, además, complicando el mantenimiento del código al repetir
varias veces la misma sintaxis. Imaginemos que en una página en la que
habíamos utilizado esta técnica para cambiar el tamaño, tuviésemos que
determinarlo en 26px. a todos los párrafos; tendríamos que modificar
entonces cada etiqueta <p> y reemplazar 20 por 26px.

Una mejor alternativa consiste en insertar los estilos en la cabecera del

documento y luego usar referencias para afectar los elementos HTML
correspondientes, lo que se conoce como estilos embebidos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento de
prueba</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>

La etiqueta <style> mostrada anteriormente permite agrupar estilos CSS

dentro de un documento. En versiones previas de HTML era necesario
especificar qué tipo de estilos serían insertados, en cambio, en HTML5 los
estilos por defecto son CSS, por lo tanto, no necesitamos agregar ningún
atributo en la etiqueta de apertura <style>. En este caso, el código aplica
para todos los elementos <p>, por lo que, por ejemplo, si necesitáramos
modificar el tamaño cambiamos únicamente este renglón y,
automáticamente, todos los elementos <p> presentes en el cuerpo del
documento se cambiarán a los atributos que nosotros modifiquemos
dentro de esta porción de código.

Por último, la práctica más generalizada es escribir el CSS en un archivo

externo y referenciarlo a nuestro documento mediante el uso de <link>, tal
como mencionamos anteriormente. Los archivos CSS son archivos de texto

12
comunes. Al igual que los archivos HTML, podemos crearlos utilizando
cualquier editor de texto como el Bloc de Notas (Notepad) de Windows,
por ejemplo.

Existen varios métodos para seleccionar cuáles elementos HTML serán

afectados por las reglas CSS que escribamos:

1) referencia por la palabra clave del elemento (etiqueta).

2) referencia por el atributo id.
3) referencia por el atributo class.

Al declarar las reglas CSS utilizando la palabra clave del elemento

afectamos cada elemento de la misma clase en el documento. Por
ejemplo, la siguiente regla cambiará los estilos de todos los elementos <p>:

p { font-size: 20px }

Otra manera de hacerlo es mediante el atributo id, el cual es como un

nombre que identifica al elemento, esto significa que el valor de este
atributo no puede ser duplicado. Este nombre debe ser único en todo el
documento. Para referenciar un elemento en particular usando el
atributo id desde nuestro archivo CSS la regla debe ser declarada con el
símbolo # al frente del valor que usamos para identificar el elemento:

#parrafo_1 { font-size: 20px }

Por último, tenemos la forma de referenciar mediante el atributo class.

Este atributo es más flexible y puede ser asignado a cada elemento HTML
en el documento que comparte un diseño similar

.texto1 { font-size: 20px }

Para trabajar con el atributo class, debemos declarar la regla CSS con un
punto antes del nombre. La ventaja de este método es que insertar el
atributo class con el valor texto1 será suficiente para asignar estos estilos a
cualquier elemento que queramos:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento de
prueba</title>
<link rel="stylesheet" href="estilos_generales.css">
</head>
<body>
<p class=”texto1”>Mi párrafo de prueba</p>
<p class=”texto1”>Mi párrafo de prueba 2</p>
<p>Mi texto</p>
</body>

13
 </html>

Existen otras maneras de referenciar los estilos, los mismos pueden ser
consultados en los tomos de bibliografía señalados como básicos y
obligatorios para el estudio de los contenidos de la materia.

CSS fue siempre sobre estilo, pero actualmente eso ya no sucede. En un

intento por reducir el uso de código Javascript y para estandarizar
funciones populares, CSS3 no solo cubre diseño y estilos web sino
también forma y movimiento. La especificación de CSS3 es presentada
en módulos que permiten a la tecnología proveer una especificación
estándar por cada aspecto involucrado en la presentación visual del
documento. Desde esquinas redondeadas y sombras hasta
transformaciones y reposicionamiento de los elementos ya presentados en
pantalla, cada posible efecto aplicado previamente utilizando Javascript fue
cubierto. Este nivel de cambio convierte CSS3 en una tecnología
prácticamente inédita comparada con versiones anteriores. Cuando la
especificación de HTML5 fue escrita considerando CSS a cargo del diseño,
la mitad de la batalla contra el resto de las especificaciones propuesta
había sido ganada.

14
Referencias
Gauchat, J. D. (2013). El gran libro de HTML5 CSS3 y Javascript. Barcelona:
Marcombo.

W3C HTML (s.f.). What is HTML? Recuperado de: https://www.w3.org/html/

15