Cómo usar CSS en HTML y ejemplos

Anterior
Avanzar

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 y porqué y dónde emplear una u otra forma ¿Listos? ¡Pues vamos a ello!

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 linea 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 mas 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 linea 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.

Te recomendamos leer:  Estilos para enlaces CSS

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 mas 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 estilo 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 atributo rel y href invocamos al documento CSS. Veamos la sintaxis:
<html>
<head>
<title> TITULO</title>
  
  <link rel="stylesheet" href="midocumento.css">

</head>

<body>

</body>

</html>

El atributo REL define la relacion entre el documneto HTML y el documneto 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 esta esta guardad 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. si el archivo CSS se encuentra guardada en otra carpeta, entonces hay que especificar la dirección URL donde esta ubicada.

Te recomendamos leer:  Qué es CSS y Introducción a CSS

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 linea.

El código CSS interno o incrustado mediante etiqueta <style> afectará solo al resultado del documento HTML en el que este 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.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos