En esta nueva entrega del curso de CSS os voy a mostrar las diferentes formas de las cuales podemos poner o usar código CSS en una pagina web. Para los ejemplo voy a usar algunas etiquetas CSS que puede ser que no entendáis si no habéis usado nunca este lenguaje, no os preocupéis ya que os explicare para que sirven y tampoco tiene mucha importancia para que sirven, ya que lo realmente importante de este articulo es mostraros como podemos usarlas.
Ya que el CSS nació a partir de la necesidad de poder dar un mejor estilo visual a las paginas y, ademas también para poder separar la información que se ofrece de su formato, lo aconsejable seria poner el CSS en un archivo diferente que el HTML. Pero os voy a mostrar las diferentes formas de hacerlo y así podéis ir viendo el proceso. Os voy a poner un ejemplo de pagina web en la cual el CSS estaría en la propia pagina HTML:
<html>
<head>
<!-- Este es el titulo de la web -->
<title>Pagina web</title>
<!-- Estilo CSS de la web en la cabecera -->
<style type="text/css">
#capa
{
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Pagina de ejemplo</h1>
<!-- Declaracion de la capa llamada capa -->
<div id="capa"></div>
</body>
</html>
Vamos a revisar la sección “head” de esta pagina web por partes. La primera linea en un comentario indicando que es el titulo de la web y luego esta la etiqueta “title” con la cual ponemos el titulo. Después hay otro comentario donde digo que voy a poner el estilo CSS de la web en la cabecera. La siguiente linea, con la etiqueta “style” indica que empieza la declaración de estilos CSS y tiene un parámetro llamado “type” con valor “text/css” que indica el tipo de código que viene a continuación y que es CSS. Debajo de esta linea tenemos “#capa”, con esto indicamos a que capa vamos a aplicarle el CSS, en este caso la capa se llama “capa”, hay que poner delante del nombre “#” . Debajo hay una “{“, esto significa que empezamos a poner atributos CSS. Después viene “width: 300px”, con esto indicamos que la capa tendra 300 pixels de ancho. Luego esta “height: 200px;” que indica que la capa tendra 200 pixels de largo y finalmente esta “background-color: blue;” que indica que la capa tendra de color de fondo azul. Luego ponemos “}” para cerrar la declaracion de CSS de la capa y finalmente la etiqueta de cierre de “style”.
En el cuerpo de la pagina, en la sección “body” tenemos la siguiente linea:
<div id="capa"></div>
Con esto declaramos la capa y la llamamos “capa”, es importante fijarse si usamos varias capas en una pagina web, que seguro serán muchas, donde las declaramos, es decir, donde las ponemos en el “body” ya que donde las declaremos afectara a su posicionamiento en la pagina.
Otra forma de aplicar CSS a una capa es con clases, la forma de hacerlo es muy parecida y os pongo el ejemplo anterior pero con clases:
<html>
<head>
<!-- Este es el titulo de la web -->
<title>Pagina web</title>
<!-- Estilo CSS de la web en la cabecera -->
<style type="text/css">
.capa
{
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Pagina de ejemplo</h1>
<div class="capa"></div>
</body>
</html>
Las dos paginas harían lo mismo, mostrar un texto y debajo un rectángulo de color azul de 300×200 pixels de tamaño. Creo que las diferencias se ven bien en el “div” y en “style”. No hay preferencias a la hora de usar una forma u otra, depende de la persona que haga la pagina.
Las etiquetas HTML como “iframe”, “h1″ y demás tiene un CSS predefinido por cada navegador que también podemos cambiar, os pongo un ejemplo de como hacerlo:
h1
{
color: green;
}
Con el texto anterior he cambiado el color de la letra a verde de la etiqueta “h1″, fijaros en que delante del nombre de la etiqueta no hay ”#” ni “.”, esto no hay que ponerlo ya que si lo pondríamos el navegador web al verlo no modificaría el CSS de la etiqueta “h1″ sino que buscaría una capa que se llamase “h1″ y no haría nada.
Otra forma que tenemos de poner CSS es en el propio “body” de la pagina. Os pongo un ejemplo:
<html> <head></head> <body> <h1>Pagina de ejemplo</h1> <div id="capa" style="width:300px; height:300px; background-color:blue;"></div> </body> </html>
Como podéis ver he declarado el CSS con “style” dentro de la propia capa. también podríamos hacerlo con clases de la misma forma.
Ahora os voy a mostrar como deben ir el CSS y el HTML correctamente. Voy a usar el primer ejemplo de este articulo. Primero voy a crear un archivo solo con el HTML así:
<html>
<head>
<!-- Este es el titulo de la web -->
<title>Pagina web</title>
<!-- Estilo CSS de la web en archivo externo -->
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<h1>Pagina de ejemplo</h1>
<!-- Declaracion de la capa llamada capa -->
<div id="capa"></div>
</body>
</html>
La parte del “head” de la pagina ha cambiado y ahora solo tiene una linea que haga referencia al CSS, en dicha linea, que es la ultima del apartado “head”, le indicamos en el atributo “href” el archivo donde estarán los estilos CSS a aplicar a esta web. Para ello tenemos que crear un archivo llamado “estilo.css” y poner el siguiente texto:
#capa
{
width: 300px;
height: 200px;
background-color: blue;
}
Ahora cuando en el HTML aparezca la capa llamada “capa” el navegador irán al archivo “estilo.css” y buscara el CSS correspondiente y se lo aplicara. De esta forma el HTML es mas limpio.
De esta forma podemos aplicar CSS a una pagina web, la mejor forma es la ultima con los archivos separados ya que según la normativa W3C el contenido y el formato de la pagina web tiene que ir por separado. Cualquiera de la formas indicadas en este articulo funcionara pero con la ultima el código HTML sera mas legible y mas fácil de buscar posibles fallos el día de mañana, ya que tenemos que tener en cuenta de que algún día podemos hacer una pagina grande y si no estuviese todo separado y bien comentado nos podríamos volver locos para buscar fallos en el código.
Hay mas opciones dentro de la declaración de CSS pero que veremos mas adelante en otros artículos, con esto ya podemos empezar a trabajar sin problemas. Os dejo un video que he colgado en mi canal de Youtbe esplicando estos ejemplo paso a paso:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Pin ItAbout The Author
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure