Cascading Stylesheets (CSS) : Unidad 2 / Escenario 3

Unidad 2 / Escenario 3
Lectura Fundamental
Cascading Stylesheets (CSS)
Contenido
1 ¿Qué es CSS? 1
2 Reglas CSS 2
Palabras Claves: CSS, Styles, Cascading Sheets, Style Sheets.

El lenguaje HTML visto anteriormente permite definir el contenido de una página Web, sin embargo, en cuanto a
su apariencia y funcionalidad, por si solo, HTML es bastante limitado, si bien permite especificar algunos aspectos
de la página como por ejemplo: el color del fondo de la página, fuente o enlaces, por medio de los atributos en sus
etiquetas. Esta manera de describir algunos aspectos de sus elementos es considerada obsoleta y en su lugar se
aconseja definir conjuntos de reglas CSS para los elementos de la página.
1. ¿Qué es CSS?
CSS son las siglas en inglés para Cascading Style Sheets, conocido comúnmente en idioma español como: hojas de
estilo en cascada. Es uno de los lenguajes principales de la Web junto con HTML y JavaScript, el cual permite
definir la apariencia y formato de los elementos en una página HTML a través de la definición de reglas.
CSS permite definir la apariencia y formato de cualquier elemento de una página Web. Esto se logra a través
de la definición de reglas CSS las cuales son aplicadas a los elementos en una página. Por medio de una regla es
posible definir aspectos visuales de un elemento, como por ejemplo, el tipo, tamaño y formato de la fuente que será
mostrada por el elemento, de igual manera márgenes, relleno, color de fondo y muchas otras caracterı́sticas pueden
ser igualmente definidas.
Los selectores CSS permiten poder aplicar un conjunto de regla a uno o más elementos de una página.
1.1. CSS, crear archivos
Para crear un archivo de HTML con diseño, se utiliza la etiqueta <style/> la cuál permite que dentro de un mismo
archivo pueda crear tanto la página como el diseño de la misma, no es común utilizar ası́ el complemento CSS, ya
que el código quedarı́a extenso. Usualmente la etiqueta <style/> se define dentro de las etiquetas <head> </head>,
dentro de ella se define el atributo type en el cuál se especifica el estilo del documento.
<style type="text/css">
body {
font-family: arial;
background-color:rgb(168,168,168);
}
</style>
<h1>Tı́tulo</h1>
<p>Párrafo de ejemplo para
utilizar CSS desde el
Figura 1. Encabezado y párrafo
mismo archivo.</p>
correspondiente al código 1
Código 1. Reglas CSS para el cuerpo de la página Fuente: elaboración propia
dentro de la página HTML a través de la etiqueta <style>.
Un archivo HTML no necesariamente debe tener el código CSS en el, por lo que puede estar en un archivo externo
POLITÉCNICO GRANCOLOMBIANO 1
el cuál puede ser llamado por medio de la etiqueta <link/> la cuál, tal cómo el atributo src de img para importar
imágenes, busca desde una ruta invoca el archivo en el cuál se define el código de diseño en CSS por medio del
método href, dentro de la etiqueta link deben especificarse también el tipo de archivo que será interpretado por el
documento de HTML y a su vez qué relación existe entre el documento HTML y el documento CSS por medio del
atributo rel.
<link href="estilo/estilos.css"
type="estiloTexto/css"
rel="hojaDeEstilos" />
<h1>Tı́tulo</h1>
<p>Párrafo de ejemplo para
utilizar CSS desde un
archivo externo.</p>
Código 2. Código HTML que incluye un archivo CSS

externo.
Figura 2. Encabezado y párrafo

body{ correspondiente al código 2 y 3
font-family: arial; Fuente: elaboración propia
background-color: rgb(56,176,222);
}
Código 3. Archivo CSS externo.
2. Reglas CSS
Existe una serie de reglas para desarrollar en CSS, una de ellas y la más importante es la regla en cascada, lo que
quiere decir que cada elemento tiene una procedencia fija, si tenemos dos instrucciones exactamente iguales, la que
se verá entonces reflejada en la web será la última en ejecutarse, para diferenciar cada uno de los elementos pueden
ser utilizados una serie de selectores, los cuales permiten evitar esto. Podemos cambiar el tipo de texto y su tamaño
con los operadores font-family y font-size, los cuales reciben una fuente de texto disponible en el servidor y un
tamaño medido en porcentajes, respectivamente, también puede ser agregado efectos tales como negrita y cursiva
con los operadores font-weight en el cuál definimos bold para crear el efecto de negrita y font-style en el cuál se
define italic para el efecto de cursiva.
Algunos tipos de selectores son:

