CSS Tutorial Virtualnauta 01 Introducción

Introducción al CSS
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que
describe como se va a presentar un documento en la pantalla, en un dispositivo de sonido,
cómo se va a imprimir, en un dispositivo braille, aparatos moviles, etc.
CSS nos permite posicionar el contenido, diseñar tablas, definir caraterísticas para sitios en
diferentes idiomas y propiedades relacionadas con la comunicación del usuario.
CSS nos ayuda a separar el contenido de la presentación.
CSS nos permite controlar el estilo y el formato de múltiples páginas Web a la vez.
¿Por qué trabajar con Hojas de Estilo?

Las hojas de estilo nos ahorran mucho trabajo.
La manera correcta de trabajar es separando el contenido de cada página, del diseño de la
misma.
Normalmente los estilos son guardados en un archivo externo con la extensión ".css".
Este archivo le permite hacer los cambios de apariencia y disposición de los elementos en
todas las páginas de su sitio Web, con tan solo editar un solo documento CSS.
La estructura de CSS
CSS funciona a base de reglas.
Cada regla está compuesta por un selector y la declaración.
La declaración a su vez esta compuesta por una propiedad y su valor.
La declaración debe estar definida entre llaves({...})
Sintaxis
selector{propiedad:valor}
Los tipos de selectores básicos que se pueden establecer son los siguientes: por tipo, de clase,
y de id.
Selector por tipo (el nombre del selector es el nombre de una etiqueta HTML)
Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML
serán afectados por la declaración cuya propiedad es color y su valor es blue.
p{color:blue}
1
Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.
p{font-family:"Times New Roman"}
Si deseas especificar más de una propiedad, deberás separarlas con un punto y coma(;).
h1{color:red; text-align:center}
Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en
diferentes líneas.
p
{
color:red;
text-align:center;
}
Si deseas definir una misma propiedad para varios selectores, solo debes agruparlos
separándolos con una coma(,)
p, h1, h2, h3
{
color:blue;
font-family:Arial;
}
El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML,
mediante el atributo class.
Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class
debe ir antepuesto por un punto (.)
Sintaxis
p.azul {color:blue}
p.rojo {color:red}
Ejemplo
Y así se vería en el documento HTML.
Código Resultado
<head>
<style type="text/css"> Este texto es de color azul
p.azul {color:blue}
p.rojo {color:red} Este texto es de color rojo
</style>
</head>
<body>
<p class="azul">Este texto es de color azul</p>
<p class="rojo">Este texto es de color rojo</p>
</body>
2
Con el selector class también podemos definir diferentes estilos para cualquier elemento
HTML.
Por ejemplo definimos un class rojo y uno azul.
Sintaxis
.azul {color:blue}
.rojo {color:red}
Ejemplo
Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.
Código Resultado
<head>
<style type="text/css"> Este título es de color rojo
.azul {color:blue}
.rojo {color:red} Este texto es de color azul
</style>
</head> Y este texto es de color rojo
<body>
<h3 class="rojo">Este título es de color rojo</h3>
<p class="azul">Este texto es de color azul</p>
<p class="rojo">Y este texto es de color rojo</p>
</body>
El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el
documento. Hacemos referencia a él anteponiendo el símbolo "#".
Sintaxis
#centrado {text-align:center} /* afecta a cualquier elemento que lo use */
h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */
Ejemplo
Definimos un id general y uno para un selector en particular.
Código Resultado
<head>
<style type="text/css"> Título centrado
#centrado {text-align:center}
h3#subrayado {text-decoration:underline} Título subrayado
</style>
</head> Texto centrado
<body> El selector id no afecta al elemento p ya que el

