NorfiPC
NorfiPC » Diseño Web » Tutorial de los estilos CSS

Tutorial y manual básico del uso de los estilos CSS en páginas web

Como definir y personalizar el estilo, formato, colores y apariencia de las páginas web, establecer exactamente el tamaño y la posición con que debe mostrar el navegador todos los elementos de la página, como utilizar los atributos y valores, códigos y ejemplos prácticos.
Usar estilos CSS en las páginas web
Estilos CSS son las instrucciones que lee el navegador web y que definen la forma en que deben representarse todos los elementos que componen la página.
CCS es la abreviatura de Cascading Style Sheets (en español Hojas de Estilo en Cascada).
Mediante CSS es posible al desarrollador, definir exactamente el formato de la página, ya sea el tamaño, color, posición, alineación, fuente empleada en el texto, la posición de las imágenes o cualquier otro elemento, de forma tal que la página se muestre como lo deseamos.


Ventajas de usar estilos CSS en las páginas web


• Separa la estructura de un documento de su presentación estética.
• Limpia y hace más sencilla y fácil de entender y modificar el código HTML de las páginas.
• Facilita cambiando los valores de un solo archivo (en caso de que el estilo CSS se encuentra en un archivo externo) modificar el estilo de varias páginas a la misma vez.
• Una página web puede tener distintos estilos, para ser usada y vista de forma adecuada en equipos diferentes, ya sea una PC de escritorio, una TabletPC o un teléfono celular.

Como utilizar estilos CSS en las páginas web


El estilo CSS se emplea de varias formas, cada una tiene sus ventajas y desventajas, en ocasiones se usan hasta las tres siguientes simultáneamente.
1- Encerrado entre las etiquetas STYLE en el área del encabezado o HEAD de la página, de este modo se asegura que al navegador representar el área de cuerpo o BODY, todas las instrucciones estén debidamente cargadas en la memoria.
2- Inline, insertando de forma independiente las instrucciones del estilo en cada bloque del código HTML.
Los dos métodos anteriores dan la ventaja de que de usarse el archivo de la página de forma independiente se muestre con el estilo deseado, además permite que distintas paginas usen un estilo diferente.
3- Utilizar las instrucciones escritas en un archivo externo al que se hace referencia mediante un link insertado en el área del HEAD de la página. El archivo de estilo se trata de un simple archivo de texto con la extensión CSS.
El link necesario para hacer referencia a dicho archivo es similar al siguiente:
<link href="../style/stylegreen.css" rel="stylesheet" type="text/css" media="screen" />
La ventaja de este método es que al vincular varias páginas a un único archivo CSS, se agiliza la carga de estas ya que el navegador lee el archivo CSS solo una vez y lo mantiene en memoria.


Como definir el estilo de un elemento mediante CSS


La sintaxis que se emplea para definir el estilo de un elemento es la siguiente:
Elemento{atributo:valor;}
Es muy simple, primero se coloca el selector o elemento, luego se abre una llave { y se empiezan a colocar los atributos o propiedades, seguidos de dos puntos : y luego el valor seguido de punto y coma ; al final se cierra el estilo para el selector con el cierre de llave }.
Se pueden definir tantos atributos con sus respectivos valores como se desee, separándolos con un espacio o un salto de línea.
Muy importante, en CSS se deben escribir los atributos y valores solo con minúsculas.

Ejemplos de como usar CSS para definir como se debe mostrar un elemento


• Para definir el estilo de los elementos que se encuentren encerrados en un bloque (DIV, SPAN, A, etc) primeramente se le asigna una identidad única con la etiqueta ID, por ejemplo: id="caso1", entonces usa:
#caso1{font-size:22px;color:blue;}

• Para definir el estilo de forma simultánea de varios elementos que se encuentren encerrados en distintos bloques (DIV, SPAN, A, etc), asígnales a todos la misma clase, por ejemplo class="caso2", entonces usa:
.caso2{font-size:22px;color:blue;}

