DISEÑO DE SITIOS WEB

UNIDAD Nº II
Estructura y Aplicación de Lenguaje CSS

1 www.iplacex.cl
 SEMANA 3

Consideraciones previas

Alineación Curricular del Material de Estudio

El contenido que se expone a continuación está ligado a la siguiente unidad de

competencia:

- Diseñar estilos web utilizando tecnologías abiertas acorde a los requerimientos de la

organización.

Sobre las fuentes utilizadas en el material

El presente Material de Estudio constituye un ejercicio de recopilación de distintas fuentes,
cuyas referencias bibliográficas estarán debidamente señaladas al final del documento. Este
material, en ningún caso pretende asumir como propia la autoría de las ideas planteadas. La
información que se incorpora tiene como única finalidad el apoyo para el desarrollo de los
contenidos de la unidad correspondiente, respetando los derechos de autor ligados a las ideas e
información seleccionada para los fines específicos de cada asignatura.

2 www.iplacex.cl
 Introducción

Bienvenidos a la tercera semana de Diseño de Sitios Web. Hoy vamos aprender y

profundizar en nuevos conceptos básicos, para poder controlar la apariencia de los
documentos web, con CSS.
En inglés, CSS son las iniciales de “Hojas de Estilo en Cascada” (Cascading Style Sheets).
En cascada se refiere a la forma en que CSS aplica un estilo encima de otro.
Las hojas de estilo controlan la apariencia de los
documentos web.
CSS y HTML trabajan de la mano:
Con HTML ordenamos la estructura de la página.
Con CSS se define cómo los elementos HTML
serán desplegados.

3 www.iplacex.cl
 Ideas fuerza

• Identificar el funcionamiento de CSS y como se complementa con HTML para dar

estilos a las páginas web.

• Aplicar estilos CSS básicos a los diferentes ejemplos propuestos en el material en sus
3 formas: En línea, interno y externo.

• Emplear selectores de: tipo, id y clases para los diferentes casos propuestos en el
material de estudio.

• Identificar las diferencias entre los selectores utilizados en CSS.

4 www.iplacex.cl
 Índice
1. ¿Por qué utilizar CSS? ................................................................................................. 6
2. Css en línea ................................................................................................................... 6
3. Css interno .................................................................................................................... 7
4. CSS externo ..................................................................................................................... 8
5. Selectores de tipo.......................................................................................................... 10
6. Selectores de ID y clase ............................................................................................... 11
7. Selectores de descendientes ....................................................................................... 13
8. Comentarios ................................................................................................................... 14
9. Cascada .......................................................................................................................... 16
10. Herencia ........................................................................................................................ 16

5 www.iplacex.cl
 Desarrollo

1. ¿Por qué utilizar CSS?

dkds lñ

CSS te permite aplicar estilos específicos a elementos HTML específicos.

El mayor beneficio de CSS es que te permite separar el estilo del contenido.
Usando sólo HTML, todos los estilos y formatos quedan en el mismo lugar, lo cual se
vuelve más difícil de mantener al crecer la página.

Como te mencionamos en el material de la primera semana, existen 3 formas de