<h3 id="centrado">Título centrado</h3> mismo no ha sido definido como texto
<h3 id="subrayado">Título subrayado</h3> subrayado
<p id="centrado">Texto centrado</p>
<p id="subrayado">El selector id no afecta al
elemento p ya que el mismo no ha sido definido como
texto subrayado</p>
</body>
3
Si un elemento HTML se ve afectado por más de un tipo de selector, el de mayor prioridad será
el que afecte al identificador, seguido del de clase y, finalmente, del de tipo. En este caso,
entre las propiedades que se repitan en esos selectores, se aplicarán las del selector de mayor
prioridad. Así, en este ejemplo, el color del texto de dicho elemento será el rojo, ya que es la
propiedad del selector que afecta a su identificador:
a{
color: green;
}
.clase1 {
color: blue;
}
#id1 {
color: red;
}
<a href=https://google.es class=”clase1” id=”id1”>Google</a>
Comentarios en CSS
Para agregar un comentario que ayude a ser más legible el documento utilizamos
"/* comentario */".
p
{
text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */
font-family:Verdana; /* tipo de fuente:Verdana */
}
¿Dónde usar los estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la
misma.
Hay 3 formas de insertar una hoja de estilos:
1. En línea
2. Dentro de la sección Head
3. Hojas de estilo externas
1. En línea (en un atributo, con el atributo style, y afecta sólo al elemento que lo lleva)
Definimos el estilo directamente dentro del código HTML.
Sintaxis
<selector style="propiedad: valor;propiedad: valor;">
Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style.
4
Ejemplo
Vamos a aplicar un estilo "solo" al elemento p de esta línea.
Código Resultado
<p style="color:red; margin-left:30px;">
Este párrafo es de color rojo y se encuentra a 30 pixels Este párrafo es de color rojo y se encuentra
del margen izquierdo. a 30 pixels del margen izquierdo.
</p>
Esta manera de incluir el código CSS es desaconsejable excepto en aquellos casos en que se
deseen realizar pruebas puntuales. el primer motivo por el que se desaconseja tiene que ver
con la repetición innecesaria de código, ya que para establecer, por ejemplo, un aspecto
común a varios elemntos, se debería copiar el atributo style con los mismos valores en todos
ellos. Por otro lado, si en el futuro se quisiera modificar una propiedad, como el color del texto,
se tendría que cambiar en todos ellos.
2. Dentro de la sección Head (con la etiqueta <style>)
<style> permite un diseño general que afectará a todo el documento HTML en el que se
encuentre dicha etiqueta. Esta se suele incluir en la cabecera del documento, es decir, dentro
del elemnto <head>.
Aun siendo una solución mejor que usar el atributo style, tampoco es la opción más
recomendable, ya que el código CSS incluído aquí sólo afectará al documento actual y no se
podrá reutilizar en otros sin haberse duplicado previamente.
Sintaxis
<head>
<style type="text/css">
selector 1 {propiedad: valor;}
selector 2 {propiedad: valor;}
</style>
</head>
<body>
<etiqueta 1>Bla, bla, bla</etiqueta 1>
<etiqueta 2>Texto, texto, texto</etiqueta 2>
</body>
La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas

<head> y </head> se usa para definir los estilos correspondientes a esta página solamente.
Ejemplo
Vamos a aplicar estilos a aquellos elementos definidos en la sección Head solo de "esta" hoja.
Código Resultado
<head>
<style type="text/css"> Este texto es de color blanco y el color de fondo
body {background-color:#008080} de la página es #008080.
p {color:white}
</style>
</head>
<body>
<p>
Este texto es de color blanco
y el color de fondo
5
de la página es #008080.
</p>
</body>
En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de
estilo.
Entre las etiquetas style definimos al selector body con un color de fondo #008080 y al
selector pde color blanco.
3. Hojas de estilo externas (en archivos externos independientes)
Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias páginas.
Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web.
Los archivos de hojas de estilo deben llevar la terminación .css. Este archivo se situará, por lo
general, en un directorio diferente al de los documentos HTML.
Sintaxis
Contenido del archivo de los estilos
selector
{
propiedad:valor; /* No olvidar el (;) al final de cada valor */
propiedad:valor;
propiedad:valor;
}
Sintaxis
Esta es la forma de llamar al archivo ".css" desde un documento HTML
<head>
<link rel="stylesheet" type="text/css" href="/archivo.css">
</head>
Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link>
ubicada en la cabecera del documento.
 rel="stylesheet" nos indica que la relación es una hoja de estilo.
 type="text/css" nos dice que el tipo es texto y css.
 href="/fuentes.css" es el nombre del documento que contiene el código css.
Ejemplo
Así se vería por ejemplo, un archivo CSS externo que llamaremos "estilos.css".
Nota: el código, en los archivos de hojas de estilos externos, comienza directamente con el
selector.
Código CSS
p
{
font-family:Arial;
font-size:12px;
font-weight:bold;
}
Así se vería el documento HTML que llama al archivo "estilos.css".
6
Código HTML
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>
<body>
<p>Características de este texto: Arial, de 12 pixels, bold</p>
</body>
Resultado
Características de este texto: Arial, de 12 pixels, bold
El fondo con CSS

Las propiedades de fondo (en inglés background) en CSS, nos permiten controlar el color de
fondo de un elemento.
Colocar una imagen de fondo, la ubicación de la misma en la pantalla (centrada, a la izquierda,

en alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetirá.
En términos del modelo de cajas la propiedad background afecta tanto al fondo del elemento,
al relleno del mismo (padding) y a los bordes (border).
Las propiedades de background se aplican atodos los elementos
La propiedad de los fondos o backgrounds

La propiedad background es la forma comprimida en la cual podemos definir todos los valores
de los fondo de una sola vez.
Sintaxis
Establecer diferentes características del fondo a la ves.
<head>
<style="type:text/css">
selector {background: valor 1 valor 2}
</style>
</head>
Nota: debemos dejar un espacio en blanco entre los valores
Los posibles valores para definir los fondos
color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat | fixed |
% | longitud | left | center | right | top | bottom
Ejemplo
Vamos a aplicar un fondo rojo al elemento h2 de esta página.
Código Resultado
<head>
h2{background:red}
El fondo del título es
</style>
</head>
rojo.
7
<body>
<h2>El fondo del título es rojo.</h2>
</body>
Aplicar color al fondo

La propiedad background-color especifica el color de fondo del elemento.
Sintaxis
Establecer el color de fondo.
<head>
etiqueta HTML {background-color: valor}
</style>
</head>
Los posibles valores para definir los colores del fondo
color | transparent
Ejemplo
Vamos a aplicar un color de fondo a la página.
Código Resultado
<head>
<style type="text/css"> El fondo de la página es naranja.
body{background-color:orange}
</style>
</head>
<body>
<p>El fondo de la página es naranja.</p>
</body>
Decorar el fondo con una imagen

La propiedad background-image inserta una imagen como fondo del elemento.
Sintaxis
Insertar una imagen de fondo.
<head>
etiqueta HTML {background-image: url("nombre-de-la-imagen")}
</style>
</head>
Los posibles valores para la inserción de imágenes de fondo
url | none
8
Ejemplo
Vamos a usar una imagen de fondo en nuestra página.
Código
<head>
body{background-image:url("fondo3.jpg")}
</style>
</head>
<body>
<p>Ejemplo de una imagen de fondo</p>
</body>
Imagen más pequeña que el tamaño del fondo

Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen
horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la
propiedadbackground-repeat.
Sintaxis
Repetir una imagen de fondo.
<head>
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-repeat: valor;
}
</style>
</head>
Los posibles valores para la repetición de una imagen en el fondo
repeat | repeat-x | repeat-y | no-repeat
Ejemplo
Vamos a usar esta imagen de fondo en nuestro ejemplo.
Código
Resultado
<head>
body {
background-image:url("images/fondo.png");
background-repeat:repeat;
}
</style>
</head>
<body>
<h4>Repetición de una imagen de fondo</h4>
</body>
9
Imagen de fondo estática o dinámica
La propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es
decir que al movernos por la página con la barra de desplazamiento, la imagen de fondo quede
anclada en el lugar o se desplaze con la misma.
Sintaxis
Imagen de fondo estática o dinámica.
<head>
etiqueta HTML {
background-attachment: valor;
}
</style>
</head>
Los posibles valores para esta propiedad
fixed | scroll
Elije el lugar exacto para ubicar la imagen de fondo

La propiedad background-position nos permite ubicar una imagen en un lugar específico
dentro del fondo.
Sintaxis
<head>
etiqueta HTML {
background-position: valor;
}
</style>
</head>
Los posibles valores para la ubicación exacta de la imagen en el fondo
% | coordinadas x-y | left | center | right | top | bottom
10
Ejemplo
Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.
Código Resultado
<head>
<style type="text/css"> Imagen en las coordenadas x=60px y=100px
body {
background-image: url("images/fondo.jpg");
background-repeat: no-repeat;
background-position: 60px 100px;
}
</style>
</head>
<body>
<p>Imagen en las coordenadas x=60px y=100px</p>
</body>
Propiedades del fondo
Propiedad Descripción Valores Detalles
background Propiedades background-color Color de fondo

individuales background-image Imagen de fondo
relacionadas con el
fondo. background-repeat Repetición del fondo
background- Acoplamiento del
attachment fondo
background-position Posición del fondo
background-color Color de fondo. color Color
transparent Transparente
background-image Imagen de fondo. URL Dirección URL
none Nada
background-repeat Repetición de la repeat Repite
imagen de fondo. repeat-x Repite
horizontalmente
repeat-y Repite verticalmente
no-repeat No se repite
background- Desplazamiento de la scroll Desplaza
attachment imagen de fondo. fixed Fija
background-position Posición de la imagen % Porcentaje
de fondo. longitud Longitud
left Izquierda
center Centro
right Derecha
top Superior
bottom Inferior
11
Los textos con CSS
Las propiedades de los textos nos permiten controlar la apariencia de los mismos.
Entre los ajustes que podemos aplicar a los textos, tenemos:
1. La sangría
2. El alineado
3. La decoración
4. Espacio entre letras
5. Espacio entre palabras
6. Mayúsculas y minúsculas
7. Espacios en blando
Sangría de los textos - text-indent

La propiedad text-indent se utiliza para generar sangría en la primera línea de un texto.
Sintaxis
<head>
selector {text-indent: valor}
</style>
</head>
Los posibles valores para definir la sangría
longitud | %
Ejemplo
Vamos a ver como se comporta un texto con sangría.
Código Resultado
<head>
<style type="text/css"> En la primera línea de este párrafo
p{text-indent:2cm} observamos una sangría de 2 centímetros de
</style> distancia del borde.
</head>
<body>
<p>En la primera línea de este párrafo observamos
una sangría de 2 centímetros de distancia del
borde.</p>
</body>
Alineado de los textos - text-align

La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del
bloque que lo contiene.
Sintaxis
<head>
12
selector {text-align: valor}
</style>
</head>
Los posibles valores para alinear los textos
left | right | center | justify
Ejemplo
Alineamos un texto a la derecha y otro en el centro.
Código Resultado
<head>
<style type="text/css"> Texto a la derecha
p.der{text-align:right}
p.cen{text-align:center} Texto en el centro
</style>
</head>
<body>
<p class="der">Texto a la derecha</p>
<p class="cen">Texto en el centro</p>
</body>
La decoración de los textos - text-decoration

La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una línea
superior o parpadear un texto.
Sintaxis
<head>
selector {text-decoration: valor}
</style>
</head>
Los posibles valores para decorar los textos
none | underline | overline | line-through | blink
Ejemplo
Definimos un texto parpadeante y un enlace sin subrayar.
Código Resultado
<head>
<style type="text/css"> Texto parpadeando
p.parpadeo{text-decoratio:blink}
a.sin_linea{text-decoration:none} Ir a la home de Virtualnauta
</style>
</head>
<body>
<p class="parpadeo">Texto parpadeando</p>
<a class="sin_linea" href="/www.virtualnauta.com">
Ir a la home de Virtualnauta</a>
</body>
13
Separación entre letras - letter-spacing
La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra
y letra de un mismo texto.
Sintaxis
<head>
selector {letter-spacing: valor}
</style>
</head>
normal | distancia
Ejemplo
Vamos definir una distancia entre letras de 5 píxeles.
Código Resultado
<head>
<style type="text/css"> La distancia entre letras es
p{letter-spacing:5px} de 5 píxeles
</style>
</head>
<body>
<p>La distancia entre letras es de 5 píxeles</p>
</body>
Separación entre palabras - word-spacing

La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre
palabras.
Sintaxis
<head>
selector {word-spacing: valor}
</style>
</head>
normal | distancia
Ejemplo
Vamos definir una distancia entre palabras de 2 centímetros.
Código Resultado
<head>
<style type="text/css"> La distancia entre palabras es de 2 centímetros
p{word-spacing:2cm}
</style>
</head>
14
<body>
<p>La distancia entre palabras es de 2
centímetros</p>
</body>
Transformar los textos a mayúsculas o minúsculas - text-

transform
La propiedad text-transform se utiliza para convertir un texto a mayúsculas o minúsculas.
Sintaxis
<head>
selector {text-transform: valor}
</style>
</head>
Los posibles valores para convertir los textos
capitalize | uppercase | lowercase | none
Ejemplo
Vamos definir la primera letra de cada palabra en mayúsculas.
Código Resultado
<head>
<style type="text/css"> La Primera Letra De Cada Palabra Se A
p{text-transform:capitalize} Convertido A Mayúsculas
</style>
</head>
<body>
<p>La primera letra de cada palabra se a convertido
a mayúsculas</p>
</body>
Espacios en blanco - white-space

La propiedad white-space se utiliza para manipular el comportamiento de los espacios en
blanco dentro de cada elemento.
Sintaxis
<head>
selector {white-space: valor}
</style>
</head>
normal | pre | nowrap | pre-wrap | pre-line
15
Ejemplo
Vamos ver el comportamiento de los espacios en blanco dentro de un texto.
Código Resultado
<head>
<style type="text/css"> Dejo varios espacios en blanco entre palabra y
p.pre{white-space:pre-wrap} palabra.
p.normal{white-space:normal}
</style> Aca también dejo varios espacios en blanco
</head> entre palabra y palabra pero los comprime a uno
solo.
<body>
<p class="pre">Dejo varios espacios en
blanco entre palabra y palabra.</p>
<p class="normal">Aca también dejo varios
espacios en blanco entre palabra y
palabra pero los comprime
a uno solo.</p>
</body>
Propiedades de los textos
text-indent Desplazamiento de la primera longitud Longitud

línea del texto. % Porcentaje
text-align Alineamiento del texto. left Izquierda
right Derecha
center Centro
justify Justificar
text-decoration Efectos de subrayado, none Sin efectos
tachado, parpadeo. underline Subrayado
overline Línea por encima
line-through Tachado
blink Parpadeo
text-transform Transformaciones del texto a capitalize Convierte en mayúscula el
mayúsculas/minúsculas. primer carácter de cada
palabra
uppercase Convierte en mayúscula
todas las letras del
elemento
lowercase Convierte en minúscula
todas las letras del
elemento
none Neutraliza el valor
heredado
letter-spacing Espacio entre caracteres. normal Normal
longitud Longitud
word-spacing Espacio entre palabras. normal Normal
longitud Longitud
16
white-space Comportamiento de los normal Normal
espacios dentro de los pre Preformateado
elementos.
nowrap Los cambios de línea solo
ocurren con el elemento br
pre-wrap
pre-line
direction Sentido direccional de la ltr Izquierda a derecha
escritura. rtl Derecha a izquierda
unicode-bidi Sentido direccional de la normal Normal
escritura. embed Abre un nivel adicional de
incrustación con respecto
al algoritmo bidireccional
bidi-override Si el elemento es a nivel
de línea o es un elemento
a nivel de bloque, crea una
sustitución
Las fuentes
Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Posiblemente la definición de las fuentes sea el uso más común de CSS.
Entre los ajustes que podemos aplicar a las fuentes, tenemos:
1. La familia
2. La intensidad
3. El estilo
4. El tamaño
5. La variante
6. La definición general
Familia de fuentes - font-family

Para definir el tipo de fuente usamos la propiedad font-family.
Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan
(ej.:Arial, Verdana, Helvetica, sans serif, etc.).
Sintaxis
<head>
selector {font-family: familia de fuente, familia de fuente genérico}
</style>
</head>
Nota: debemos utilizar comas entre los valores.
Los posibles valores para definir las familias de fuentes
Las más comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | Univers
Los posibles valores para definir las familias de fuentes genérico
serif | sans-serif | cursive | fantasy | monospace
17
Ejemplo
Vamos a definir una familia para una fuente.
Código Resultado
<head>
<style type="text/css"> La familia de esta fuente es Times New Roman.
p{font-family:"Times New Roman", serif}
</style>
</head>
<body>
<p>La familia de esta fuente es Times New
Roman.</p>
</body>
Intensidad de las fuentes - font-weight

Una característica muy útil es el control de la intensidad de las fuentes. Para ello utilizamos la
propiedad font-weight.
Sintaxis
<head>
selector {font-weight: valor}
</style>
</head>
Los posibles valores para definir los fondos
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Ejemplo
Vamos a aplicar intensidad a las fuentes del elemento h2 de esta página.
Código Resultado
<head>
h2{font-weight:lighter}
La intensidad de este texto
</style>
</head>
es lighter.
<body>
<h2>La intensidad de este texto es lighter.</h2>
</body>
Estilo de las fuentes - font-style

La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.
Sintaxis
<head>
18
selector {font-style: valor1}
</style>
</head>
Los posibles valores para definir los estilos
normal | italic | oblique
Ejemplo
Vamos a definir el estilo del elemento h3 de este ejemplo.
Código Resultado
<head>
<style type="text/css"> El estilo de este título es
h3{font-style:oblique}
</style> oblique.
</head>
<body>
<h3>El estilo de este título es oblique.</h3>
</body>
Tamaño de las fuentes - font-size

Controlar el tamaño de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso
esfont-size.
Sintaxis
<head>
selector {font-size: valor}
</style>
</head>
Los posibles valores para definir el tamaño de las fuentes
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | tamaño | %
Ejemplo
Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.
Código Resultado
<body>
Tamaño:xx-small
<p style="font-size:xx-small">Tamaño:xx-small</p>
<p style="font-size:x-small">Tamaño:x-small</p> Tamaño:x-small
<p style="font-size:small">Tamaño:small</p>
<p style="font-size:medium">Tamaño:medium</p> Tamaño:small
<p style="font-size:large">Tamaño:large</p>
<p style="font-size:x-large">Tamaño:x-large</p>
<p style="font-size:xx-large">Tamaño:xx-large</p>
Tamaño:medium
<p style="font-size:larger">Tamaño:larger</p>
<p style="font-size:smaller">Tamaño:smaller</p> Tamaño:large
</body>
Tamaño:x-large
19
Tamaño:xx-
large
Tamaño:larger
Tamaño:smaller
Variante de las fuentes - font-variant

Una variación que se le puede dar a las fuentes es el de usar pequeñas mayúsculas, para eso
usamos de la propiedad font-variant.
Sintaxis
<head>
selector {font-variant: valor}
</style>
</head>
Los posibles valores para definir las variantes de las fuentes
normal | small-caps
Ejemplo
Vamos a variar las fuentes de este título h2.
Código Resultado
<head>
h2{font-variant:small-caps}
EL TEXTO ESTA ESCRITO EN
</style> MINÚSCULA.
</head>
<body>
<h2>El texto esta escrito en minúscula.</h2>
</body>
La propiedad de las fuentes - font

La propiedad font es la forma comprimida en la cual podemos definir todos los valores de las
fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.
Sintaxis
<head>
selector {font: valor1 valor2 valor n}
</style>
</head>
20
Nota: debemos dejar un espacio en blanco entre los valores.
Los posibles valores para definir las fuentes
Todos los valores de font-family | font-style | font-variant | font-weight | font-size | caption |

icon | menu | message-box| small-caption | status-bar
Ejemplo
Vamos a definir un tipo de fuente para p.
Código Resultado
<head>
p{font:large Palatino bold italic} El tipo de fuente es Palatino
</style>
</head> large bold en italic.
<body>
<p>El tipo de fuente es Palatino large bold en
italic.</p>
</body>
Propiedades de las fuentes

font Atajo para establecer el resto de font-style Estilo de fuente

propiedades sobre las fuentes a font-variant Variante de fuente
la vez.
font-weight Peso de la fuente
font-size Tamaño de la
fuente
font-family Familia de fuentes
caption Fuente a utilizar en
los botones, menús
desplegables, etc.
icon Ícono
menu Fuente de los
menús
desplegables
message-box Fuente de las caja
de mensajes
small-caption Pequeña leyenda
status-bar Fuentes de la barra
de estado
font-family Familias de fuentes. nombre-familia Nombre de la
familia de fuentes
familia-genérica Familia genérica
font-style Estilo de la fuente. normal Estilo normal
italic Itálica
oblique Oblicua
font-variant Convierte las minúsculas a normal Normal
21
mayúsculas pero mantienen un small-caps Mayúsculas
tamaño inferior a las mayúsculas. pequeñas
font-weight Intensidad de la fuente. normal Normal
bold Negrita
bolder Negrita mas fuerte
lighter Suave
100 Valor 100
200 Valor 200
300 Valor 300
400 Valor 400
500 Valor 500
600 Valor 600
700 Valor 700
800 Valor 800
900 Valor 900
font-size Tamaño de la fuente. xx-small XX-Pequeña
x-small X-Pequeña
small Pequeña
medium Mediana
large Grande
x-large X-Grande
xx-large XX-Grande
larger Máxima
smaller Mínima
tamaño Tamaño
%
Contornos con CSS
Los contornos o outlines son líneas que se encuentran alrededor de objetos visuales tales
como botones, formularios activos o mapeado de imágenes.
Los contornos se diferencian de los bordes en:
 Los contornos no ocupan espacio

 Los contornos no necesariamente son rectangulares
Un contorno definido con la propiedad outlinees dibujado "fuera" de la caja y siempre se

encuentra por encima del elemento y no afecta a las cajas anexas a este.
El espesor de los contornos

La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede
aplicar a todos los elementos.
22
Sintaxis
<head>
selector {outline-width: valor}
</style>
</head>
Los posibles valores para definir el espesor de los contornos
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in)
Ejemplo
Vamos a aplicar un espesor determinado para el contorno de un botón.
Código Resultado
<head>
button
{
outline-width: 3px;
outline-style: solid;
}
</style>
</head>
<body>
<button>Enviar</button>
</body>
Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style
El estilo de los contornos

La propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a
todos los elementos.
Sintaxis
<head>
selector {outline-style: valor}
</style>
</head>
Los posibles valores para definir el estilo de los contornos
none | dotted | dashed | solid | double | groove | ridge | inset | outset
Ejemplo
Vamos a aplicar un estilo determinado para el contorno de un botón.
Código Resultado
<head>
button
{
outline-style: dotted;
}
23
</style>
</head>
<body>
</body>
El color de los contornos

La propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a
todos los elementos.
Sintaxis
<head>
selector {outline-color: valor}
</style>
</head>
Los posibles valores para definir el estilo de los contornos
color | invert
Ejemplo
Vamos a definir un color determinado para el contorno de un texto.
Código Resultado
<head>
p
{
outline-color: blue;
outline-style: solid;
}
</style>
</head>
<body>
<p>Texto rodeado de un contorno de color azul</p>
</body>
Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style
La propiedad general de los contornos

La propiedad outline especifica todas las propiedades de los contornos de una sola vez.
Sintaxis
<head>
selector {outline: valor-1 valor-2 valor-n}
</style>
</head>
Los posibles valores para la propiedad outline
24
thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | none | dotted | dashed | solid |
double | groove | ridge | inset | outset | color | invert
Ejemplo
Vamos a aplicar todos los valores al contorno de un botón.
Código Resultado
<head>
button{outline: groove red thick}
</style>
</head>
<body>
</body>
outline Propiedades individuales de los outline-color Color de la línea