• Definir el estilo de los elementos de una tabla:
table{width:400%;}
td{padding:4px;}
td{background-color:yellow;}

• Definir el estilo de todos los vínculos en la página (el color normal y al posicionar el ratón encima):
a{color:blue;}
a:hover{color:red;}

Como definir el estilo de un elemento con el método inline


Para definir el estilo de un elemento con el método inline es necesario usar el atributo STYLE dentro del elemento.
Ejemplos:
<div style="color:green;">elemento</div>
<span style="color:green;">element</span>
<table style="width:700px;">
<a style="cursor:crosshair" href="http://norfipc.com">Vínculo</a>


Atributos o propiedades de los estilos CSS


Atributos son los métodos que le indican al navegador los valores a modificar en el estilo, es enorme la cantidad de ellos que se pueden emplear en CSS y que validan correctamente con las especificaciones, en la siguiente página de: CSS Reference puedes ver una tabla con todos. En esta página de forma modesta solo se explica y se ofrecen ejemplos y referencias de los más comunes y que con más frecuencia tenemos necesidad de utilizar en la práctica.

Tabla de atributos para definir el estilo del texto


De la amplia variedad de atributos que existe para definir el estilo del texto, los mas utilizados son los siguientes:
Atributo Descripción
font Especifica todos los atributos en una sola declaración usando el siguiente orden: font-style font-variant font-weight font-size/line-height font-family, por ejemplo:
"font:15px arial,sans-serif;" "font:italic bold 18px Georgia, serif;"
font-family Especifica el tipo de fuente a emplear, utiliza el vínculo para leer mas información
font-size Permitir definir con toda exactitud el tamaño de las fuentes del texto contenido en un bloque especificando su tamaño en pixeles, por ejemplo:
"font-size:12px;"
Otra forma de definirlo es usando los siguientes valores:
xx-small, x-small, small, medium, large, x-large, xx-large, smaller y larger
También para establecer la medida del texto se utiliza la unidad "em", 1em es la fuente predeterminada en una página, la relación entre em y pixeles se calcula con las siguientes fórmulas:
em = pixeles/16 o pixeles= em X 16
Por ejemplo:
Una fuente de 2em = 32px
Una fuente de 24px = 1.5em
font-style Estilo de la fuente del texto, valores:
"font-style:italic;" estilo en itálica
"font-style:oblique;"
font-weight Especifica el grosor o no de la fuente:
"font-weight:normal;" grueso normal
"font-weight:bold;" grueso, conocido como negrita
"font-weight:bolder;" grueso mas grueso
"font-weight:lighter;" (100 a 900)
@font-face Permite impregnar fuentes disponibles en internet en el código HTML de la página
color Establece el color del texto, utiliza el vínculo para leer mas información
direction Especifica la dirección del texto
letter-spacing Incrementa o reduce el espacio entre caracteres, se expresa en pixeles, es posible usar valores negativos
line-height Interlineado, es el espacio entre líneas definido en pixeles. Se usa para disminuir o aumentar el espacio entre las líneas de texto, el valor normal o predeterminado es el mismo que se utilice en font-size
text-align Especifica la alineación horizontal del texto de la siguiente forma:
"text-align:left;" texto a la izquierda
"text-align:center;" texto centrado
"text-align:right;" texto a la derecha
text-decoration Especifica la decoración del texto de la siguiente forma:
"text-decoration:none;" texto normal
"text-decoration:underline" línea bajo el texto
"text-decoration:overline" línea sobre el texto
"text-decoration:line-through" texto tachado
"text-decoration:blink" texto parpadeante
text-indent Indentación significa mover un bloque de texto hacia la derecha insertando espacios para separarlo del borde, lo que se conocía como sangría. Se puede expresar en pixeles o en porciento relativo a la pantalla
text-transform Controla la transformación del texto, por ejemplo:
"text-transform:capitalize;" La Primera Letra De Cada Palabra En Mayúsculas
"text-transform:uppercase;" TODO EL TEXTO EN MAYÚSCULAS
"text-transform:lowercase;" texto en minúsculas
vertical-align Alinea en el eje vertical un elemento, los valores son:
valor en pixeles, %, sub, super, top, text-top, middle, bottom, text-bottom
white-space Especifica el espacio en blanco en el elemento, los valores pueden ser:
normal, nowrap, pre, pre-line, pre-wrap
word-spacing Especifica que el espacio entre palabras en un párrafo debe ser de 30 pixeles. Incrementa o reduce el espacio entre palabras en el texto usando pixeles, pt, cm, em, es posible usar valores negativos
text-overflow Especifica que pasa cuando el texto sobrepasa el espacio que lo contiene
text-shadow Agrega sombra al texto, se usa con dos valores en pixeles seguidos del color, por ejemplo:
"text-shadow: 2px 2px blue;"
word-wrap Permite que palabras largas sean divididas y salten a la siguiente línea, se usa:
"word-wrap:break-word;"


