Ahora aprenderemos a utilizar CSS en HTML, existen varias formas de aplicar estilos CSS a nuestros elementos hechos con código HTML, todo ello abordaremos en esta lección y además estableceremos cuándo, por qué y dónde emplear una u otra forma ¿Listos? ¡Pues vamos a ello!
Ir a contenido:
Cómo se puede utilizar CSS
Existen tres formas bastante conocidas de emplear CSS para maquetar una página HTML y son las siguientes:
- Aplicar CSS en línea HTML mediante atributos.
- Incrustar el código CSS en una etiqueta
<style>
dentro del documento HTML. - Crear un documento CSS externo.
CSS en línea empleando un atributo
Esta forma de utilizar CSS es la más básica y muy conocida, de hecho, de alguna manera ya lo habíamos utilizado en el curso de HTML; básicamente consiste en indicar los estilos de un elemento HTML dentro de su etiqueta de apertura, mediante un atributo HTML.
El atributo STYLE
es la mejor opción para colocar estilos, dentro de su valor irán las propiedades y sus respectivos valores CSS.
Ejemplo de CSS aplicado en línea HTML.
<p style="color: red;"> este es un párrafo </p>
De esta manera se aplica un estilo determinado solo al elemento de la etiqueta, en este caso color de letra para el párrafo será rojo.
CSS incrustado en el documento HTML
Otra manera fantástica de usar CSS en documento HTML es incrustando el código CSS dentro de ella, de tal manera que los estilos que deseamos aplicar afectarán no solo a un elemento como en el caso anterior, sino serán aplicados a toda la página.
Si en el caso anterior STYLE
funcionaba como un atributo, ahora funcionará como una etiqueta HTML, con su respectiva etiqueta de apertura y cierre, de la siguiente manera:
<style> /* Aquí irá todo el código CSS*/ </style>
Indicaciones:
- La etiqueta
<style>
contiene el código CSS que desea aplicar al documento HTML. <style>
Será incrustado dentro de la etiqueta<head>
del documento para que funcione correctamente.
Ejemplo de código CSS incrustado en HTML
<html> <head> <title> TITULO</title> <style> p {color:red;} a {} #cabecera {} </style> </head> <body> </body> </html>
CSS en un documento CSS externo
Esta es sin duda la forma más recomendable de aplicar estilos a documentos HTML, consiste en crear un documento CSS muy aparte y guardarlo con la extensión. CSS, por ejemplo: midocumento.css
- En el documento CSS se encuentren todos los códigos CSS que determinarán el estilo de todos los elementos HTML apuntados.
- Desde un documento HTML llamaremos al documento CSS para que se haga presente y aplique los estilos que hemos escrito en dicho documento CSS.
- Para realizar la invocación, emplearemos la etiqueta
<link>
dentro de la etiqueta<head>
del documento HTML y mediante el atributorel
yhref
invocamos al documento CSS mediante su nombre. Veamos la sintaxis:
<html> <head> <title> TITULO</title> <link rel="stylesheet" href="midocumento.css"> </head> <body> </body> </html>
El atributo REL
define la relación entre el documento HTML y el documento CSS invocado, el valor StyleSheet
indica que es un estilo preferido, mientras que rel="Alternate Stylesheet"
define un estilo alterno.
El atributo href
es la que invoca al documento CSS, si está guardada en la misma carpeta que el documento HTML entonces basta con colocar el nombre del documento con su respectiva extensión como en el ejemplo href="midocumento.css"
. Si el archivo CSS se encuentra guardada en otra carpeta, entonces hay que especificar la dirección URL donde está ubicada.
Conclusión sobre las formas de emplear CSS en HTML
Dependerá de nuestro objetivo emplear una u otra forma de usar CSS en HTML, si deseamos colocar un estilo corto, particular y para un elemento HTML específico, entonces podemos hacer uso de CSS en línea.
El código CSS interno o incrustado mediante etiqueta <style>
afectará solo al resultado del documento HTML en el que esté incrustado, si se tiene pocos elementos y estilos, podemos emplear este método.
Los estilos CSS en documento externo es el más indicado para proyectos que implican varias páginas e incluso miles, ya que permite gestionar el estilo de todas desde un único documento CSS.
[popup_anything id=»4273″]
un excelente concepto, muy bien explicado
la verdad leo esto por que mi profe me ordeno hacer un resumen de esto