contornos.
outline-style Estilo de la línea
No funciona en IE 5, 6 y 7
outline-width Ancho de la línea
outline-width Ancho del contorno. thin Fino
No funciona en IE 5, 6 y 7 medium Medio
thick Grueso
longitud Longitud
outline-style Estilo del contorno. none Nada
No funciona en IE 5, 6 y 7 hidden Oculta
dotted Punteada
dashed Líneas de rayas
solid Solida
double Doble
groove Acanalado
ridge En relieve
inset Recuadro
outset Resalte
outline-color Color del contorno. color Color
No funciona en IE 5, 6 y 7 invert Color inverso al
color de fondo
Listas con CSS
Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen,
número o letra de los diferentes Items y la posición de la misma.
25
El tipo de estilo de las listas
La propiedad list-style-type especifica el formato visual de la lista.
Esta propiedad se aplica a todo elemento con "display: list-item".
Sintaxis
selector {list-style-type: valor}
Los posibles valores para definir el estilo de las listas
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-

greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
Ejemplo
Vamos a aplicar un estilo a una lista.
Código Resultado
<head>
ol{list-style-type: lower-latin}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
Listas con imágenes

La propiedad list-style-image define la imagen que va a ser usada como marca de cada ítem.
Sintaxis
selector {list-style-image: valor}
Los posibles valores para definir las imágenes de las listas
URL | none
Ejemplo
Vamos a aplicar una imagen a una lista.
Código Resultado
<head>
ul{list-style-image: url("punto.gif")}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
26
<li>AJAX</li>
</ul>
</body>
La posición de la marca en la lista

