CSS3

CSS significa Cascade Style Sheets, también llamado Hojas de Estilo en Cascada. CSS es un
lenguaje de marcado que se emplea para dar formato a un sitio web. Es decir, funciona en
conjunto con los archivos HTML. Por esta razón, para crear un sitio web debes saber tanto
HTML como CSS.
Las siglas CSS corresponden a ‘Cascading Style Sheets’, cuyo significado es:
Cascading. Los estilos que se aplican a los elementos de una página web se propagan a los
elementos que contiene en forma de cascada.
Style. Mediante las indicaciones CSS lo que hacemos es aplicar estilos visuales a los
diferentes elementos de las páginas web.
Sheets. Cuando se generan los estilos de una página web se añaden en ficheros aparte u hojas
con la extensión .css.

FORMAS DE APLICAR CSS A UNA PAGINA HTML

1. Dentro de la etiqueta HTML: Controlando solo la etiqueta.
Ejemplo:

2. Dentro del archivo HTML: Se agrega dentro de la zona HEAD.

Ejemplo:

Ing. Oscar Ascón Valdivia 1

3. Creando un archivo exterior (.css): Controlando todos los archivos web del sitio usando
la etiqueta para aplicar los estilos.
Ejemplo:

REGLAS
Un documento CSS está compuesto por una colección de reglas. Como lo más probable es
que haya más de una regla, una colección de reglas se llama frecuentemente rule-set o juego
de reglas. Una regla consiste en un selector acompañado de un bloque de declaraciones.
El selector determina a que elementos en el árbol del documento se aplicarán las reglas. El
bloque de declaración es una lista, separada por punto y coma ”;”, de una o varias
declaraciones, contenidas entre llaves ”{ }”. Cada declaración puede o estar vacía o estar
compuesta por una pareja propiedad/valor, donde la propiedad y el valor se separan con
dos puntos ”:”.

Ing. Oscar Ascón Valdivia 2

 SELECTOR ES DE CSS
Los selectores son los nombres que identifican un estilo o regla. Estos nombres definen
patrones que determinan a qué elementos del árbol del documento, donde la hoja de estilos
es utilizada, serán aplicadas las declaraciones del estilo. Pueden utilizarse patrones complejos
para ser más específico sobre qué elementos van a aplicarse las reglas, basados en la posición
del elemento en el árbol del documento.
SELECTOR UNIVERSAL
El selector universal se marca con un asterisco “*” y abarca a todos los elementos del
documento XHTML.

SELECTOR DE ETIQUETA (TIPO)

Los selectores por tipo afectan a todas las apariciones de un elemento en el documento
XHTML.

Cuando varios selectores van a compartir el bloque de declaraciones, los selectores pueden
ser agrupados separándolos con una coma.

Ing. Oscar Ascón Valdivia 3

SELECTOR POR CLASE
El atributo class se indica con un punto y se aplica a todos los elementos del documento con
esa clase.

SELECTOR POR IDENTIFICADOR (ID)

El atributo id debe ser único dentro del documento web, por tanto, sólo puede aplicarse a
una única aparición de un elemento dentro del árbol del documento. El selector CSS para
indicar los id es la almohadilla #.

Ing. Oscar Ascón Valdivia 4

 LAS PROPIEDADES
Las propiedades es lo que vemos encerrado dentro de las llaves de una regla.
Las reglas siguen la sintaxis de [propiedad]:[valor].
Ejemplo:

PROPIEDADES css más usadas

Propiedades comunes a todos los elementos
• width: establece la anchura del elemento. Pueden ser valores absolutos o relativos al
contenedor del elemento.
• height: similar a height para la altura del elemento.
• margin: espacio exterior al borde del elemento que mantiene con los elementos vecinos.
• padding: espacio entre el borde del elemento y su contenido.
Junto con las propiedades básicas, conviene comentar también el famoso modelo de caja de
CSS:

Ing. Oscar Ascón Valdivia 5

Propiedades CSS para texto

• font-family: tipo de letra (nombre del tipo => “Montserrat”, “Open Sans”, etc.).
• font-size: tamaño de letra.
• font-weight: peso (normal, negrita, …).
• font-style: estilo (normal, cursiva, …).
• letter-spacing: espacio entre letras.
• line-height: espacio entre líneas / altura de la línea.
• text-decoration: cosas como subrayados, tachados, etc.
• text-align: alineación del texto (left, center, right).
Propiedades CSS para colores y fondos
• color: color del elemento. Es importante notar que existen diferentes formatos para
especificar el color como palabras predefinidas (“red”, “green”, etc.), formato RGB
o valor hexadecimales.
• background-color: color del fondo del elemento.
• background-image: usar una imagen de fondo.
• background-repeat: usar una imagen de fondo como mosaico. Permite diferentes
modos de organización de la imagen.
• opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta 1
(sólido). Un valor de 0.5 sería, por tanto, un nivel de transparencia del 50%.
Propiedades CSS para bordes
• border: añade un borde a un elemento y especifica sus propiedades (grosor, estilo de
línea, etc.).
• border-color: color del borde.
• border-style: diferentes estilos (sólido, rayitas, puntos, etc.).
• border-radius: redondear las esquinas de un elemento.
Otras propiedades CSS
• float: propiedad avanzada que permite una maquetación más sofisticada. Posicionar
los elementos de manera “flotante”.
• clear: controla el comportamiento de los elementos adyacentes a elementos
posicionados de forma flotante.
• overflow: controla el comportamiento de los contenidos que no caben en su elemento
contenedor (valores: visible, hidden, scroll, auto, inherit)
• display: controla diferentes aspectos de la visualización de un elemento, permite
incluso ocultarlo con el valor “none”.
• list-style-image: URL con una imagen que se debe usar como viñeta.
• list-style-type: diferentes estilos de viñetas y numeración para los elementos de la
lista.
• box-shadow: aplicar un efecto de sombra a un elemento.

