Articulos PHP
Articulos Jquery
Articulos CSS
1.1 Como incluir estilos CSS en una determinada página web.
Existen tres manera de incluir estilos CSS es nuestras páginas web, la primera es anexando los estilos a las etiquetas HTML, la segunda es creando una sección dentro del código HTML donde se coloquen los estilos y la tercera es creando un archivo externo con extensión .css y enlazarlo a la página(s) HTML.
Un ejemplo del método de añadir estilos a una determinada etiqueta es el siguiente:
<p style=" color:#00C; font-size:15px; font-weight:bold;">El perro es muy hermoso y es mi mascota favorita</p>
Como se puede observar, dentro de la etiqueta <p></p> se ha incluido el atributo style y en este atributo, encerrado por comillas dobles, se han incluido varios estilos como el color, el tamaño de la fuente y el grosor, pero este método, a la larga, genera código HTML confuso ya que se mezclan el HTML y los estilos lo cual dificulta la comprensión y el mantenimiento de una pagina, sin embargo, es útil solamente cuando necesitamos aplicar estilos a un elemento especÃficamente.
Un ejemplo del método de añadir estilos a una página, creando una sección especial dentro del código HTML usando las etiquetas <style></style> es:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
 div{color:#F00; font-family:Verdana, Geneva, sans-serif; font-size:20;}
</style>
</head>
Como se puede observar se han incluido las etiquetas <style></style> dentro de las etiquetas <head></head> y se les ha colocado el atributo type="text/css"; se han creado los estilos para las etiquetas <div></div>.
Por último, para aplicar el tercer método primeramente debemos crear un archivo de texto y nombrarlo con la extensión .css, es este caso supongamos que hemos creado el archivo llamado estilos.css y dentro hemos colocado los siguientes estilos:
p{ font-size:20px; color:#65C275; font-weight:bold; font-size:18px;}
Después debemos enlazar el archivo con extensión .css al código HTML de la página y esto lo logramos mediante el uso de la etiqueta <link/>:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen"/>
</head>
Como se puede ver se ha colocado la etiqueta <link/> dentro de la etiqueta <head></head> y contiene los siguientes atributos:
- rel: es el atributo que describe cual es la relación entre el archivo CSS y el código HTML, en este caso es stylesheet u hojas de estilo.
- type: describe el tipo de archivo enlazado, en este caso un archivo de texto que contiene estilos CSS.
- href: indica la ruta de la hoja de estilos.
- media: indica el tipo de dispositivo en el cual se usarán los estilos, en este caso la pantalla de la PC.
