Unidad 2.
UTILIZACIÓN DE LENGUAJES DE
MARCAS EN ENTORNOS WEB
Tarea
MANUAL CSS
Francisco José Pérez Calderón
Lenguajes de Marcas y Sistemas de Gestión de Información
1º ASIR
Lenguajes de Marcas y Sistemas de Gestión de Información 23/24 Tareas TEMA 1
Pequeño manual sobre los tipos de estilos de utilizar
CSS en HTML.
Hay tres tipos de estilos de CSS que podemos utilizar en HTML:
• CSS interno
Este estilo CSS es un método eficaz para dar estilo a una sola página. Pero utilizar
este estilo para varias páginas requiere mucho tiempo, ya que es necesario poner
reglas CSS en cada página de tu sitio web.
Para usar este estilo los abriremos con el siguiente código después de la etiqueta
<head>:
<style type="text/css">
Pondremos los estilos que queramos a continuación, y después los cerraremos.
Nos tendría que quedar algo así:
<head>
<style type="text/css">
h1 { estilo que queramos }
body { estilo que queramos }
</style>
</head>
Ventajas:
- Puedes utilizar selectores de clase e ID en esta hoja de estilo.
- Como sólo añadirás el código dentro del mismo archivo HTML, no necesitas cargar
varios archivos.
Desventajas:
- Añadir el código al documento HTML puede aumentar el tamaño de la página y el
tiempo de carga.
Francisco José Pérez Calderón – 1º ASIR 2/4
Lenguajes de Marcas y Sistemas de Gestión de Información 23/24 Tareas TEMA 1
• CSS externo
Con el CSS externo, enlazarás tus páginas web a un archivo .css externo, que puede
ser creado con cualquier editor de texto de tu dispositivo.
Este tipo de CSS es un método más eficiente para estilizar un sitio web grande.
Para usar este estilo crearemos un nuevo archivo .css con el editor de texto y
añadiremos las reglas de estilo de la siguiente manera:
.xleftcol {float: left; width: 33%; background:#809900;}
.xmiddlecol {float: left; width: 34%; background:#eff2df;}
En la sección <head> de tu documento HTML, añadiremos una referencia a nuestro
archivo .css externo justo después de la etiqueta <title>:
<link rel="stylesheet" type="text/css" href="[Link]" />
Ventajas:
- Como el código CSS está en un documento separado, tus archivos HTML tendrán
una estructura más limpia y un menor tamaño.
- Puedes utilizar el mismo archivo .css para varias páginas.
Desventajas:
- Es posible que tus páginas no se muestren correctamente hasta que se cargue el CSS
externo.
- Subir o enlazar varios archivos CSS puede aumentar el tiempo de carga de tu sitio.
Francisco José Pérez Calderón – 1º ASIR 3/4
Lenguajes de Marcas y Sistemas de Gestión de Información 23/24 Tareas TEMA 1
• CSS inline
El CSS inline se utiliza para dar estilo a un elemento HTML específico. Para este tipo
de estilo CSS, sólo tendrás que añadir el atributo style a cada etiqueta HTML, sin
utilizar selectores.
Veamos un ejemplo. Aquí añadimos un CSS inline a la etiqueta <p> y <h1>:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Tutoriales de Hostinger</h1>
<p style="color:white;">Esto es un párrafo.</p>
</body>
</html>
Ventajas:
- Puedes insertar fácil y rápidamente reglas CSS en una página HTML. Por eso, este
método es útil para probar o previsualizar cambios y realizar correcciones rápidas en
tu sitio web.
- No es necesario crear y cargar un documento separado como en el CSS externo.
Desventajas:
- Añadir reglas CSS a cada elemento HTML lleva mucho tiempo y desordena la
estructura HTML.
- La aplicación de estilos a múltiples elementos puede afectar al tamaño de la página
y al tiempo de carga.
Francisco José Pérez Calderón – 1º ASIR 4/4