* el cuál selecciona todos los elementos del archivo.
h1, h2 ..., con el nombre de la etiqueta a ser modificada por el diseño.
.archivo o p.archivo selecciona algún los elemento del archivo y selecciona todos los elementos con la etiqueta <p>
que estén contenidos en el archivo, respectivamente.
’numeral’, selecciona el elemento por medio del id que haya sido asignado.
* { font-family: Arial; }
h1 { font-family:Verdana; }
h1 {font-weight:bold }
p b { color:yellow; }
i { color:blue; }
p b { color:red; }
p#inicio { font-size:100%; }
p { font-size:80%; }
p { font-size:italic }
</style>
<h1>Tı́tulo</h1> Figura 3. Encabezados con distinta fuente

<p id="inicio"> Inicio del <i>texto</i>.</p> Fuente: elaboración propia
<p>Nuevo <b>párrafo</b>.</p>
Código 4. Reglas CSS para definición de fuente en

encabezados
2.1. Color
El color puede ser definido por medio de diferentes valores, ya sea a través de sus valores RGB, su representación
hexadecimal, o por su respectivo nombre.
Para especificar el color por medio de sus valores RGB basta con utilizar el método rgb() pasando los valores para
rojo, verde y azul, por ejemplo rgb(255, 0, 0) representa el color rojo. Para Hexadecimal, únicamente debe ser
escrito el número, y para su nombre, el lenguaje tiene reservados 147 colores predefinidos los cuales pueden ser
utilizados de manera sencilla.
h1 { color: rgb(100,100,100);}
h2 { color: #5F9F9F;}
h3 { color: Green;}
</style>
<h1>Tı́tulo1</h1>
<h2>Tı́tulo2</h2>
<h3>Tı́tulo3</h3>
Figura 4. Encabezados con distinto color de
fuente.
Código 5. Reglas CSS para la definir el color de la
Fuente: elaboración propia
fuente de los encabezados
De igual forma se aplica el uso del color para el background, o fondo, la única diferencia es que no solo se usa
el operador color si no debe tener el complemento backgruound, de la siguiente manera background-color, y
además la letra quedará por defecto de color negro, a menos que sea asignado uno diferente.
h1 { background-color: rgb(100,100,100);}
h2 { background-color: #5F9F9F;}
h3 { background-color: Cyan;}
</style>
<h1>Tı́tulo1</h1>
<h2>Tı́tulo2</h2>
<h3>Tı́tulo3</h3> Figura 5. Encabezados con distinto color de
fondo
Código 6. Reglas CSS para la definición del color de
fondo de encabezados
2.2. Texto
Existen diferentes formas de manipular los textos para que tengan un aspecto diferente, tal como fueron definidas
anteriormente operadores para cambiar el tipo de letra, aspecto o tamaño, existen otro tipo de operadores que nos
permiten dar un aspecto diferente al texto.
Podemos agregar cierto tipo de ”decoraciones” en el texto, entre los cuales está colocar una lı́nea bajo el texto,
por ejemplo. Para poder agregar alguna de estas decoraciones sebe ser utilizado el operador text-decoration
y definir en el cuál será la decoración que se usará, entre los cuales está overline, line-through, underline y
none, los cuales ubican una lı́nea sobre el texto, en medio del texto, bajo el texto o eliminan alguna decoración,
respectivamente.
h1 { text-decoration: overline;}
h2 { text-decoration: line-through;}
h3 { text-decoration: underline;}
</style>
<h1>Tı́tulo1</h1>
<h2>Tı́tulo2</h2>
<h3>Tı́tulo3</h3> Figura 6. Encabezados con diferentes tipos
de decoraciones
Código 7. Reglas CSS para la definición de decoraciones Fuente: elaboración propia
Entre las diferentes manipulaciones que puede darse en un texto, podemos dar un espacio entre lı́neas, entre
palabras, incluso entre letras con line-height, word-spacing y letter-spacing respectivamente.
h1 { word-spacing: 1em;}
h2 { letter-spacing: 0.5em;}
</style>
<h1>Tı́tulo de prueba 1</h1>

<h2>Tı́tulo de prueba 2</h2> Figura 7. text
Código 8. text
También puede alinearse el código hacia una dirección ya sea horizontal o vertical. Para alinear de forma horizontal
se utiliza el operador text-align con los valores left, right, center y justify, los cuales tal y como en aplicaciones
de texto como Word organizan el texto de una forma especifica. Y para organizar el texto de forma vertical se
utiliza el operador vertical-align con los valores text-top, middle y text-bottom principalmente, este tipo de
alineación se utiliza principalmente cuando hay un manejo de imágenes dentro del documento.
#uno { vertical-align: text-top; }
#dos { vertical-align: middle; }
#tres { vertical-align: text-bottom; }
</style>
<p><img src="images/html.jpg" height="50"

width="50" id="uno"/> text-top </p>
width="50" id="dos"/> middle </p>
width="50" id="tres"/> text-bottom </p> Figura 8. Párrafos con diferentes tipos de
alineación
Código 9. Reglas CSS para la definición de alineación Fuente: elaboración propia
vertical de texto
Es posible crear bordes para limitar los párrafos en un documento, utilizando el operador border-width el cuál puede
tener operadores alternos para modificar el ancho de cada uno de los bordes de manera independiente utilizando
border-top-width, border-right-width, border-bottom-width y border-left-width, o con valores para
cada uno de los bordes cómo númeroArriba, númeroDerecha, númeroAbajo, númeroIzquierda, y para
dejar todos los bordes del mismo tamaño se coloca simplemente el valor del número todos evaluados en pı́xeles.
p.uno { border-width: 3px; }
p.dos { border-width: 2px 5px 11px 5px; }
</style>
<p class="uno"><b>Ejemplo 1</b> de

borde en un párrafo</p>
<p class="dos"><b>Ejemplo 2</b> de
borde en un párrafo</p> Figura 9. Párrafos con diferente tipo de
bordes
Código 10. Reglas CSS para la definición de diferentes Fuente: elaboración propia
tipos de bordes en párrafos.
También es posible dar un formato o estilo en la lı́nea utilizando el operador border-style y los diferentes valores
que existen para la misma, de igual manera se puede tener cada uno de los bordes en un texto de diferentes formas,
por ejemplo, el estilo de la parte superior sea diferente a la parte inferior.
p.ej1 { border-style: solid; }
p.ej2 { border-style: dotted; }
p.ej3 { border-style: dashed; }
p.ej4 { border-style: double; }
p.ej5 { border-style: groove; }
p.ej6 { border-style: ridge; }
p.ej7 { border-style: inset; }
p.ej8 { border-style: outset; }
</style>
<p class="ej1">Estilo de lı́nea</p>

<p class="ej8">Estilo de lı́nea</p> Figura 10. Párrafos con diferentes tipos de
borde
Código 11. Reglas CSS para la definición de estilos de Fuente: elaboración propia
borde distintos en párrafos.
Cualquier estilo de lı́nea puede cambiar de color utilizando el operador border-color, asignando valores de color
antes mencionados cómo RGB, HEX y nombre reservado del lenguaje, de igual manera como hemos visto
antes se puede tener cada uno de los bordes en un texto de diferentes colores. Además de esto puede existir cierta
distancia entre un borde y el texto, esto se definirá entonces cómo padding el cuál permite definir la distancia en
pı́xeles.
p.ej1 { border-color: rgb(100,100,100); }
p.ej2 { border-color: #5F9F9F; }
p.ej2 { padding: 15px }
p.ej3 { border-color: red,yellow,blue,green; }
p.ej3 { padding: 5px 10px 20px 5px }
</style>
<p class="ej1">Color de lı́nea</p>

Figura 11. Párrafos con diferente color de
borde y padding.
Código 12. Reglas CSS para la definición de color de
borde y padding
2.3. Listas y Tablas
Cuando una lista es creada en HTML, si es una lista no ordenada el ı́cono que representa cada elemento será
un punto o viñeta, el cuál puede variar si se utiliza CSS, de igual forma si es una lista ordenada, los tipos de
enumeraciones pueden variar. Utilizando el operador list-style-type con distintos valores tales como circle,
disc, none o square para listas no ordenadas y decimal, decimal-leading-zero, lower-alpha, upper-alpha,
lower-roman y upper-roman para listas ordenadas. CSS permite agregar ı́conos propios para listas por medio
de imágenes con el operador list-style-image e indicando la ruta en la cuál está almacenada la imágen con el
valor url(ruta).
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
</style>
<p>Lista de ingredientes.</p>
<ol>
<li>1kg de harina.</li>
<li>15g de sal.</li>
<li>500ml de agua.</li>
<li>45g de levadura.</li>
<li>50ml de aceite.</li>
<ol>
<p>Lugares por visitar.</p>
<ul>
<li>Francia.</li>
<li>Irlanda.</li>
<li>Canada.</li>
<li>Australia.</li>
<li>Alemania.</li> Figura 12. Listas con diferentes estilos
<ul> Fuente: elaboración propia
Código 13. Reglas CSS para la definición de estilos de

listas
En HTML podemos crear tablas en las cuales podemos definir algunas propiedades para que las tablas tengan
diseño, pero gracias a CSS las posibilidades aumentan, ya que pueden definirse el tamaño, color y estilo de celdas y
texto.
table { width: 500px; border-collapse:collapse; }
th, td { padding: 7px 10px 10px 10px; }
th { text-transform: uppercase;
letter-spacing: 0.1em;
border-style: outset; text-align: left; }
tr { background-color: #E5E5E5; }
td { text-align: center; border-style: inset;
background-color: #9DC8FF; }
</style>
<table>
<tr><th></th>
<th scope="col">Precio Normal</th>
<th scope="col">Precio Descuento</th></tr>
<tr><th scope="row">Televisor: </th> Figura 13. Tablas luego de la aplicación de
<td rowspan="2">$870</td> reglas CSS
<td>$470</td></tr> Fuente: elaboración propia
<tr><th scope="row">Computador: </th>
<td>$650</td></tr>
</table>
Código 14. Reglas CSS para definir la apariencia de

una tabla
Se pueden modificar los formularios, de tal manera que tengan un diseño más atractivo para el usuario con los
mismos operadores de modificación y color que han sido utilizados.
input {
border: 1px ; padding: 5px;
width: 250px; margin-bottom: 20px;
}
input#enviar {
color: #ffffff;
background-color: #D56767;
border: 1px; width: 100px;
}
fieldset {
width: 400px; border: 1px;
padding: 15px; text-align: left;
}
legend {
background-color: #efefef;
border: 1px; padding: 10px;
text-align: left;
text-transform: uppercase;
}
</style>
<fieldset>
<legend>Registro</legend>
Figura 14. Formulario luego de la aplicación
<label for="nombre">Nombre: </label> de reglas del código 15
<input type="text" id="nombre"> Fuente: elaboración propia
<label for="tel">Teléfono: </label>
<input type="text" id="tel">
<input type="submit" value="Enviar"
id="enviar">
</fieldset>
Código 15. Reglas CSS aplicadas a controles HTML
2.4. Imágenes
CSS permite manipular imágenes tal como en un documento HTML utilizando operadores como width y height en
los cuales se especifica el cambio de tamaño de la imagen en pı́xeles, y la posición con el operador float especificando
en que posición estará la imagen, ya sea izquierda o derecha.
img.uno {width: 250px; height: 250px; }
img.dos {width: 150px; height: 150px; }
img.tres {width: 50px; height: 50px; }
</style>
<img src="images\css.jpg" class="uno" >
<img src="images\css.jpg" class="dos" >
<img src="images\css.jpg" class="tres" >
Figura 15. Elementos imagen cuyos
Código 16. Reglas CSS en la definición de atributos de atributos ancho y alto fueron definidos por
elementos imagen reglas CSS
Es posible agregar una imagen o color sólido de fondo en un texto, utilizando el operador background-color y
background-image respectivamente, especificando la ruta de almacenamiento de la imagen con el valor url().
body {
background-image: url("fondobody.jpg");
}
p.ej1 {
background-image: url("fondop.jpg");
}
p.ej2 {
background-color: #BDBDBD;
}
</style>
<h1>Tı́tulo</h1>
<p class="ej1">Ejemplo de párrafo para
a~
nadir una imagen como fondo. </p>
<p class="ej2">Ejemplo de párrafo para
Figura 16. Página con distintos tipos de
a~
nardir un color como fondo. </p> fondo
Código 17. Reglas CSS para la definición de fondo
(color o imagen)
Para finalizar
Como pudo notar, el lenguaje CSS permite describir el aspecto o apariencia de los elementos en una página HTML.
Aunque la definición de reglas CSS se pueden especificar directamente sobre las etiquetas de los elementos de
una página, es aconsejable hacer esta definicón de forma separada a través de archivos de hojas de estilo CSS
y aplicarlas por medio del atributo class en las etiquetas de los elementos o por medio de los selectores CSS
proporcionados. Lo anterior no solo permite mantener separado el diseño de la definición del contenido de la página
y su comportamiento haciendo que sea más sencillo realizar ajustes en el diseño, sino que además permite que el
archivo pueda ser trabajado por un experto en diseño Web y posiblemente los ajustes realizados puedan tener el
menor impacto posible sobre el código HTML.
Referencias
Collins, M. (2017). Pro html5 with css, javascript, and multimedia: complete website development and best practices.
Apress.
Dean, J. (2018). Web programming with html5, css, and javascript. Jones & Bartlett Learning.
Duckett, J. (2014). Html and css: design and build websites (1.a ed.). Wiley Publishing.
Lemay, L., Colburn, R., & Kyrnin, J. (2016). Sams teach yourself html, css & javascript web publishing in one
hour a day. Sams.
Meloni, J. (2014). Html, css and javascript all in one, sams teach yourself: covering html5, ccs3, and jquery (2.a ed.).
Sams.
Nixon, R. (2015). Css & css3: 20 lessons to successful web development. McGraw-Hill Education Group.
Shenoy, A. (2014). Thinking in html. Packt Publishing Ltd.
INFORMACIÓN TÉCNICA
Módulo: Desarrollo de Front-End

Unidad 2: CSS y JavaScript
Escenario 3: Cascading Stylesheets (CSS)
Autor: Diego Satoba
Asesor Pedagógico: Ingrid Ospina Posada

Diseñador Gráfico: Catalina López
Asistente: Angie Laiton
Este material pertenece al Politécnico Grancolombiano.

Por ende, es de uso exclusivo de las Instituciones
adscritas a la Red Ilumno. Prohibida su reproducción
total o parcial.

Cascading Stylesheets (CSS) : Unidad 2 / Escenario 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cascading Stylesheets (CSS) : Unidad 2 / Escenario 3

Cargado por

Copyright:

Formatos disponibles

Unidad 2 / Escenario 3

Cascading Stylesheets (CSS)

Palabras Claves: CSS, Styles, Cascading Sheets, Style Sheets.

1.1. CSS, crear archivos

Código 2. Código HTML que incluye un archivo CSS

Figura 2. Encabezado y párrafo

Código 3. Archivo CSS externo.

Algunos tipos de selectores son:

<h1>Tı́tulo</h1> Figura 3. Encabezados con distinta fuente

Código 4. Reglas CSS para definición de fuente en

<h1>Tı́tulo de prueba 1</h1>

<p><img src="images/html.jpg" height="50"

<p class="uno"><b>Ejemplo 1</b> de

<p class="ej1">Estilo de lı́nea</p>

<p class="ej1">Color de lı́nea</p>

2.3. Listas y Tablas

Código 13. Reglas CSS para la definición de estilos de

Código 14. Reglas CSS para definir la apariencia de

Código 15. Reglas CSS aplicadas a controles HTML

Módulo: Desarrollo de Front-End

Autor: Diego Satoba

Asesor Pedagógico: Ingrid Ospina Posada

Este material pertenece al Politécnico Grancolombiano.

También podría gustarte