La propiedad list-style-position especifica la posición del marcador de los ítems con respecto
a la caja de la lista.
Sintaxis
selector {list-style-position: valor}
Los posibles valores para definir la posición de los marcadores
inside | outside
Ejemplo
Vamos a ubicar los marcadores en diferentes posiciones.
Código Resultado
<head>  Primer elemento de la lista
 Segundo elemento de la lista
ul.dentro{list-style-position: inside}
ul.fuera{list-style-position: outside}  Tercer elemento de la lista
</style>
</head>
 Primer elemento de la lista
<body>  Segundo elemento de la lista
<ul class="dentro">
<li>Primer elemento de la lista</li>  Tercer elemento de la lista
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
<ul class="fuera">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
</body>
Todas las propiedades de las listas

La propiedad list-style se usa para definir todos los valores de las listas a la vez.
Sintaxis
selector {list-style: valor1 valor2 valor-n }
Los posibles valores para definir las imágenes de las listas
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-

greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL |
none | inside | outside
27
Ejemplo
Vamos a aplicar diferentes propiedades a una lista.
Código Resultado
<head>  XML
<style type="text/css">  VBScript
ul{list-style: square inside}
</style>  AJAX
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
Tabla de las propiedades de las listas
list-style Permite establecer el estilo de la list-style-type Tipos de listas

