Introducción al CSS (Cascading Style Sheets)

27 marzo, 2013
Jhonnyf

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 pagina 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).

css_logo

Lo primero que deben saber es que las definiciones CSS es que su estrutura es: A QUIEN LE AFECTO -> QUE PROPIEDAD -> QUE VALOR

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:

Lo más básico referente a CSS es su aplicación directa a los objetos HTML (tags) mediante la propiedad Style, un ejemplo seria:

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 codigo Javascript, es decir, dentro del header y con un tag especial

El código anterior hará que todos los DIV dentro de un documento tengan un borde mediano, solido y de color amarillo

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

La hoja CSS es:

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>

Sin comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *