El dia de hoy les traigo lo mas básico de Css y como implementarlo en tus diseños. Pero antes de empezar vamos a conocer un poco de la historia de Css y por que y como se origino.
¿Que es Css?
Css es Cascading Styles Sheets (En Español seria al como Hojas de estilo en cascada)
Los estilos definen como se ven los elementos de un documento Xhtml, los estilos usualmente son guardados en un archivo con la extensión de .css que se enlaza en la sección de <head> dentro de el documento Xhtml.
¿Como usar Css?
Hay tres formas de usar Css para poder estilizar los elementos en tu pagina web:
Inline Styles (estilos en línea)
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Mi Pagina Web</title> </head> <body> <p style="font-weight:bold;"> Este es un mi sitio web en el cual encontraras información de mis hobbies y lo que yo hago en mi tiempo libre</p> </body> </html>
Estos estilos son aplicados directamente a el elemento Xhtml que deseas estilizar, si te das cuentas el tag <p> contiene style=”font-weight:bold;”
que lo que hace es que todo lo que se encuentre dentro de los tags <p></p> seran mostrados en letras negritas. El inline style es mas común usarlos cuando solo quieres estilizar un elemento en especifico dentro de tu documento Xhtml.
Internal Styles (Estilos Internos)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
p { font-weight:bold;
}
</style>
<title>Mi Pagina Web</title>
</head>
<body>
<p> Este es un mi sitio web en el cual encontraras información de mis hobbies y lo que yo hago en mi tiempo libre</p>
</body>
</html>
Si usas este tipo de estilo de Css debe incluir los tags de dentro de el tag de de tu documento web. La diferencia de este estilo es que todos los elementos que definas usando este estilo dentro de tu documento xhtml serán afectados, usando el ejemplo anterior todos los elementos <p> serán mostrados usando letras negritas.
External Style (Estilos Externos)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>Mi Pagina Web</title> </head> <body> <p> Este es un mi sitio web en el cual encontraras información de mis hobbies y lo que yo hago en mi tiempo libre</p> </body>
Esta es la forma mas común de usar Css ya que provee mas facilidad para estilizar todos los elementos de tu pagina web, ya sea una pagina o múltiple paginas, editando solamente un archivo. El código anterior esta enlazando a un archivo que se llama “stylesheet.css” que debe ser incluido en tu servidor web para que funcione correctamente, recuerda que si le usas otro nombre de cambiar este de acuerdo a el nombre que usaste. El type=”text/css” le dice al tu navegador como interpretar el archivo de “stylesheet.css”.
Este ejemplo muestra como seria el archivo de “stylesheet.css” para que lograramos que todos los elemente de <p> sean mostrados en negritas.
@charset "utf-8";
/* CSS Document */
p { font-weight:bold;
}
Si tiene alguna duda de como usar Css o alguna sugerencia no duden en hacerla.