Como definir el color del texto con CSS


Podemos asignar al texto el color que deseemos mediante el atributo "color:color;". Por ejemplo: "color:blue;"
Los colores se pueden especificar en las páginas HTML de dos maneras una especificando el nombre del color en ingles y la otra usando una numeración para denotar un valor de color del sistema RGB.

Usando el nombre del color en inglés.
Algunos de los nombres de colores en inglés que se pueden emplear son los siguientes:
red, magenta, purple, blue, navy, green, lime, yellow, olive, cyan, brown, black, gray, teal y white que mostrará el texto en blanco.

Usando el valor hexadecimal del color.
Un valor del color del RGB consiste en tres números hexadecimales de dos dígitos que especifican la intensidad del color correspondiente.
Por ejemplo, el valor #FF0000 es color rojo.

Todos los códigos hexadecimales de los colores que se pueden emplear se muestran en la siguiente tabla, oprime el botón para expandirla.

TablaColores
Bookmarklet que permite tener disponible una tabla de colores web en tu navegador, un clic en el para probarlo, para guardarlo arrástralo a la barra de marcadores, si usas Internet Explorer da un clic derecho encima, escoge "Agregar a Favoritos" y selecciona la "Barra de Favoritos".


Definir con CSS el tipo o familia de la fuente


Mediante CSS podemos fijar el tipo de fuente de cada una de las partes de nuestra página, mediante el atributo font-family:nombre-de-fuente;. El parámetro family puede ser cualquiera de las fuentes que se tiene instalada en el equipo.
Podemos indicar varias fuentes separadas por coma para que el navegador use la que sigue, en caso de no tener instalada la primera, por ejemplo:
"font-family:Comic Sans MS,Verdana;"

Ejemplos de algunas fuentes disponibles en todos los Windows:

Times New Roman: Fuente del tipo Serif, como la que se usa en la mayoría de periódicos y revistas, y es buena para presentación en pantalla, a pesar de que fue diseñada para trabajar sobre papel.
Arial: Del tipo Sans Serif, con forma aerodinámica. En tamaños pequeños puede resultar difícil su lectura en pantalla.
Verdana: Fuente diseñada para su visión en pantalla, por lo que da unos resultados óptimos en el diseño web. Es la usada en esta página.
Comic Sans MS: Fuente alegre y desenfadada, de tipo Sans Serif, muy indicada para páginas de gente joven, aunque en otro tipo de páginas puede resultar poco seria y profesional.
Georgia: Es de tipo Serif, y ha sido diseñada igualmente para usar en computadoras, por lo que es de lectura cómoda. Posee también una versión de cursiva, muy atractiva.

Como combinar las fuentes para asegurar compatibilidad


Existen dos tipos de nombres de font-family, las específicas, por ejemplo: Arial, Verdana, Georgia, etc y las genéricas: serif, sans-serif, cursive, fantasy y monospace.
Es recomendado para asegurar la compatibilidad, comenzar especificando la fuente favorita y a continuación relacionar una genérica para asegurar que el navegador escoge una de estilo similar en caso de no estar disponible la primera.
A continuación una tabla con ejemplos de cómo podemos combinar las fuentes.

Fuentes de la familia Serif

font-family Ejemplo
Georgia, serif

Así luce en un encabezado

Así luce en un párrafo

"Palatino Linotype", "Book Antiqua", Palatino, serif

Así luce en un encabezado

Así luce en un párrafo

"Times New Roman", Times, serif

Así luce en un encabezado

Así luce en un párrafo

Fuentes de la familia Sans-Serif

font-family Ejemplo
Arial, Helvetica, sans-serif

Así luce en un encabezado

Así luce en un párrafo

Arial Black, Gadget, sans-serif

Así luce en un encabezado

Así luce en un párrafo

"Comic Sans MS", cursive, sans-serif

Así luce en un encabezado

Así luce en un párrafo

Impact, Charcoal, sans-serif

Así luce en un encabezado

Así luce en un párrafo

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Así luce en un encabezado

Así luce en un párrafo

Tahoma, Geneva, sans-serif

Así luce en un encabezado

Así luce en un párrafo

"Trebuchet MS", Helvetica, sans-serif

Así luce en un encabezado

Así luce en un párrafo

Verdana, Geneva, sans-serif

Así luce en un encabezado

Así luce en un párrafo

Fuentes de la familia Monospace

font-family Ejemplo
"Courier New", Courier, monospace

Así luce en un encabezado

Así luce en un párrafo

"Lucida Console", Monaco, monospace

Así luce en un encabezado

Así luce en un párrafo



Usos y reglas del atributo @font-face


