CSS (Cascading Style Sheets) es un lenguaje de estilo que se utiliza para cambiar el aspecto de los controles en HTML, su principal objetivo es el de separar el diseño y aspecto de la estructura y los datos del mismo.
El uso CSS nos permite tener estilos o diseños (Templates, Skins) bastante diferente entre si, que pueden asignarse a una página web HTML, algo muy diferente a lo que era años anteriores en donde modificar los colores implicaba editar todos los documentos html donde se aplicaba el tag respectivo (font color).
Lo primero que deben saber es que las definiciones CSS es que su estructura es: A QUIEN LE AFECTO -> QUE PROPIEDAD -> QUE VALOR
div {
border-width: medium;
border-color: yellow;
border-style: solid;
}
En el ejemplo anterior el afectado es el DIV, sobre su propiedad border con 3 atributos, eso mismo se podia definir de manera corta de la siguiente manera:
div {
border: medium solid yellow;
}
Lo más básico referente a CSS es su aplicación directa a los objetos HTML (tags) mediante la propiedad Style, un ejemplo sería:
<div style="border: medium solid yellow;">Contenido</div>
Separando el CSS
El CSS dentro de la misma página web
Existen 2 formas de separar el CSS donde estará el diseño de nuesta web de los datos, el primero es ponerlo dentro de la misma página web al estilo de un código Javascript, es decir, dentro del header y con un tag especial
<style type="text/css">
div {
border: medium solid yellow;
}
</style>
El código anterior hará que todos los DIV dentro de un documento tengan un borde mediano, sólido y de color amarillo
<html>
<head>
<style type="text/css">
div {
border: medium solid yellow;
}
</style>
</head>
<body>
<div>Texto1</div>
<div>Texto2</div>
<div>Texto3</div>
</body>
</html>
El CSS en un documento aparte
Este es el uso más apropiado del CSS, básicamente es poner todo el estilo en un archivo de extensión CSS y llamarlo desde el html, esto nos permite usar el mismo archivo.css en muchas páginas y cuando queremos cambiar un color o el diseño de por ejemplo el border, basta con cambiar en ese archivo y todas las páginas se actualizarán
<html> <head> <link href="hoja.css" rel="stylesheet" type="text/css" /> </head> <body> <div>Texto1</div> <div>Texto2</div> <div>Texto3</div> </body> </html>
La hoja CSS es:
div {
border: medium solid yellow;
}
Más adelante veremos la definición de clases en CSS, que es cuando creas una definición que solo afectará a un objeto (tag) que lo llame a través de la propiedad class, <div class=”midefinicion”>Texto</div>