¿Qué es CSS?
El formato CSS (Cascading Style Sheet o Hojas de Estilo en Cascada) es un Lenguaje de Programación Web muy usado para dar formato al código HTML tradicional, en otras palabras, el código HTML es el que almacena la información y el CSS es el que define la forma en que se muestra el contenido.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura y el contenido de la presentación estética en un documento.
Un ejemplo:
La etiqueta H1 no nos brinda información sobre como va a ser visualizada, solo nos da la estructura pero al aplicarle estilos CSS podemos cambiar cualquier aspecto en su presentación, ya sea, la fuenta, el color, si va a estar subrayada o no y más. Tenemos un control total sobre esta etiqueta.
¿Cómo crear los estilos?
Primero debemos saber que los estilos se dividen en:
- Selectores
- Atributos
- Valores
Selectores
Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.
Hay tres tipos de selectores:
- Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta, en el documento CSS, a la que le aplicaremos el estilo.
- Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
- El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
Selector de Etiquetas
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
}
Selector de Identificador
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}
Para hacer funcionar esta etiqueta debemos llamarla desde el documento HTML. Ejemplo:
Selector de Clase
margin: 5px;
height: 100px;
width: 200px;
}
En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:
Atributos
Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.
Ejemplo:
Si queremos modificar la etiqueta
serÃa algo asÃ, si lo hacemos a través de una hoja de estilos aparte:body {font-family: tipo de letra ; background: color de fondo}
En este caso elegimos que letra queremos que tenga nuestra web y el color de fondo.
Valores
Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".
En este caso definimos a <body> con una letra "Verdana" y de color "Rojo".
¿Como aplicar el CSS?
Existen 3 formas de llamar los estilos y son las siguientes:
- Hacer un archivo separado del HTML con la extensión .css y linkearla al archivo de la siguiente forma:
- Incluir los estilos CSS dentro de la etiqueta de nuestro archivo de esta forma:
<title>Pagina</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}
-->
</style>
</head>
- Incluir directamente los estilos a cada elemento de la web:
22/12/2008
Febrero 3rd, 2009 a las 12:33 pm
[...] que ustedes deben agregarle CSS. var OutbrainPermaLink='http://www.blooging.net/crear-formulario-contacto.html'; var OB_demoMode [...]
Febrero 8th, 2009 a las 3:16 pm
[...] Si quieres crear un sitio web, es necesario conocer un poco de HTML, incluso si utilizas un programa WYSIWYG, ya que podemos mejorar considerablemente nuestra página y más aún conociendo un poco de CSS. [...]
Febrero 14th, 2009 a las 3:29 pm
[...] código CSS lo debemos agregar [...]
Mayo 4th, 2009 a las 6:18 pm
[...] podemos mejorar visualmente este link con un poco de CSS dentro de un textarea y JavaScript. <textarea class=textareaid readonly="true" [...]
Noviembre 26th, 2009 a las 3:59 pm
[...] Muchas veces nos encontramos con la difÃcil tarea de justificar el texto de nuestros artÃculos, 1 por 1, lo que se hace una tarea muy tediosa, pero siempre nos podremos ayudar gracias a nuestro fiel compañero, el CSS. [...]