lista, la imagen y/o la posición.
list-style-position Posición de la lista
list-style-image Imagen de la lista
list-style-type Estilo aplicable a los marcadores disc Disco
visuales de las listas. circle Círculo
square Cuadrado
decimal Nro.decimal
decimal-leading- Nro.decimal
zero comenzando de 0
No funciona en IE
5, 6 y 7
lower-roman Nro.romano
minúscula
upper-roman Nro.romano
mayúscula
lower-greek Letra griega
minúscula
No funciona en IE
5, 6 y 7
lower-latin Letra latina
minúscula
No funciona en IE
5, 6 y 7
upper-latin Letra latina
mayúscula
No funciona en IE
5, 6 y 7
armenian Letra armenia
No funciona en IE
5, 6 y 7
28
georgian Letra gregoriana
No funciona en IE
5, 6 y 7
lower-alpha Letra alfabeto en
minúscula
upper-alpha Letra alfabeto en
mayúscula
none Nada
list-style-image Imagen aplicable a los elementos URL URL
de las listas. none Nada
list-style-position Posición dentro de la lista de los inside Dentro
elementos marcadores de las outside Fuera
listas.
Tablas con CSS

Las propiedades de las tablas nos permiten definir el comportamiento, el diseño y la ubicación
de los elementos que componen cada tabla.
Los temas que estudiaremos:
1. La ubicación del título

2. El formato de las tablas
3. El modelo de los bordes
4. El espacio entre celdas
5. El comportamiento de las celdas vacías
Ubicación del título

La propiedad caption-side nos permite ubicar el título de la tabla por encima o por debajo de
la misma. La alineación horizontal del mismo se puede establecer con la propiedad text-align.
Sintaxis
selector {caption-side: valor}
Los posibles valores para definir la ubicación del título
top | bottom | inherit
Ejemplo
Vamos a ubicar el título de la tabla por debajo de la misma.
Código Resultado
<head>
<style type="text/css"> Producto Precio
caption{caption-side: bottom}
</style> Manteca 4.00
</head>
Leche 1.50
<body>
<table border="1"> Precio de los lácteos
<caption>Precio de los lácteos</caption>
<tr>
29
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Manteca</td>
<td>4.00</td>
</tr>
<tr>
<td>Leche</td>
<td>1.50</td>
</tr>
</table>
</body>
Nota: Internet Explorer ubica el título siempre por encima de la tabla.
Formato de las tablas

La propiedad table-layout se usa para diseñar las filas, columnas o celdas de una tabla. Entre
las posibilidades de diseño podemos definir si las mismas van a tener el tamaño fijo que
estipulemos(fixed) o se adecuarán al contenido sin importar la medida que hayamos
establecido (auto).
Sintaxis
selector {table-layout: valor}
Los posibles valores para definir el formato de las tablas
auto | fixed | inherit
Ejemplo
Vamos a comparar las 2 propiedades de una tabla.
Código Resultado
<head>
<style type="text/css"> Tabla con tamaño automático
table.auto{table-layout: auto}
table.fija{table-layout: fixed} 11111111111111111111111 22222222222 333333
</style>
</head>
Tabla con tamaño fijo
<body>
<table class="auto" style="border: solid; width: 100%"> 11111111111111111111111 22222222222 333333
<caption>Tabla con formato automático</caption>
<tr>
<td
width="10%">111111111111111111111111111111</td>
<td width="40%">222222222222</td>
<td width="50%">33333</td>
</tr>
</table>
<table class="fija" style="border: solid; width: 100%">

<caption>Tabla con formato fijo</caption>
<tr>
<td
width="10%">111111111111111111111111111111</td>
<td width="40%">222222222222</td>
<td width="50%">33333</td>
30
</tr>
</table>
</body>
Modelo de los bordes

La propiedad border-collapse nos permite seleccionar la apariencia de los bordes de cada
celda de la tabla. Existen 2 modelos diferentes de bordes: separados y continuos.
Sintaxis
selector {border-collapse: valor}
Los posibles valores para los diferentes modelos de bordes
collapse | separate | inherit
Ejemplo
Vamos a comparar los dos modelos de bordes.
Código Resultado
<head>
table.plegado{border-collapse: collapse}
table.separado{border-collapse: separate}
</style>
</head>
<body>
<table class="plegado" style="border:solid 1px">
<caption>Tabla con los bordes plegados</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Luis</td>
<td>23</td>
</tr>
</table>
<table class="separado" style="border:solid 1px">
<caption>Tabla con los bordes separados</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Roberto</td>
<td>19</td>
</tr>
</table>
</body>
Espacio entre celdas
31
La propiedad border-spacing especifica la separación entre celdas adyacentes. Si
especificamos un solo valor, este actúa sobre toda la tabla. Si especificamos 2 valores el
primero define la separación horizontal y el segundo la vertical.
Sintaxis
selector {border-spacing: valor}
Los posibles valores para definir la separación entre celdas
distancia(horizontal) distancia(vertical) | inherit
Ejemplo
Vamos a definir la separación de las celdas.
Código Resultado
<head>
table{border-spacing: 10px 20px; border-collapse:
separate}
</style>
</head>
<body>
<table style="border: solid 1px">
<tr>
<th>Marca del automobil</th>
<th>Modelo</th>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
</tr>
</table>
</body>
Comportamiento de las celdas vacías

