2.D. Hojas de Estilo (CSS)

27/10/22, 13:17 2.D.
Hojas de estilo (CSS)
2.D. Hojas de estilo (CSS)
Sitio: VIRGEN DE LA PAZ Imprimido por: Obdulia Caro Rodriguez

Curso: Lenguajes de marcas y sistemas de gestión de información Día: jueves, 27 de octubre de 2022, 13:17
Libro: 2.D. Hojas de estilo (CSS)
https://aulavirtual32.educa.madrid.org/ies.lapaz.alcobendas/mod/book/tool/print/index.php?id=50465 1/22
27/10/22, 13:17 2.D. Hojas de estilo (CSS)
Tabla de contenidos
1. Introducción
2. Cómo incluir CSS en un documento HTML
3. Sintaxis de las reglas de estilo
4. Cascada y herencia de estilos
5. Selectores
5.1. Selectores de clase
5.2. Selectores descendentes
5.3. Selectores de ID
6. Atributos principales
6.1. Atributos de color y fondo
6.2. Atributos de fuente
6.3. Atributos de texto
6.4. Atributos de caja (I)
6.6. Atributos de clasificación
7. Posicionamiento en hojas de estilo
8. Unidades de tamaño
1. Introducción
CSS (Cascading Style Sheets) permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
Antes del uso de CSS, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página.
El principal problema de esta forma de definir el aspecto de los elementos es que habría que definir el formato de cada uno de los
elementos que formen la página, lo cual hace que sea muy difícil de actualizar.
CSS permite separar los contenidos de la página y su aspecto. Para ello se define en una zona reservada el formato de cada uno de los
elementos de la web. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a ella en las
que aparezca ese elemento. Las hojas de estilo están compuestas por una o más reglas de estilo aplicadas a un documento HTML o XML.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML para marcar los contenidos, es decir, para designar la función de cada
elemento dentro de la página: párrafo, cabecera, texto destacado, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir
el formato de cada elemento.
CSS obliga a crear documentos semánticos HTML, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se
observó la necesidad de definir un mecanismo que permitiera aplicar estilos a los documentos electrónicos. La guerra de navegadores y la
falta de un estándar para la definición de los estilos dificultaban la creación de documentos que tuvieran igual apariencia en distintos
navegadores.
En 1995, el W3C añadió a su grupo de trabajo de HTML el desarrollo y estandarización de CSS.
CSS 1, se publicó en 1996, es la primera recomendación oficial.
CSS 2, publicada en 1998, es la segunda recomendación oficial.
CSS 3, empezó a desarrollarse en 1998, sus primeros borradores se publicaron en junio de 1999. A diferencia de las versiones anteriores la
especificación se divide en varios documentos separados llamados módulos. Esto permite que diferentes módulos se encuentren en
diferentes estados de desarrollo y no todos pasen a ser recomendaciones oficiales del W3C. Un módulo debe primero pasar por la fase de
"candidato" antes de ser aprobado.
CSS 4, última versión sobre la que no existe una especificación integrada ya que al igual que CSS 3 se encuentra dividido en diferentes
módulos. A partir de la división en módulos que se hizo en CSS 3 la evolución de cada uno de ellos es independiente lo que provoca que
actualmente la mayoría de módulos estén es especificación de nivel 3 mientras que otros (por ejemplo Selectores) se encuentre en nivel 4.
En el siguiente enlace encontrarás el soporte que cada uno de los navegadores más actuales tienen sobre las etiquetas CSS.
CSS Reference With Browser Support - W3shool
2. Cómo incluir CSS en un documento HTML
2.1. Declaración en línea

Dentro de la propia etiqueta mediante el atributo style.
Deben evitarse para preservar el principio de separación de contenidos y formato.
<p style=“color: red;”> …. </p>
2.2. Declaración Interna

En el encabezado del documento dentro de las etiquetas <style>
<style type=“text/css”> …. </style>
2.3. Declaración en archivo externo

