Incluir CSS en el documento HTML
Dado que hablaremos de CSS y HTML, pongámos primero estos términos en contexto:
- CSS (Cascading Style Sheets) en español “Hojas de estilo en cascada”, es un lenguaje de diseño gráfico para definir y crear reglas que permitan dar estilo a un lenguaje de marcado.
- HTML (hypertext markup language definition) es un lenguaje de marcdo utilizado para la creación de páginas web.
Esto quiere decir, que una vez que se tiene la estructura de una página en un archivo HTML, lo que se desea es agregar estilos a través de CSS.
Existen tres opciones para incluir CSS en un documento HTML.
- Incluir CSS en el mismo documento HTML
- Definir CSS en un archivo externo e incluirlo en el HTML
- Incluir CSS en los elementos HTML
1. Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html> |
2. Definir CSS en un archivo externo e incluirlo en el HTML
Todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css
Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
Crear archivo llamado estilo.css (o con el nombre que usted desee) y poner el código css dentro
|
1 2 3 4 |
p { color: black; font-family: Verdana; } |
En el archivo HTML hacer el link con el archivo css
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/esitlo.css" media="screen" /> </head> <body> <p>Un párrafo de texto.</p> </body> </html> |
3. Incluir CSS en los elementos HTML
Es el peor y el menos utilizado, ya que tiene los problemas de no separar código de diseño.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ejemplo de estilos CSS en el propio documento</title> </head> <body> <p style="color: black; font-family: Verdana;">Un párrafo de texto.</p> </body> </html> |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