El atributo @font-face permite cargar una fuente de un servidor de internet. Se usa en caso que se quiera emplear en la página una fuente no disponible en Windows.
Internet Explorer no admite cargar fuentes externas del formato TTF (True Type Font), solo las que están en formato EOT (Embedded OpenType), por lo que se debe hacer la declaración de la siguiente forma para que se muestre dicha página con la fuente indicada en todos los navegadores.
Ejemplo de cómo cargar la fuente Symbola en una página de un servidor externo:
@font-face {font-family: Symbola;
src: url(http://sitioweb/carpeta/Symbola605.eot) ;}
@font-face {font-family: Symbola;
src: url(http:// sitioweb/carpeta /Symbola605.ttf) format("opentype");}


Atributos para definir el estilo de los bloques


Cada caja o bloque en HTML tiene un área de contenido, ya sea texto una imagen u otro elemento y una zona circundante con 3 valores opcionales: margin, border y padding.
Área del MARGIN (Transparente)
Área del BORDER
Área del PADDING (Transparente)
CONTENIDO

Atributo Descripción
background-color Establece el color del fondo de un elemento.
Por ejemplo en esta celda se usa: background-color: #e1f5fe;
background-image Permite crear un degradado o difuminado.
Por ejemplo en esta celda se usa: background-image: linear-gradient(to left, #fff, #44a0e9);
Lee mas informacion
border-style Establece el estilo de los cuatro bordes, el parámetro estilo admite uno de los siguientes valores:
"border-style:solid;"
"border-style:dashed;"
"border-style:double;"
"border-style:groove;"
"border-style:ridge;"
"border-style:inset;"
"border-style:outset;"
border-color Establece el color de los cuatro bordes
border-width Establece el ancho de los cuatro bordes definido en pixeles
border Establece todas las propiedades del borde en una única declaración con el siguiente formato:
"border:TAMAÑO ESTILO COLOR;" por ejemplo:
"border:2px solid #ddd;"

Para definir un solo borde utiliza:
border-top borde superior
border-bottom borde inferior
border-left borde izquierdo
border-right borde derecho
height Establece la altura de un elemento expresado en pixeles
width Establece el ancho de un elemento expresado en pixeles
margin-left Se entiende por margen el espacio existente entre el bloque y el borde correspondiente de la pantalla activa del navegador. Así que el margen izquierdo será la distancia entre el lado izquierdo del bloque y el borde izquierdo de la pantalla del navegador.
margin-left establece el margen a partir del lado izquierdo de un elemento expresado en pixeles
margin-bottom Establece el margen a partir de la parte inferior de un elemento
margin-right Establece el margen a partir del lado derecho de un elemento
margin-top Establece el margen a partir de la parte superior de un elemento
margin Establece las propiedades de todos los márgenes en una sola declaración de la siguiente forma.
margin:SUPERIOR DERECHO INFERIOR IZQUIERDO; por ejemplo:
"margin:6px 0 6px 0;"
padding El espaciado interno (padding en inglés) fija la distancia que hay entre el bloque y el texto, imágenes, tablas,etc. que contiene. Establece las propiedades de padding en una sola declaración, por ejemplo:
"padding:6px 0 6px 0;"
opacity La propiedad opacity establece la transparencia de un elemento, con valores entre 0.0 - 1.0.
Internet Explorer requiere filter: alpha(opacity=xx)
Ejemplo: opacity:0.5; filter: alpha(opacity=50);


Atributos para definir la posición de elementos HTML


Atributo Descripción
bottom Indica la posición abajo
clear Especifica el lado de un elemento en el que no esta permitido que floten otros elementos, los valores que se pueden emplear son:
left, right, both, inherit (el valor se hereda del elemento anterior)
cursor Especifica el tipo de cursor que usará el ratón, puede ser uno de los siguientes:
auto, crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait y inherit.
display La propiedad display establece la manera en que se muestra un elemento. Los elementos HTML son generalmente "inline" o "block", inline permiten tener contenido flotante a la derecha o a la izquierda, los elementos block ocupan la línea completa por lo que no admiten lo anterior. También la propiedad display permite mostrar o no un elemento usando display:none, similar a la propiedad visibility:hidden, la diferencia es que en visibility el elemento se oculta pero permanece en su lugar. Los valores que se pueden emplear son:
block, compact, inline, none, inline-block, inline-table, list-item, marker, run-in, table
float Especifica si un elemento debe flotar, los valores pueden ser:
left, none, right, inherit
left Indica la posición a la izquierda
overflow
Especifica que pasa si el contenido sobrepasa los límites del contenedor, los valores posibles son:
visible, hidden, scroll, auto
position Define el tipo de posicionamiento usado por un elemento, valores:
static, relative, absolute o fixed
right Indica la posición a la derecha
top Indica la posición encima
visibility Especifica cuando o no un elemento es visible, valores:
visible
hidden
collapse, (solo para uso en tablas, oculta una fila o columna)
z-index Permite establecer el orden en que debe mostrarse los elementos, solo funciona en elementos posicionados (position:absolute, position:relative, o position:fixed), por ejemplo:
"z-index:1;"

Por último los archivos CSS deben validarse correctamente para asegurarse que no existe ningún error en el código por mínimo que sea, ya que de ser así navegadores muy exigentes no mostrarán el estilo definido de forma adecuada, además es definitorio para una correcta validación de la página.


Trucos CSS


Resetear CSS en el navegador

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

Mostrar todos los elementos HTML con CSS

Visualizar todos los elementos de una página en forma de bloques, encerrándolos en un marco. De utilidad para diferenciar en el navegador todos los elementos en el HTML.
*{
outline: gray solid 1px;
}
Puede aplicarse a cualquier página creando un Bookmarklet o Marcador para el navegador como el siguiente.
¡Pruébalo! Outline

Modificar el estilo CSS de una página usando Javascript


Otra opción es modificar el estilo de cualquier página desde eventos en el navegador, como son los botones, casillas o un simple clic.
Esto se puede realizar utilizando Javascript, no es difícil, lee como hacerlo en la siguiente página: Como cambiar y modificar el estilo CSS de las páginas web con Javascript

Herramientas en internet


  Validador CSS W3 Link al Validador de estilos CSS gratis.
 β Validar CCS. Bookmarklet para usar en la barra de marcadores del navegador web que permite validar la página en la que se esté navegando.

Páginas relacionadas en este sitio