La propiedad empty-cells nos permite controlar la visualización de los bordes y fondos de una
celda vacía.
Sintaxis
selector {empty-cells: valor}
Los posibles valores para controlar las celdas vacías
show | hide | inherit
Ejemplo
Vamos a comparar el comportamiento de los dos valores.
Código Resultado
<head>
32
td.muestra{empty-cells: show}
td.oculta{empty-cells: hide}
</style>
</head>
<body>
<table style="border-collapse: separate; border solid
1px">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Estado civil</th>
</tr>
<tr>
<td>Carlos</td>
<td class="oculta"></td>
<td>casado</td>
</tr>
<tr>
<td>Julieta</td>
<td>27</td>
<td class="muestra"></td>
</tr>
</table>
</body>
Propiedades de las tablas
caption-side Posición del título respecto de la top Superior

tabla. No funciona en IE
5, 6 y 7
bottom Inferior
No funciona en IE
5, 6 y 7
table-layout Control del algoritmo usado para auto Automático
el formato de las celdas, filas y fixed Fijo
columnas.
border-collapse Selección del modelo de los collapse Plegado
bordes. separate Separado
border-spacing Espaciado entre los bordes de longitud Longitud
celdas adyacentes. No funciona en IE
5, 6 y 7
empty-cells Visibilidad de los bordes de celdas show Muestra
sin contenido. No funciona en IE
5, 6 y 7
hide Oculta
No funciona en IE
5, 6 y 7
33

CSS Tutorial Virtualnauta 01 Introducción

Cargado por

Copyright:

Formatos disponibles

CSS Tutorial Virtualnauta 01 Introducción

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

CSS Tutorial Virtualnauta 01 Introducción

Cargado por

Copyright:

Formatos disponibles

Introducción al CSS

CSS nos ayuda a separar el contenido de la presentación.

¿Por qué trabajar con Hojas de Estilo?

Cada regla está compuesta por un selector y la declaración.

La declaración a su vez esta compuesta por una propiedad y su valor.

La declaración debe estar definida entre llaves({...})

p{font-family:"Times New Roman"}

<body> El selector id no afecta al elemento p ya que el

<a href=https://google.es class=”clase1” id=”id1”>Google</a>

¿Dónde usar los estilos?

Hay 3 formas de insertar una hoja de estilos:

2. Dentro de la sección Head (con la etiqueta <style>)

La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas

3. Hojas de estilo externas (en archivos externos independientes)

Así se vería el documento HTML que llama al archivo "estilos.css".

Características de este texto: Arial, de 12 pixels, bold

El fondo con CSS

Colocar una imagen de fondo, la ubicación de la misma en la pantalla (centrada, a la izquierda,

La propiedad de los fondos o backgrounds

Nota: debemos dejar un espacio en blanco entre los valores

Los posibles valores para definir los fondos

Aplicar color al fondo

Los posibles valores para definir los colores del fondo

Decorar el fondo con una imagen

Los posibles valores para la inserción de imágenes de fondo

Imagen más pequeña que el tamaño del fondo

Los posibles valores para la repetición de una imagen en el fondo

repeat | repeat-x | repeat-y | no-repeat

Los posibles valores para esta propiedad

Elije el lugar exacto para ubicar la imagen de fondo

Los posibles valores para la ubicación exacta de la imagen en el fondo

% | coordinadas x-y | left | center | right | top | bottom

Propiedades del fondo

Propiedad Descripción Valores Detalles

background Propiedades background-color Color de fondo

Entre los ajustes que podemos aplicar a los textos, tenemos:

Sangría de los textos - text-indent

Los posibles valores para definir la sangría

Alineado de los textos - text-align

Los posibles valores para alinear los textos

left | right | center | justify

La decoración de los textos - text-decoration

Los posibles valores para decorar los textos

none | underline | overline | line-through | blink

Los posibles valores para esta propiedad

Separación entre palabras - word-spacing

Los posibles valores para esta propiedad

Transformar los textos a mayúsculas o minúsculas - text-

Los posibles valores para convertir los textos

capitalize | uppercase | lowercase | none

Espacios en blanco - white-space

Los posibles valores para esta propiedad

normal | pre | nowrap | pre-wrap | pre-line

Propiedades de los textos

Propiedad Descripción Valores Detalles

text-indent Desplazamiento de la primera longitud Longitud

Familia de fuentes - font-family

Nota: debemos utilizar comas entre los valores.

Los posibles valores para definir las familias de fuentes