En el encabezado mediante la etiqueta link:
<link rel=“stylesheet” type=“text/css” href=“rutaArchivo.css”>
El archivo de estilos tendrá extensión .css.
El código del archivo de estilos no tendrá etiqueta de declaración de estilo, por ejemplo:
h1 {background-color: #blue}
Otra forma de usar hojas de estilo externas es mediante la etiqueta @import. Es una directiva CSS no html.
<style type=“text/css”>
@import url(“formato1.css”);
</style>
3. Sintaxis de las reglas de estilo
Cada uno de los estilos que componen una hoja de estilos CSS se denomina regla. Cada regla se forma por:
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS
Llave de apertura, {
Declaración: especifica los estilos que se aplican a los elementos.
Propiedad: permite modificar el aspecto de un atributo del elemento.
Valor: indica el nuevo valor del atributo modificado en el elemento.
Llave de cierre, }.
p { color: blue;}
En este caso el selector es "p" (párrafo), la declaración es "color: blue" donde encontramos la propiedad color y el valor blue.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener varios selectores y cada declaración puede estar formada por
diferentes declaraciones.
4. Cascada y herencia de estilos
En ocasiones y dependiendo de cómo se haya hecho la definición de estilos es posible que el navegador se encuentre estilos contradictorios.
Ante esta situación el navegador aplicará la siguiente precedencia
1. Declaración en línea
2. Declaración interna
3. Declaración externa
4. Propiedades por defecto del navegador
Por otro lado las hojas de estilo también permiten la herencia de propiedades, Si tenemos varios elementos HTML anidados los
elementos más internos heredan los estilos de los externos en los que están anidados siempre y cuando ellos no los tengan definidos
5. Selectores
A la hora de aplicar estilos a nuestros elementos HTML necesitamos un mecanismo que permita identificar sobre cuál o cuáles de estos
elementos queremos actuar. Para ello se utilizan los selectores, estos permiten identificar a qué elementos de nuestro código html vamos a
aplicar el estilo definido. Existe diferentes selectores, a continuación veremos los más importantes.
Selector universal (*)
Sirve para seleccionar todos los elementos de la página.
* {margin:10px; padding: 5px};
Selectores de etiqueta
En este caso los estilos se aplican solo a la etiqueta.
p { text-align: center}
Si queremos ajustar los mismos estilos a dos etiquetas diferentes podemos ponerlos separados por comas.
P, h1, h2 { text-align: center}
5.1. Selectores de clase
En ocasiones no vamos a querer aplicar el mismo formato en todas las etiquetas del mismo tipo. Para ello podemos asignar a las etiquetas a
una clase determinada, esto requiere que identifiquemos las etiquetas afectadas mediante el atributo class de la forma.
<p class=“parrafoCentrado”> ….. </p>
El selector se especificaría:
p.parrafoCentrado {text-align: center; }
De manera que este estilo se aplicaría a todas las etiquetas p que tengan el atributo class a valor parrafoCentrado.
Sin embargo si hacemos la misma definición pero omitimos el identificador de etiqueta:
.parrafoCentrado { text-align: center; }
Se aplicaría a todas las etiquetas que perteneciesen a la clase “parrafoCentrado” sean del tipo que sean. Por ejemplo a una que fuese:
<h1 class="parrafoCentrado">encabezado 1 centrado</h1>
Veamos a continuación un código de ejemplo:
<!DOCTYPE html >
<head>
<title>Ejemplo del uso de clases en hojas de estilo</title>
<style type="text/css"> .clase_azul{color:blue} p.clase_roja{color:#ff0000; font-style:italic; font-weight:bolder;

font-family:courier;} </style>
</head>
<body>
<h3 class="clase_azul">Ejemplo del uso de clases en hojas de estilo</h3>
<p>Cualquier elemento sobre el que apliquemos la clase clase_azul tendrá el texto azul.</p>
<p class="clase_azul"> Incluso el párrafo.</p>
<p class="clase_roja">Sobre el párrafo podemos aplicar la clase clase_roja y el texto será rojo, en
negrita cursiva y la familia del texto courier.</p>
<h3 class="clase_roja"> Pero este texto no aparecer&aacute formateado ya que la clase clase_roja sólo
actúa sobre párrafos.</h3>
</body>
</html>
El resultado en el navegador sería:
5.2. Selectores descendentes
Permite seleccionar elementos que se encuentran dentro de otros elementos, por ejemplo:
p h1 {color: red; }:
Se aplicará a todas las etiquetas h1 que estén dentro de bloques p. Además hay que tener en cuenta que:
No tiene porqué ser descendiente directo.
El nivel de anidación puede tener varios niveles, por ejemplo:
p a b i {text-decoration: underline; }
Se aplica a los elementos en cursiva, dentro de etiquetas de negrita, anidados dentro de enlaces que se encuentren en párrafos.
Es importante tener en cuenta que si no tenemos cuidado podemos confundir el selector descendente con la aplicación del mismo selector
a distintas etiquetas
p a b i {color: blue; }
NO ES LO MISMO QUE
p,a,b,i {color: blue;}
También podemos combinar el selector universal con selectores descendentes, por ejemplo:
p * b {color: #0000FF;}
Se aplica a todas las etiquetas de tipo <b> que estén anidadas en cualquier otra etiqueta que a su vez esté dentro de una etiqueta de tipo
<p>.
Sin embargo no se aplicará a las etiquetas de tipo <b> que estén dentro de una etiqueta de tipo <p> directamente.
5.3. Selectores de ID
Permite seleccionar un elemento de la página por medio de su atributo id. El uso de este selector se suele asociar a elementos de estilo que
se van a aplicar de manera excepcional una única vez, por ello el valor del atributo id no debe repetirse en dos elementos diferentes de la
misma página.
Por ejemplo:
<p id=“unico”>….</p>
Se referencia mediante una de las siguientes posibilidades:
#unico { color: blue;}
p#unico {color: blue;}
6. Atributos principales
En los siguientes subapartados vamos a ver los atributos principales que se usan en CSS como son:
Atributos de color y fondo.
Atributos de fuente.
Atributos de texto.
Atributos de caja.
Atributos de clasificación.
Pasemos a verlos detenidamente.
6.1. Atributos de color y fondo
Los atributos de color y fondo son los que enumeramos a continuación:
Elemento Descripción
Indica el color del texto. Lo admiten casi todas las etiquetas de HTML. El valor de este atributo es un color, con su nombre o su
color
valor RGB.
background-
Indica el color de fondo del elemento. El valor de este atributo es un color, con su nombre o su valor RGB.
color
background- Permite colocar una imagen de fondo del elemento. El valor que toma es el nombre de la imagen con su camino relativo o
image absoluto
background- Indica si ha de repetirse la imagen de fondo y, en ese caso, si debe ser horizontal o verticalmente. Los valores que puede
repeat tomar son: repeat-x, repeat-y o no-repeat.
background-
Especifica si la imagen ha de permanecer fija o realizar un scroll. Los valores que pueden tomar son: scroll o fixed.
attachment
background- Es una medida, porcentaje o el posicionamiento vertical u horizontal con los valores establecidos que sirve para posicionar
position una imagen. Los valores que puede tomar son: porcentaje, tamaño, o [top, center, bottom] [left, center, rigth]
Establece en un solo paso cualquiera de las propiedades de background anteriores. Los valores que puede tomar son:
background
background-color, background-image, background-repeat, background-attachment, background-position.

Dado que no todos los nombres de colores son admitidos en el estándar, es aconsejable utilizar el valor RGB.
Un ejemplo de un documento HTML en el que se utiliza este método para incluir formatos es:
<!DOCTYPE html >
<head>
<title>Ejemplo de atributos CSS de color y fondo</title>
<style type="text/css">
body { background-color: black; color:yellow; }
p { color: #ffffff;}
</style>
</head>
<body>
<h3>Ejemplo del uso de atributos de color y fondo</h3>
<p>El texto de cualquier elemento, salvo el del párrafo que es blanco, es amarillo y el fondo negro.</p>
</body>
</html>
En el navegador se ve del siguiente modo:
6.2. Atributos de fuente
En este apartado vamos a ver los distintos atributos que podemos utilizar referentes a las fuentes de nuestro documento y que son:
font-size Indica el tamaño de la fuente. Puede ser un tamaño absoluto, relativo o en porcentaje. Toma valores de unidades de CSS
Establece la familia a la que pertenece la fuente. Si el nombre de una fuente tiene espacios se utilizan comillas para que se
font-family
entienda bien. El valor es el nombre de la familia fuente.
font- Define el grosor de los caracteres. Los valores que puede tomar son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
weight 700, 800 o 900
font-style Determina si la fuente es normal o cursiva. El estilo oblique es similar al cursiva. Los valores posibles son: normal, italic, oblique.
font-
Determina si la fuente es normal o mayúsculas pequeñas. Los valores que puede tomar son: normal o small-caps
variant
El alto de una línea y por tanto, el espaciado entre líneas. Es una de esas características que no se podían modificar utilizando
line-height
HTML.
Permite establecer todas las propiedades anteriores en el orden que se indica a continuación: font-style, font-variant, font-
font weight, font-size[line-height], font family. Los valores han de estar separados por espacios. No es obligatorio el uso de todos los
valores.

<!DOCTYPE html>
<head>
<title>Ejemplo de atributos CSS de fuente</title>
body { background-color: black; color:yellow; font-family: courier }
p { color: #ffffff; font:italic 900 12px Verdana; }
</style>
</head>
<body>
<h3>Ejemplo del uso de atributos de fuente</h3>
<p>El texto de cualquier elemento es de la familia Courier y normal, salvo el del párrafo que es
Verdana, negrita y de tamaño 12 px.</p>
</body>
</html>
En el navegador el resultado es:
6.3. Atributos de texto
En el apartado anterior vimos los atributos relacionados con las fuentes y en este vamos a ver los relacionados con el texto en sí y son los
siguientes:
text- Establece si el texto está subrayado, sobrerayado o tachado. los valores que puede tomar son: none, underline, overline, line-
decoration through o blink
Indica la alineación del texto. Aunque las hojas de estilo permiten el justificado de texto no funciona en todos los sistemas. Los
text-align
valores que puede tomar son: left, right, center o justify
text-
Determina la tabulación del texto. Los valores que toma son una longitud, en unidades CSS, o un porcentaje de la establecida.
indent
text- Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas
transform o minúsculas. Los valores que puede tomar son: capitalize, uppercase, lowercase o none
word-
Determina el espaciado entre las palabras. Los valores que puede tomar es un tamaño.
spacing
letter-
Determina el espaciado entre letras. Los valores que puede tomar es un tamaño.
spacing
vertical- Establece la alineación vertical del texto. Sus valores posibles son: baseline, sub, super, top, text-top, middle, bottom, text-
align bottom o un porcentaje.
line-height Altura de la línea. Puede establecerse mediante un tamaño o un porcentaje

<!DOCTYPE html>
<head>
<title>Ejemplo de atributos CSS de texto</title>
h3 { text-decoration:underline; text-align: center; text-transform: capitalize }
p { text-indent: 50%; }
</style>
</head>
<body>
<h3>Ejemplo del uso de atributos de texto</h3>
<p>El texto de del encabezado de tercer nivel está subrayado, centrado y la primera letra de cada palabra es
mayúcula.</p>
<p>El párrafo está tabulado</p>
</body>
</html>
Su aspecto en el navegador es el siguiente:
La W3C define lo que se denomina "Modelo de caja", que no es más que una zona rectangular como la siguiente que rodea cada uno de los
elementos de nuestra página web.
Cada etiqueta HTML aplica ese modelo y por lo tanto tiene:
Contenido. Texto de la etiqueta
Margen interior. Distancia desde el contenido al borde del elemento. Propiedad padding.
Borde. El borde del elemento. Propiedad border.
Margen exterior. Distancia desde el borde del elemento a los elementos adyacentes. Propiedad margin.
Cada uno de esos elementos puede definirse mediante propiedades CSS que veremos a continuación.
A continuación veremos algunas de las propiedades que afectan a cada uno de los elementos del modelo de caja.
Contenido
FORMATO PROPIEDAD VALORES
auto | Longitud en px, em o

anchura width
equivalente
altura height auto |

Longitud
en px,em o
equivalente
Tanto width como height especifican las dimensiones del contenido sin tener en cuenta borde y márgenes.
Margen interno
padding
padding-top
Auto
| valor
de longitud | valor de
Ancho
del margen interno padding-bottom
porcentaje
padding-right
padding-left
borde
border-color
border-top-color
Color en alguna de las notaciones
Color del borde border-bottom-color
permitidas | transparent
border-right-color
border-left-color
Border-width
Border-top-width
Valor de longitud | thin | médium |
Grueso del borde Border-bottom-width
thick
Border-right-width
Border-left-width
border-style
border-top-style
Solid | dashed | dotted | double |
border-bottom-style ridge | Groove | inset | outset |
Estilo del borde hidden | none
border-right-style
border-left-style
Margen externo
margin
margin-top
Auto | valor de longitud | valor de
Ancho del margen externo margin-bottom
porcentaje
margin-right
margin-left
Si utilizamos margin con un solo valor se aplica a los cuatro lados, con dos valores el primero se aplica a superior e inferior y el segundo a
laterales, con tres valores se aplica el primero al superior, el segundo a los laterales y el tercero al inferior, con cuatro valores se aplica a
superior, derecho, inferior, izquierdo.
6.6. Atributos de clasificación
En este apartado vamos a ver otros atributos que hemos etiquetado como atributos de clasificación y que son los siguientes:
Determina si el elemento es de bloque, línea, lista o ninguno de ellos. Los valores que puede tomar son: block, inline, list-item o
display
none.
Indica el modo en que se ha de gestionar los espacios en blanco que hay en el elemento, es decir, si se mantienen todos los
white-
existentes tal y como estén en el documento o si se anulan a uno las secuencias de blancos, es el valor por defecto y el de la
space
opción normal. Valores que puede tomar son: pre, nowrap, normal.
list-style- Indica cual es el símbolo que se utiliza como marcador en las listas. Valores que puede tomar son: disc, circle, square, decimal,
type lower-roman, upper-roman, lower-alpha, upper-alpha, none.
list-style-
Permite utilizar el uso de una imagen como marcador en una lista. El valor que toma es la ruta del fichero imagen
image
list-style-
Determinan la posición del marcador en una lista. Puede tomar los valores: outside o inside.
position
Permite establecer de una única vez todas las características de una lista. Hay que seguir el orden siguiente: list-style-type, list-
list-style
style-position y list-style-image.
En el siguiente ejemplo puedes ver la aplicación de los atributos anteriores:
<!DOCTYPE html >
<head>
<title>Ejemplo de atributos CSS de clasificación</title>
h3 { white-space:pre; }
p { white-space:normal; }
ul { list-style:square; list-style-position: outside;}
</style>
</head>
<body>
<h3>Ejemplo del uso de atributos de clasificación</h3>
<p>En el encabezado de tercer nivel los espacios se mantienen tal y como estén en el
documento mientras que en el párrafo se anulan las secuencias de blancos.</p>
<p> En las listas tenemos los siguientes cambios:</p>
<ul>
<li>El símbolo marcador de las listas es un cuadrado.</li>
<li>La posición del marcador es exterior</li>
</ul>
</body>
</html>
Que en el navegador se ve del siguiente modo:
7. Posicionamiento en hojas de estilo
Dentro de una página HTML pueden convivir diferentes elementos que permiten ser posicionados más allá de dónde el orden de etiquetas
en el código haya establecido. Es posible incluso superponer elementos utilizando las propiedades CSS adecuadas. En la siguiente tabla
encontrarás algunas de las que permitan realizar este tipo de operaciones.
clip Permite seleccionar una zona. Los valores que puede tomar son: shape o auto.
Permite establecer la altura de un elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje (ya estudiada en el
height
modelo de caja).
Permite establecer la anchura de un elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje (ya estudiada en
width
el modelo de caja).
visibility Indica si el elemento sobre el que actúa será visible o no. Los valores que puede tomar son: visible o hidden.
left Indica la posición del lado izquierdo del elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje.
right Indica la posición del lado derecho del elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje.
bottom Indica la posición del lado inferior del elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje.
top Indica la posición del lado superior del elemento. Los valores que puede tomar son: auto o un tamaño o porcentaje.
Indica si el elemento será visible o no en caso de superar los límites del contenedor. Los valores que pueden tomar son: visible,
overflow
hidden, scroll o auto.
Determinan si el posicionamiento de un elemento es absoluto, relativo o estático. Los valores que puede tomar son: absolute,
position
relative, stiky o static.
Define la posición del elemento en el tercer eje de coordenadas, permitiendo superponer unos elementos sobre otros como si
z-index
fueran capas.

<!DOCTYPE html >
<head>
<title>Ejemplo de atributos CSS de posicionamiento</title>
img{ position:absolute; left: 10px; top: 0px; z-index:-1;}
p{overflow:scroll;}
</style>
</head>
<body>
<h3>Ejemplo del uso de atributos de posicionamiento</h3>
<img alt="Esto es una imagen" src="ojos.jpg" width="100" height="100"></img>
<p> La imagen tiene un valor del atributo z-index menor que el del encabezado de tercer nivel y que el del
párrafo. Este es el motivo por el que la imagen aparece por detrás del texto. <br><br/>
Si le texto del párrafo no cabe en el espacio que tiene asignado se ha habilitado un scroll.</p>
</body>
</html>
Que se verá en el navegador del siguiente modo:
Nota: Para realizar este ejemplo necesitas el archivo ojos.jpg que ya habrás descargado anteriormente.
8. Unidades de tamaño
A la hora de especificar tamaños CSS nos permite usar diferentes tipos de unidades, estas además pueden ser absolutas o relativas:
Absolutas. Cualquier longitud expresada en una de estas unidades siempre se mostrará del mismo tamaño.
Relativas. Dependen del tamaño de otro elemento.
Se debe especificar la unidad usada:
Siempre con dos caracteres.
Sin dejar espacio.
Por ejemplo si queremos especificar un tamaño de 13 píxeles utilizaremos: 13px
Unidades absolutas
cm Centímetros
mm Milímetros
In Pulgadas
px Píxeles
pt Puntos
pc Picas
UNIDADES RELATIVAS
em Relativa
al tamaño del tipo de letra por defecto
ex Relativa al valor de x-height de

la fuente actual
ch Relativa
al ancho del cero “0”
rem Relativa al tamaño de letra del

elemento raíz
Relativa
al 1% del ancho del tamaño de la ventana del
vw
navegador
Relativa
al 1% del alto del tamaño de la ventana del
vh
navegador
EducaMadrid - Vicepresidencia, Consejería de Educación y Universidades - Ayuda

2.D. Hojas de Estilo (CSS)

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

2.D. Hojas de Estilo (CSS)

Cargado por

Copyright:

Formatos disponibles

27/10/22, 13:17 2.D.

Hojas de estilo (CSS)

2.D. Hojas de estilo (CSS)

Sitio: VIRGEN DE LA PAZ Imprimido por: Obdulia Caro Rodriguez

2. Cómo incluir CSS en un documento HTML

3. Sintaxis de las reglas de estilo

4. Cascada y herencia de estilos

7. Posicionamiento en hojas de estilo

En 1995, el W3C añadió a su grupo de trabajo de HTML el desarrollo y estandarización de CSS.

CSS 1, se publicó en 1996, es la primera recomendación oficial.

CSS 2, publicada en 1998, es la segunda recomendación oficial.

CSS Reference With Browser Support - W3shool

2. Cómo incluir CSS en un documento HTML

2.1. Declaración en línea

Deben evitarse para preservar el principio de separación de contenidos y formato.

<p style=“color: red;”> …. </p>

2.2. Declaración Interna

<style type=“text/css”> …. </style>

2.3. Declaración en archivo externo

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

El archivo de estilos tendrá extensión .css.

3. Sintaxis de las reglas de estilo

Declaración: especifica los estilos que se aplican a los elementos.

Propiedad: permite modificar el aspecto de un atributo del elemento.

Valor: indica el nuevo valor del atributo modificado en el elemento.

4. Cascada y herencia de estilos

4. Propiedades por defecto del navegador

Selector universal (*)

Sirve para seleccionar todos los elementos de la página.

* {margin:10px; padding: 5px};

P, h1, h2 { text-align: center}

5.1. Selectores de clase

<p class=“parrafoCentrado”> ….. </p>

p.parrafoCentrado {text-align: center; }

Sin embargo si hacemos la misma definición pero omitimos el identificador de etiqueta:

.parrafoCentrado { text-align: center; }

<h1 class="parrafoCentrado">encabezado 1 centrado</h1>

Veamos a continuación un código de ejemplo:

<!DOCTYPE html >

<title>Ejemplo del uso de clases en hojas de estilo</title>

<style type="text/css"> .clase_azul{color:blue} p.clase_roja{color:#ff0000; font-style:italic; font-weight:bolder;

<h3 class="clase_azul">Ejemplo del uso de clases en hojas de estilo</h3>

<p class="clase_azul"> Incluso el p&aacute;rrafo.</p>

El resultado en el navegador sería:

5.2. Selectores descendentes

No tiene porqué ser descendiente directo.

El nivel de anidación puede tener varios niveles, por ejemplo:

p,a,b,i {color: blue;}

Se referencia mediante una de las siguientes posibilidades:

#unico { color: blue;}

p#unico {color: blue;}

Atributos de color y fondo.

Pasemos a verlos detenidamente.

6.1. Atributos de color y fondo

Los atributos de color y fondo son los que enumeramos a continuación:

<!DOCTYPE html >

<title>Ejemplo de atributos CSS de color y fondo</title>

body { background-color: black; color:yellow; }

<h3>Ejemplo del uso de atributos de color y fondo</h3>

En el navegador se ve del siguiente modo:

6.2. Atributos de fuente

<title>Ejemplo de atributos CSS de fuente</title>

body { background-color: black; color:yellow; font-family: courier }

<p class="clase_azul"> Incluso el párrafo.</p>

<p>El párrafo está tabulado</p>

<title>Ejemplo de atributos CSS de clasificación</title>

<h3>Ejemplo del uso de atributos de clasificación</h3>

<li>El símbolo marcador de las listas es un cuadrado.</li>

<li>La posición del marcador es exterior</li>