¿Que son los estilos CSS?

CSS es el lenguaje de hojas de estilos creado para controlar el aspecto o presentación definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos,su presentación y es imprescindible para crear paginas Web complejas.

Al crear una pagina Web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenido, es decir, para designar la función de cada elemento dentro de la pagina: párrafo, titular, texto destacado, tablas, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipos de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la pagina, etc.

¿Donde 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:
  • Entre lineas
  • Dentro de la sección Head
  • Hojas externas

1.- Entre lineas

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 esta dado por el atributo "style"

Ejemplo

En este ejemplo se va a aplicar un estilo "solo" al elemento p de esta linea.


Código
Resultado
<p style="color: red; margin-left: 30px;">Este párrafo es de color rojo y se encuentra a 50 pixeles del margen izquierdo.</p>


2.- Dentro de la sección HEAD

Las hojas de estilos interna deben usarse cuando un pagina tiene un estilo único. 

Sintaxis

<head>
<style type="text/CSS">
selector 1: { propiedad: valor; }
selector 2: { propiedad: valor; }
</style>
</head>
<body>
<etiqueta 1>texto, texto, texto</etiqueta 1>
<etiqueta 2>palabra, palabra, palabra</etiqueta 2>
</body>

 La etiqueta <style type="text/CSS"> en la cabecera del documento entre las etiquetas <head> y </head> utiliza para definir los estilos correspondientes a esta pagina 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">
            body { background-color: #088000; }
            p { color: white; font-size: 20px; }
        </style>
    </head>

    <body>
        <p>Este texto es de color blanco con un tamaño de 20 pixeles y el color de fondo de la pagina es #088000.</p>
    </body>



En este ejemplo se muestra que la etiqueta <style> con su atributo type define la hoja de estilo.
Entre las etiquetas style definimos al selector body con un color de fondo #088000 y al selector p de color blanco con tamaño de 20 pixeles.

3.- Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias paginas. 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".

Sintaxis CSS

Contenido de la hoja de estilos CSS: 

selector 1 {
propiedad: valor; /**** No olvidar el (;) al final de cada valor ****/
propiedad: valor;
propiedad: valor;
}
selector 2 {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Sintaxis HTML

Esta es la forma de llamar al archivo ".css" desde un documento HTML. 

<html>
<head>
<link rel="stylesheet" type="text/css" href="archivo.css">
</head>
<body>
</body>
</html>

Cada pagina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

Ejemplo

Así se vería por ejemplo, un archivo CSS externo que tiene por nombre "estilos.css".
Nota: el código, en los archivos de hojas de estilos externos, comienza directamente con el selector ( universales, etiqueta, clase o ID ).

Código CSS
body {
background: #0074D9;
color: #FFFFFF;
}

p {
font-family: Arial;
font-size: 20px;
font-weight: bold;
}

Así se vería el documento HTML que llama al archivo "estilos.css"
Código HTML
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<p>El color de fondo de esta pagina es #0074D9 el color del texto es blanco, con un tamaño de 20 pixeles y estilos de negritas.</p>
</body>
Resultado