| |
|---|
|
|
En el desarrollo de cualquier página web, una vez que se ha definido en el archivo #HTML todos los elementos que se mostrarán en la página, se procede a asignar el diseño que tendrá cada uno de esos elementos mediante la aplicación de estilos CSS. Por lo general, existen tres maneras de incluir estilos CSS en archivos HTML y las indicaremos a continuación:
También se le conoce como "estilo en línea", y tal como su nombre lo indica, consiste en agregar estilos CSS dentro de los mismos elementos HTML. La forma de hacerlo es añadiendo el atributo style dentro de las etiquetas de cualquier elemento. Después, se van a indicar dentro de dicho atributo, todos los estilos que se deseen aplicar sobre el elemento, separándolos con ";".
<h1 style="color: red; background-color: #F8C471">CSS inline</h1> <p>Texto con una palabra en <span style="font-weight: bold">Negrita</span> </p>
Ahora bien, esta forma de aplicar estilos no es muy recomendada porque HTML sirve más para definir la estructura, así como la semántica del código, y no tanto para darle el aspecto visual. Además, hay que tener presente que, todas estas definiciones de estilo, solamente se aplicarán al elemento en donde se encuentren.
IR A PORTAFOLIOConsiste en colocar los estilos dentro de las etiquetas <head> y </head> del documento HTML. Para ello, se deben utilizar las etiquetas de apertura y de cierre <style> y </style> con el atributo type="text/css". Luego, dentro de esta etiqueta, se definirán todos los estilos por medio de selectores CSS. Esta es la técnica que más se usa para mejorar la velocidad de carga de un sitio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
h1 {
color: blue;
}
body {
background-color: blue;
}
</style>
</head>
<body>
<h1>CSS interno</h1>
</body>
</html>IR A PORTAFOLIO
Es la forma más utilizada y recomendada para dar estilos con CSS actualmente, porque permite separar por completo la estructura de una página web y los estilos de esta última. Consiste en definir los estilos en un archivo aparte con extensión .css (hoja de estilos CSS) y enlazarlo al archivo HTML. Para incluir la hoja de estilos en HTML se debe colocar la etiqueta <link> dentro del elemento <head> del archivo HTML y especificar los siguientes atributos:
- href: indica la ruta del archivo al que se va a enlazar; en este caso irá la ruta del archivo CSS.
- rel: describe la relación entre el archivo actual con el documento de destino; en este caso, se establece con valor stylesheet.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="estilos. CSS">
</head>
<body>
<h1> CSS externo</h1>
<p>Texto en letras cursivas y en mayúsculas</p>
</body>
</html>
h1 {
color: 333333;
}
p {
font-style: italic;
text-transform: uppercase;
}
body {
background-color: EEEEEE;
}