Ing. Oscar Ascón Valdivia 6

 CSS. Guía de referencia rápida

Sintaxis Unidades

/* Comentario */ px | em | ex | % | in | cm | mm | pt | pc
selector { #ff6633 | #f63 | rgb(0,255,0) | rgb(0%,100%,50%)
aqua | black | blue | fuchsia | gray | green | lime | maroon |
propiedad: valor;
navy | olive | purple | red | silver | teal white | yellow
}

Selectores Pseudo-clases y pseudoelementos

* Todos los elementos :active Elemento seleccionado
div <div> :focus Elemento enfocado
div * Elementos dentro de <div> :hover Elemento con el cursor del ratón encima
div span <span> dentro de <div> :link Vínculo no visitado
div, span <div> y <span> :visited Vínculo visitado
div > span <span> con <div> como padre :first-child Elemento que es el primer hijo de otro elemento
div + span <span> precedido de <div> </div> :lang Lenguage utilizado en un elemento
.foto Elementos de la clase "foto" :first-letter La primera letra de un texto
div.class <div> de la clase "foto" :first-line La primera línea de un texto
#casa Elementos con id "casa" :before Contenido antes de un elemento
div#itemid <div> con id "casa" :after Contenido después de un elemento
a[class] <a> con el atributo class
a[class='x'] <a> cuando su clase es "x"
a[class~='x'] <a> cuando su clase es una lista de
valores y uno de ellos es 'x'
a[lang|='en'] <a> cuando lang comienza por "en"

Propiedad / Valor
Cajas
border (border-left, border-bottom, border-right, border-top)
border-width | border-style | border-color
border-width (border-left-width; border-top-width; border-right-width; border-bottom-width)
thin | medium | thick | longitud width
border-color (border-left-color; border-top-color; border-right-color; border-bottom-color)
color
border-style (border-left-style; border-top-style; border-right-style; border-bottom-style) height
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
margin (margin-top; margin-right; margin-bottom; margin-left)
auto | longitud
padding (padding-top; padding-right; padding-bottom; padding-left)
longitud

margin border padding

Posicionamiento Dimensiones
left, top, right, bottom height
auto | longitud auto | longitud
clip line-height *
shape | auto normal | number | longitud
overflow max-height
visible | hidden | scroll | auto none | longitud
position max-width
static | relative | absolute | fixed none | longitud
vertical-align min-height
baseline | sub | super | top | text-top | middle | bottom | longitud
text-bottom | longitud min-width
z-index longitud
auto | número width
auto | longitud

* Propiedades que se heredan. En rojo, propiedades de acceso rápido y, entre paréntesis, las propiedades a las que llaman. En cursiva, valores que deben
ser incluidos por el usuario.
 Contorno Tablas
outline border-collapse *
outline-color | outline-style | outline-width collapse | separate
outline-color border-spacing *
color | invert longitud longitud
outline-style caption-side *
none | dotted | dashed | solid | double | groove | ridge | inset | outset top | bottom | left | right
outline-width empty-cells *
thin | medium | thick | longitud show | hide
table-layout
auto | fixed
Fondo

background Listas
background-color | background-image | background-repeat | background-
list-style *
attachment | background-position
list-style-type | list-style-position | list-style-image
background-attachment
list-style-image *
scroll | fixed
none | url
background-color
list-style-position *
Color | transparent
inside | outside
background-image
list-style-type *
url | none
none | disc | circle | square | decimal | decimal-leading-zero | lower-
background-position
roman upper-roman | lower-alpha | upper-alpha | lower-greek
top left | top center | top right | center left | center center | center right
lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic
| bottom left | bottom center | bottom right | x-% y-% | x-pos y-pos
| hiragana | katakana | hiragana-iroha | katakana-iroha
background-repeat
repeat | repeat-x | repeat-y | no-repeat

Fuente Texto
font * color *
font-style | font-variant | font-weight | font-size/line-height | font-family color
caption | icon | menu | message-box | small-caption | status-bar direction *
font-family * ltr | rtl
family-name | generic-family letter-spacing *
font-size * normal | longitud
xx-small | x-small | small | medium | large | x-large | xx-large | smaller text-align *
larger | longitud left | right | center | justify
font-size-adjust * text-decoration
none | número none | underline | overline | line-through | blink
font-stretch * text-indent *
normal | wider | narrower | ultra-condensed | extra-condensed | conden- longitud
sed | semi-condensed | semi-expanded | expanded | extra-expanded text-shadow
ultra-expanded none | color | longitud
font-style * text-transform *
normal | italic | oblique none | capitalize | uppercase | lowercase
font-variant * unicode-bidi
normal | small-caps normal | embed | bidi-override
font-weight * white-space *
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 normal | pre | nowrap
800 | 900 word-spacing *
normal | longitud

Miscelánea I Miscelánea II
clear display
left | right | both | none none | inline | block | list-item | run-in | compact | marker | table
cursor * inline-table | table-row-group | table-header-group | table-footer-group
url | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw- table-row | table-column-group | table-column | table-cell | table-caption
resize n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help float
content left | right | none
string | url | counter(name) | counter(name, list-style-type) marker-offset
counters(name, string) | counters(name, string, list-style-type) | attr(X) auto | longitud
open-quote | close-quote | no-open-quote | no-close-quote position
counter-increment static | relative | absolute | fixed
none | número identificativo quotes *
counter-reset none | string string
none | número identificativo visibility
visible | hidden | collapse
Caso practico
Caso practico
Caso practico