Siguiendo con este pequeño tutorial de CSS hoy vamos a ver como aplicamos CSS al HTML.
CSS - CSS Embebido
El css embebido no es mas ni menos que una mala practica a la hora de realizar styling de nuestra pagina web, ya que no es re utilizable al crear mas paginas, ni deja la pagina html legible.
Ejemplo de HTML común:
Este sencillo código nos producirá una pagina web con lo siguiente:
Esto lo logramos con el siguiente ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo CSS</title>
</head>
<body style="background-color:black; color: red">
Hola mundo el lado oscuro de java presente.
</body>
</html>
Con este código obtendremos la siguiente web:
Todo muy lindo, el color de fondo se cambio y el color de texto también pero esto no es nada mantenible ni reusable, veamos hojas de estilos.
CSS - Hoja de estilos
Recordar que la dirección tiene ser en base a donde esta el html, es decir si nuestro html esta en la carpeta paginas y nuestras hoja de estilo esta en la carpeta CSS la ruta seria la siguiente: "../css/style.css", esos "../" significa que subimos un nivel es decir que salimos de la carpeta que estamos.
Ejemplo de HTML común:
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <title>Ejemplo CSS</title></head>
<body> Hola mundo el lado oscuro de java presente.</body>
</html>
Este sencillo código nos producirá una pagina web con lo siguiente:
Ahora toquemos un poco de CSS y hagamos un par de malas practicas, metamos CSS en código, cambiando el color de fondo a negro y las letras en rojo.
Esto lo logramos con el siguiente ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo CSS</title>
</head>
<body style="background-color:black; color: red">
Hola mundo el lado oscuro de java presente.
</body>
</html>
Con este código obtendremos la siguiente web:
Todo muy lindo, el color de fondo se cambio y el color de texto también pero esto no es nada mantenible ni reusable, veamos hojas de estilos.
CSS - Hoja de estilos
Cuando hablamos de hojas de estilos no hay mucho que definir ya que el mismo nombre dice mucho: HOJA DE ESTILOS, es decir es la hoja la cual va a contener todos los estilos de nuestra web, obviamente podemos tener mas de una por web.
Al trabajar con hojas de estilos dejamos el código html muy limpio, se podría decir que también estamos generando una separación de capas!
Al trabajar con hojas de estilos dejamos el código html muy limpio, se podría decir que también estamos generando una separación de capas!
Siempre las hojas de estilos van a terminar con el formato "CSS" un ejemplo al crear una hoja de estilos seria "estilos.css" o "styles.css".
Para realizar nuestro ejemplo deberíamos crear una hoja de estilo y poner lo siguiente:
body{
background-color: black;
color:red;
}
El body por el momento es la etiqueta (mas adelante hablaremos de etiquetas, id y clases) la cual le aplicaremos estilos, las propiedades se definen por linea y luego se agrega ":" y el valor finalmente terminamos con ";".
El body por el momento es la etiqueta (mas adelante hablaremos de etiquetas, id y clases) la cual le aplicaremos estilos, las propiedades se definen por linea y luego se agrega ":" y el valor finalmente terminamos con ";".
Habiendo creado esta hoja de estilos solo nos queda vincularla al HTML, (osea decirle al HTML mira que vas a usar estos estilos!!)
Dentro de la etiqueda HEAD del HTML agregamos:
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style.css">
Donde link rel="stylesheet" type="text/css" siempre va y luego en el href ponemos la ubicación de nuestra hoja de estilos.
Si hicimos todo bien veremos esto:
Si bien la imagen es igual a la anterior el código html de la pagina es totalmente diferente, siempre tenemos que pensar que trabajamos con muchos estilos.
Recordar que la dirección tiene ser en base a donde esta el html, es decir si nuestro html esta en la carpeta paginas y nuestras hoja de estilo esta en la carpeta CSS la ruta seria la siguiente: "../css/style.css", esos "../" significa que subimos un nivel es decir que salimos de la carpeta que estamos.
Saludos en nuestra próxima entrega traeremos mas propiedades css.
CSS - CSS Embebido - Hoja de estilos
Reviewed by El lado oscuro de java
on
junio 06, 2016
Rating:
Reviewed by El lado oscuro de java
on
junio 06, 2016
Rating:
No hay comentarios: