Want to create interactive content? It’s easy in Genially!

Get started free

Estilos en HTML

Carlos Adolfo Reyes

Created on September 19, 2021

Identifica las formas de aplicar estilo en HTML.

Start designing with a free template

Discover more than 1500 professional designs like these:

Puzzle Game

Scratch and Win

Microlearning: How to Study Better

Branching Scenarios Challenge Mobile

Branching Scenario Mission: Innovating for the Future

Piñata Challenge

Teaching Challenge: Transform Your Classroom

Explore all templates

Transcript

  • Estilo en línea
  • Estilo interno
  • Estilo externo

Contenido interactivo presente en donde veas esta imagen.

inline - en la misma línea de código html

Se aplica en la misma línea de código modificando la etiqueta de apertura del elemento a través del atributo style.

<p style="color:blue">Las aguas bañan nuestra patria.</p>

La etiqueta de apertura se ha modificado con el atributo style.

La etiqueta de apertura se ha modificado con el atributo style.

Etiqueta de cierre

Contenido

inline

¿Está ordenado el código?

<p>Hace posible la vida.</p>

<p style="font-style:italic">Hace posible la vida.</p>

<h1 style="color:cyan">EL AGUA</h1>

<p style="color:blue">Hace posible la vida.</p>

Ordena el código.

internal - en el mismo documento html

Se define desde la sección de cabecera <head> a través del elemento style (que antes empleabamos como atributo), en una codificación diferente.

R e g l a C S S

h1 {font-family:tahoma; color:navy;}

valor

propiedad

valor

prop

Declaración

Declaración

Selector

internal - en el mismo documento html

Se define desde la sección de cabecera (head):

<!DOCTYPE html> <html lang="es-CO"> <head> <meta charset="utf-8"> <title>Estilo</title> <style> h1 {font-family:tahoma; color:navy;} </style> </head> <body>

documento html

sección de cabecera

estilo interno

internal - en el mismo documento html

El selector no se etiqueta:

<h1> {font-family:tahoma; color:navy;} </h1>

R e g l a C S S

h1 {font-family:tahoma; color:navy;}

valor

propiedad

valor

prop

Declaración

Declaración

Selector

internal - en el mismo documento html

Usa corchetes:

h1 {font-family:tahoma; color:navy;}

h1 [font-family:tahoma; color:navy; ]

h1 (font-family:tahoma; color:navy;)

R e g l a C S S

h1 {font-family:tahoma; color:navy;}

valor

propiedad

valor

prop

Declaración

Declaración

Selector

internal - en el mismo documento html

Cada declaración inicia con una propiedad seguida de dos puntos que anteceden un valor y termina con punto y coma. No emplea comillas.

R e g l a C S S

h1 {font-family:tahoma; color:navy;}

valor

propiedad

valor

prop

Declaración

Declaración

Selector

internal - en el mismo documento html

Observe los espacios en blanco:

  • Entre el selector y el corchete.
  • Entre declaraciones.

R e g l a C S S

h1 {font-family:tahoma; color:navy;}

valor

propiedad

valor

prop

Declaración

Declaración

Selector

internal - en el mismo documento html

Según la cantidad de declaraciones, puede codificar...

h1 {font-family:tahoma; color:navy; font-style:italic;}

...en la misma línea

h1 { font-family:tahoma; color:navy; font-style:italic; }

...o en líneas independientes

internal - en el mismo documento html

Es posible definir el estilo de varios selectores a la vez:

h1, h2, p, li {font-style:italic; color:blue;}

h1, h2, p, li { font-style:italic; color:blue; }

internal - en el mismo documento html

h1 {font-family:tahoma;}

propiedad

valor

selector

regla CSS

declaración

Estilo interno

rnd

internal - en el mismo documento html

h1, h2, li {font-style:italic; color:blue;}
color:blue
</>
italic
font-style
h2,
h1,
li

Líneas independientes

external - en una hoja de estilo en cascada

El uso de una hoja de estilo en cascada - CSS permite que el docuento html se encargue solo del contenido, dejando el estilo en otro documento.

external - en una hoja de estilo en cascada

Se debe vincular o enlazar el documento html con la hoja de estilo. Esto se hace desde la sección head a través del elemento link y los atributos rel y href:

<!DOCTYPE html> <html lang="es-CO"> <head> <meta charset="utf-8"> <title>Estilo Externo</title> <link rel="stylesheet" href="styles.css"> </head>

external - en una hoja de estilo en cascada

<link rel="stylesheet" href="styles.css">

indica el tipo de relación entre los archivos.

rel="stylesheet"

crea el vínculo entre el documento HTML y el archivo styles.css, que contiene la codificación de estilos.

href="styles.css"

external - en una hoja de estilo en cascada

Ambos archivos DEBEN estar en la misma carpeta.

external - en una hoja de estilo en cascada

Ambos archivos PUEDEN editarse con el Bloc de Notas.

rnd

external - en una hoja de estilo en cascada

Recuerde, la codificación CSS es diferente a la HTML. Su sintaxis es simple. No deben ser mezcladas.

Regla CSS

propiedad

h1 {font-family:tahoma; color:navy;}

valor

Sintaxis CSS

prop

valor

selector

declaración

declaración

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS

Tres condiciones

El documento html y la hoja de estilo DEBEN estar en la misma carpeta.

El documento html DEBE relacionar correctamente la hoja de estilo: <link rel="stylesheet" href="styles.css">

La hoja de estilo DEBE estar correctamente guardada (styles.css) y codificada.

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS

CSS

CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios. CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

https://developer.mozilla.org/es/docs/Web/CSS