Como usar los estilos CSS


Los estilos sirven para describir como mostrar los diferentes elementos de un documento HTML ó XML.

Su principal utilidad es el ahorro de tiempo y espacio, teniendo centralizado el diseño en una parte, sobre todo en caso de externalizarlo en un archivo CSS; por ejemplo si se le da un estilo al color de fondo del body, otro con el tamaño de fuente, otro con el color de la letra, etc en un archivo CSS y se linca a todas las páginas; ya no se tendrá que poner en todas las etiquetas al body.
Además en caso de necesitar cambiar algo, se puede hacer de una forma mas sencilla y cómoda, cambiándolo solo en un sitio.

Los estilos se crean de la siguiente manera:

Para las etiquetas, se pone la etiqueta, a continuación entre llaves ({}) los estilos y su definición separados por dos puntos (:) acabando en punto y coma (;) todos menos el último, para el cual no es necesario, ejemplo:
body{
    color:white;
    background-color:black
}
div{
    border:#008000 1px solid
}

Esto le daría al body un fondo de color negro y las letras de color blanco; y establecería todas las capas como la que contiene el ejemplo (de color verde con un píxel de ancho de borde de tipo sólido).

También se pueden definir estilos para etiquetas que contengan ciertas clases, de la siguiente forma:
.clase1{
    color:black;
    background-color:white
}
.clase2{
    border:#008000 1px solid
}

Lo único que cambia es que llevan un punto delante(.) y se les pone el nombre que se quiera.

Para darle una clase a una etiqueta, se haría así:
<p class="clase1">Tendrá los estilos de clase1</p>
<p class="clase2">Tendrá los estilos de clase2</p>
<p class="clase1 clase2">Tendrá los estilos de clase1 y clase2</p>

Igual que 'p' se puede poner cualquier otra etiqueta.

Además de por clases, se pueden definir estilos a una etiqueta que tenga un identificador (id) en concreto, anteponiendo en vez de un punto, una almohadilla (#):
#Identificador1{
    color:black;
    background-color:white
}
#Identificador2{
    border:#008000 1px solid
}

El campo identificador debe ser único, es decir, no puede haber dos etiquetas con un mismo identificador. Para asignar un identificador a una etiqueta sería:
<p id="Identificador1">Tendrá los estilos del Identificador1</p>
<p id="Identificador2">Tendrá los estilos del Identificador2</p>


También se pueden establecer estilos, dependiendo de sus padres de la siguiente manera:
table tr td .clase1{
    color:black;
    background-color:white
}
div .clase1{
    color:white;
    background-color:black
}

Donde dependiendo de si el padre de la clase "clase1" sea un div o un campo de tabla, se mostrará de una forma u otra.

Por último, se pueden dar el mismo estilo a diferentes elementos, separándolos por coma (,):

p, span, div, .calse1, p.clase2, #id1, table tr td{
    color:white;
    background-color:black
}


Los estilos se pueden llamar de tres formas:


1º) Directamente en la etiqueta:
<p style="background-color:#ff0000">fondo de color rojo</p>

2º) Con la etiqueta STYLE que se declara en el head:
<style type="text/css">
    body{ color:black; background-color:white }
    table{ border:#008000 1px solid }
</style>

3º) Creando un archivo '.css' con todos los estilos y clases que vayas a necesitar y lincandolo a tus páginas de la siguiente manera en el head:
<link rel="stylesheet" type="text/css" href="archivo.css">

'rel="stylesheet"'- Dice que es un archivo de hojas de estilo.
'type="text/css"'- Dice que el lenguaje sera del tipo css.
'href="archivo.css""'- Da la dirección del archivo.


Código:
<!-- Copyright © McAnam.com -->
<!-- http://www.mcanam.com/articulos/Estilos.php?id=1 -->

<style type="text/css">
    
    div{ border:transparent 0px solid }
    .clase1{ border:red 1px solid }
    #identificador1{ border:blue 1px solid }

</style>

<div>Capa div</div><br/>
<div class="clase1">Capa div con clase</div><br/>
<div id="identificador1" class="clase1">Capa div con identificador. Se impone a la clase</div><br/>

Demostración:
Capa div

Capa div con clase

Capa div con identificador. Se impone a la clase

Links relacionados:
Manejo de los estilos en JavaScript
Maquetación con divs y CSS (margin y position absolute)
Maquetación con divs y CSS (float)
Cambiar el tipo de cursor una vez cargada la página con JavaScript
Arquitectura de software en capas


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com