implementar CSS: `

• CSS en línea
• CSS interno o incrustado
• CSS externo

2. Css en línea

Usar un estilo en línea es una de las formas de insertar una hoja de estilo.
Con un estilo en línea, un único estilo es aplicado a un único elemento.
Para usar un estilo en línea, añade el atributo de estilo a la etiqueta respectiva.

En el ejemplo se muestra cómo crear un párrafo con un texto blanco utilizando color:
white y un fondo gris utilizando background-color: gray. Para agregar más de una
característica de CSS se utiliza el punto y coma tal y como se ve a continuación.

6 www.iplacex.cl
El código html

<p style=”color: white; background-color: gray;”>

Este es un ejemplo de un estilo en línea.
</p>.

3. Css interno

Los estilos internos son definidos dentro del elemento <style>, en la sección head de una
página web.

El código html para este ejemplo:

<html>
<head>
<style>
p{
color: white;
background-color: gray;
}
</style>
</head>
<body>
<p> Este es mi primer párrafo. </p>
<p> Este es mi segundo párrafo. </p>
</body>
</html>

7 www.iplacex.cl
En este ejemplo, se utiliza un selector de tipo o etiqueta en el encabezado, que cambia
todos los textos de tipo párrafo <p>.

4. CSS externo

Con este método, todas las reglas de estilo quedan almacenadas en un único archivo de
texto, el cual es guardado con la extensión .css.
Posteriormente, este archivo CSS es referenciado
en el archivo HTML, usando la etiqueta <link>. El
elemento <link> va dentro de la sección head.

HTML:

<html>
<head>
<link rel="stylesheet" href="ejemplo.css">
</head>
<body>
<p> Este es mi primer párrafo. </p>
<p> Este es mi segundo párrafo. </p>
<p> Este es mi tercer párrafo. </p>
</body>
</html>

8 www.iplacex.cl
CSS:
p{
color: white;
background-color: gray;
}

Como podemos ver, entre las etiquetas head, se encuentra una etiqueta link con el
atributo href, con la ruta de la hoja de estilos.

Tanto directorios relativos como absolutos pueden ser utilizados para definir el href para
el archivo CSS. En nuestro ejemplo, el directorio es relativo, ya que el archivo CSS está
en el mismo directorio que el archivo HTML, es decir, en la raíz del proyecto. Cuando
hablamos de directorios absolutos, nuestro archivo CSS puede estar dentro de una
carpeta y la ruta que hace referencia el atributo href cambiaria.

Ejemplo directorio relativo:

El archivo llamado estilos se encuentra en la raíz

Ejemplo directorio absoluto:

El archivo llamado estilos se encuentra en una carpeta llamada css

9 www.iplacex.cl
Sintaxis CSS

CSS está compuesto de reglas de estilo que el navegador interpreta y luego aplica a los
elementos correspondientes en tu documento.

Una regla de estilo consiste en tres partes: selector, propiedad y valor.

El bloque de declaración contiene una o más declaraciones, separadas por punto y

coma.

Cada declaración incluye un nombre de propiedad y un valor, separados por dos puntos

5. Selectores de tipo

Los selectores más comunes y fáciles de entender son los selectores de tipo o etiqueta.
Este selector apunta a todos los tipos de elementos en una página.

10 www.iplacex.cl
Por ejemplo, para afectar a todos los párrafos en la página:

Código Css para este ejemplo:

p
{
color: red;
font-size: 130%;
}

Una declaración CSS siempre termina con un punto y coma, y los grupos de declaraciones
están rodeados por llaves.

6. Selectores de ID y clase

Los selectores de ID te permiten aplicar un estilo a un elemento HTML, que tenga un

atributo id, independientemente de su posición en el documento.

Etiqueta h1

Así se agrega ID

Así se agrega clase

O ambos

Luego, puedes aplicar el estilo seleccionando el elemento por el ID o clase que le has
dado previamente.

11 www.iplacex.cl
Ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.C1{
background-color: red;
}
#ID1 {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<p class="C1"> Formulario</p>
<p id = "ID1"> Formulario</p>
<p id = "ID1" class="C1"> Formulario</p>
</body>
</html>

Resultado:

Utilizamos una clase para dar un color de fondo a un texto, un id para dar un color a un
texto y la combinación de ambos en un mismo párrafo nos da como resultado un texto
color azul con fondo rojo.

12 www.iplacex.cl
7. Selectores de descendientes

Estos selectores son utilizados para los elementos que son descendientes de otros
elementos, o elementos que se encuentran dentro de otro elemento. Por ejemplo, para
obtener el resultado de la imagen, seleccionamos la sección “em”, que se encuentra dentro
de la clase first, que, a su vez, se encuentra dentro del ID intro. Puedes afectar tantos
niveles de profundidad como necesites.

#intro .first em
{
color: pink;
background-color: gray;
}

• Los id se buscan con un símbolo # y el nombre ID

• Las clases se buscan con un punto y el nombre de la clase
• Las etiquetas se escriben tal cual, sin puntos ni símbolos

El código Html para esta imagen es:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

13 www.iplacex.cl
 <link rel="stylesheet" href="ejemplo.css">
</head>
<body>
<div id="intro">
<p class="first">
Este es un <em> párrafo.</em></p>
<p> Este es el segundo párrafo. </p>
</div>
</body>
</html>

El código css para esta imagen es:

#intro .first em
{
color: pink;
background-color: gray;
}

8. Comentarios

Los comentarios se utilizan para explicar tu código y pueden ayudarte al editar el código
fuente más adelante.
Los comentarios son ignorados por los navegadores.

14 www.iplacex.cl
También puedes comentar código HTML utilizando <!-- como apertura y --> como cierre,
tal y como se ve a continuación en la línea 10.

15 www.iplacex.cl
9. Cascada

El aspecto final de una página web es el resultado de reglas de estilo diferentes.

Las tres principales fuentes de información de estilo que forman una cascada son:

• La hoja de estilos creada por el autor de la página.

• Los estilos por defecto del navegador.
• Los estilos especificados por el usuario.

10. Herencia

La herencia se refiere a la forma en que las propiedades fluyen a través de la página. Un

elemento hijo generalmente tomará de las características del elemento padre a menos
que se defina de otra forma.

16 www.iplacex.cl
Código html para esta imagen es:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
Este es un texto dentro del párrafo.
</p>
</body>
</html>

Como la etiqueta de párrafo (elemento hijo) está dentro de la etiqueta body (elemento
padre), se lleva todos los estilos asignados de la etiqueta body.

17 www.iplacex.cl
 Demuestra la Idea

Veamos lo aprendido de forma más práctica.

Programaremos un sitio web con estilos css simples, para obtener un resultado tal y como
se muestra en la siguiente imagen.

Observa lo siguiente:
• El Título es un h1, el texto tiene un porcentaje de tamaño aumentado, las letras
tienen un espacio de 20 pixeles. El color es blanco y el color de fondo es gris.
• Los subtítulos son h3, tienen color verde, están subrayados, tienen un tamaño
aumentado del original.
• Los textos tienen una indentación de 60 píxeles y tienen tamaño grande.
• El texto en color rojo dentro del primer párrafo se encuentra en una etiqueta em, la
primera letra de cada palabra es mayúscula, tiene color rojo, es un poco más gruesa
que el párrafo.

18 www.iplacex.cl
El código para resolver este ejercicio es el siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Demuestra semana 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h3{
color: green;
font-size: 180%;
text-align: center;
text-decoration: underline;
}
p em{
color: red;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
}
p{
font-size: large;
text-indent: 60px;
}
</style>
</head>
<body>
<h1 style ="letter-spacing: 20px; text-align: center; font-size: 300%; color: white;
background-color: gray;">CSS</h1>

<h3>¿Qué es css?</h3>

<p>En inglés, CSS son las iniciales de <em>“hojas de estilo en cascada” (cascading
style sheets).</em>
En cascada se refiere a la forma en que CSS aplica un estilo encima de otro.
Las hojas de estilo controlan la apariencia de los documentos web.
CSS y HTML trabajan de la mano:
Con HTML ordenamos la estructura de la página.
Con CSS se define cómo los elementos HTML serán desplegados.</p>

<h3>¿Por qué utilizar css?</h3>

<p>CSS te permite aplicar estilos específicos a elementos HTML específicos.

El mayor beneficio de CSS es que te permite separar el estilo del contenido.
Usando sólo HTML, todos los estilos y formatos quedan en el mismo lugar, lo cual
se vuelve más difícil de mantener al crecer la página.</p>
19 www.iplacex.cl
 </body>
</html>

En la semana siguiente, se darán más detalles de lo mencionado, con algunos ejemplos

prácticos sobre la forma de implementar CSS en tus proyectos.

20 www.iplacex.cl
 Conclusión

CSS es la tecnología creada con el fin de separar la estructura de la presentación, mejorar

la usabilidad y experiencia de usuario de un sitio web. Constituye una valiosa herramienta
para el diseño y que es complementaria con el uso de HTML.

CSS te permite tener múltiples estilos en una página HTML, y esto hace que las
posibilidades de personalización sean casi ilimitadas.

En la actualidad, todas las páginas web utilizan CSS para estilizar sus contenidos.

En el material se menciona y explica las formas de aplicar CSS dentro de una página web,
que son: en línea, interno y externo. Cada forma tiene sus propias ventajas a la hora de
aplicar estilos, por ejemplo: el CSS externo permite ordenar mejor los estilos y mejorar los
tiempos de carga de una página web, por otro lado, en el caso de aplicar estilos en línea
(inline), este permite realizar cambios específicos a una parte de la página web, que, a
diferencia de la forma interna, esta cambia todos los estilos de las etiquetas referenciadas.

21 www.iplacex.cl
 Bibliografía

• Celaya Luna, Ainoa. (2010). Creación de páginas web: HTML 5. Editorial ICB.
https://www.iplacex.cl/biblioteca

• Ollero Sánchez, Carlos. (2013). Cuaderno del alumno: elaboración de hojas de

estilo (UF1303/MF0950_2). Confección y publicación de páginas Web
(IFCD0110). Editorial CEP, S.L. https://www.iplacex.cl/biblioteca

• Ejemplos de fragmentos de código CSS, obtenidos en W3Schools

(https://www.w3schools.com/css/default.asp)

22 www.iplacex.cl
23 www.iplacex.cl