Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
Summary
TLDREste script de video ofrece una introducción al uso de las hojas de estilo en HTML, esencial para el diseño de páginas web. Se explica cómo las hojas de estilo (CSS) permiten separar el contenido de la presentación, lo que facilita la modificación y mantiene el código limpio. Se destacan los selectores de etiquetas y clases, y se muestra cómo aplicar estilos genéricos a etiquetas como 'h1' y cómo crear clases para estilos específicos, como la clase 'resaltado'. Además, se discute la diferencia entre utilizar etiquetas de formato HTML heredadas y las hojas de estilo modernas, poniendo de relieve la importancia de la semántica y la accesibilidad. Se aboga por el uso de CSS para mayor flexibilidad y se menciona la ventaja de centralizar el estilo en un archivo externo para aplicar cambios en múltiples páginas web. Finalmente, se invita a los espectadores a seguir el canal de Aula Click en YouTube para recibir más contenido educativo sobre HTML.
Takeaways
- 📝 Las hojas de estilo (CSS) se utilizan para establecer el diseño y el formato de una página web, como colores, tipografías, tamaños y disposición de los elementos.
- 🌐 El uso de CSS permite separar el contenido del diseño, lo que hace que el código sea más limpio y fácil de modificar.
- 🔄 El término CSS proviene de 'Cascading Style Sheets', y en futuras lecciones se explicará por qué se llama así.
- 📖 Se puede crear una hoja de estilo dentro de la cabecera de un documento HTML utilizando la etiqueta `<style>`.
- 🔑 Los selectores de etiquetas y clases son fundamentales en CSS para definir el formato de diferentes elementos de la página.
- 🎨 Las propiedades CSS, como `font-size` y `color`, se aplican dentro de los selectores para dar estilo a los elementos.
- 📏 Se pueden aplicar estilos genéricos a todas las instancias de una etiqueta (como `h1`) o se pueden crear clases para estilos específicos.
- 📂 Las clases se aplican a elementos específicos mediante el atributo `class`, permitiendo un estilo personalizado.
- 🖋️ El uso de editores de código como Brackets puede facilitar la escritura de CSS al proporcionar sugerencias mientras se escribe.
- 🔲 Las etiquetas HTML para dar formato al texto, como `<strong>`, `<em>`, `<span>`, tienen un propósito específico y se deben utilizar en función de su significado semántico.
- 🔗 Es posible enlazar una hoja de estilo externa a múltiples páginas web usando la etiqueta `<link>`, lo que mejora la consistencia y facilita la actualización de estilos.
- ⚙️ Aunque las etiquetas de formato HTML son útiles, la tendencia actual favorece el uso de CSS para un control más fino y la separación de presentación y contenido.
Q & A
¿Para qué sirven las hojas de estilo en HTML?
-Las hojas de estilo (CSS) se utilizan para establecer el diseño o el formato de una página web, como los colores, el tipo de letra, el tamaño y la posición de los elementos, permitiendo así separar el contenido de la presentación.
¿Qué significa CSS y cómo se relaciona con las hojas de estilo?
-CSS significa 'Cascading Style Sheets' y se relaciona con las hojas de estilo porque es el lenguaje utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML.
¿Cómo se crea una primera hoja de estilo en HTML?
-Para crear una primera hoja de estilo, se escribe la etiqueta `<style>` dentro de la cabecera (`<head>`) de un documento HTML, especificando el tipo como 'text/css', y luego se escriben los selectores y las propiedades CSS entre las etiquetas de apertura y cierre de `<style>`.
¿Cuál es la diferencia entre un selector de etiquetas y uno de clases en CSS?
-Un selector de etiquetas, como `h1`, se utiliza para aplicar un estilo a todas las instancias de esa etiqueta en una página. Mientras que un selector de clases, identificado por un punto seguido del nombre de la clase (por ejemplo, `.resaltado`), se utiliza para aplicar un estilo específico a los elementos que tienen asignada esa clase.
¿Cómo se aplica un estilo a una etiqueta HTML específica usando una clase CSS?
-Para aplicar un estilo a una etiqueta HTML específica, se define una clase CSS con sus propiedades y luego se asigna a la etiqueta HTML utilizando el atributo `class` y especificando el nombre de la clase entre comillas.
¿Por qué es preferible utilizar las hojas de estilo en lugar de etiquetas HTML para dar formato al texto?
-Es preferible utilizar las hojas de estilo porque permiten una separación clara entre el contenido y la presentación, lo que hace que el código sea más limpio, fácil de modificar y mantener. Además, las hojas de estilo son más flexibles y permiten aplicar cambios en múltiples páginas web desde un solo lugar.
¿Cuáles son las implicaciones de utilizar etiquetas de formato obsoletas como `<strong>`, `<b>`, `<em>`, `<img>`?
-Las etiquetas de formato obsoletas, aunque aún funcionan, están en desuso y pueden ser reemplazadas por CSS. Su uso puede llevar a una pérdida de semántica, es decir, el significado que las etiquetas implican para los motores de búsqueda y la accesibilidad. Además, en futuras versiones de HTML, estas etiquetas podrían ser declaradas obsoletas, lo que requeriría cambios en el código.
¿Cómo se enlaza una hoja de estilo externa a una página web?
-Para enlazar una hoja de estilo externa, se utiliza la etiqueta `<link>` en la sección de encabezado de la página web, especificando el atributo `rel` con el valor 'stylesheet' y el atributo `href` con la ruta al archivo CSS.
¿Qué ventaja tiene enlazar una hoja de estilo externa en lugar de incluirla directamente en el documento HTML?
-Enlazar una hoja de estilo externa permite reutilizar el mismo archivo CSS en múltiples páginas web, lo que significa que los cambios realizados en un solo archivo afectarán a todas las páginas enlazadas. Esto mejora la eficiencia y evita la duplicación de código.
¿Cuál es la diferencia entre las etiquetas semánticas y las etiquetas de presentación en HTML?
-Las etiquetas semánticas, como `<header>`, `<footer>`, `<article>`, etc., proporcionan información sobre el contenido y su estructura, mejorando la accesibilidad y la optimización para motores de búsqueda. Por otro lado, las etiquetas de presentación, como `<strong>`, `<b>`, `<i>`, `<em>`, afectan visualmente al contenido sin agregar significado semántico.
¿Dónde se puede encontrar información actualizada y recomendaciones sobre el uso de etiquetas HTML y las hojas de estilo?
-La información actualizada y las recomendaciones sobre el uso de etiquetas HTML y las hojas de estilo se pueden encontrar en la página web del W3C (World Wide Web Consortium), la organización que define los estándares para HTML y otras tecnologías web.
Outlines
😀 Introducción a las Hojas de Estilo CSS
Este primer párrafo aborda la introducción a las hojas de estilo en HTML, destacando su importancia para establecer el diseño y el formato de una página web. Se menciona que antes de las hojas de estilo, el diseño se incluía directamente en las etiquetas HTML, lo que hacía difícil la modificación. Ahora, con CSS, el contenido se separa del diseño, lo que permite una gestión más clara y sencilla de los estilos. Además, se presenta la sintaxis básica de CSS, incluyendo la creación de selectores para etiquetas y clases, y se muestra cómo aplicar estilos genéricos a las etiquetas h1 y cómo crear y aplicar una clase específica llamada 'resaltado'.
📄 Aplicación de Estilos con Selectores y Clases
El segundo párrafo se enfoca en cómo aplicar estilos específicos utilizando selectores de clases y en la diferencia entre estas y los selectores de etiquetas. Se describe cómo se utiliza la etiqueta 'span' para aplicar estilos a un texto específico dentro de un párrafo. Además, se discute la elección entre el uso de etiquetas HTML para dar formato y las hojas de estilo CSS, destacando que las etiquetas como 'strong', 'm', 'b' tienen un significado semántico y su uso puede ser preferible en ciertos contextos. Se aboga por la tendencia de utilizar CSS para el diseño y mantener las etiquetas HTML para su propósito semántico.
📁 Organización y Uso de Archivos CSS
El tercer párrafo aborda la cuestión de dónde se debe colocar la definición de la hoja de estilo. Se explica que aunque se puede incluir la hoja de estilo directamente en el archivo HTML, es recomendable utilizar un archivo CSS separado para facilitar la actualización y el mantenimiento del diseño en múltiples páginas web. Se muestra cómo enlazar un archivo CSS externo utilizando la etiqueta 'link' y sus atributos 'rel' y 'type'. Finalmente, se invita a los espectadores a seguir el canal de Aula Clic en YouTube para recibir actualizaciones sobre nuevos contenidos y cursos gratuitos de HTML.
Mindmap
Keywords
💡Hojas de Estilo
💡Selectores
💡Propiedades y Valores
💡Clases
💡Editor de Código
💡Formato Semántico
💡Etiquetas HTML
💡Enlaces a Hoja de Estilo
💡
💡Estilo Genérico
💡Estilo Específico
💡Etiquetas Obsoletas
Highlights
Las hojas de estilo son utilizadas para establecer el diseño o el formato de una página web.
Antes, el diseño se incrustaba dentro de las etiquetas HTML, pero con CSS se separa el contenido del diseño.
Se utiliza el término CSS, que significa 'Hojas de Estilo en Cascada'.
Se muestra cómo crear una primera hoja de estilo dentro de la etiqueta 'style' en la cabecera de un documento HTML.
Los selectores de etiquetas y clases son introducidos para aplicar estilos específicos a elementos HTML.
Se explica la sintaxis para aplicar estilos a todas las etiquetas 'h1' y cómo utilizar propiedades como 'font-size' y 'color'.
Se destaca la utilidad de la vista previa en editores como Brackets para ver los cambios de estilo en tiempo real.
Se introduce la creación de clases CSS para aplicar estilos específicos a elementos, como el ejemplo de la clase 'resaltado'.
Se muestra cómo aplicar una clase CSS a un párrafo y a una palabra específica usando la etiqueta 'span'.
Se discute la diferencia entre utilizar etiquetas HTML para dar formato y las hojas de estilo CSS.
Se menciona que las etiquetas HTML como 'strong', 'm', 'b' tienen un significado semántico y su uso debe ser considerado.
Se recomienda el uso de hojas de estilo en lugar de etiquetas de formato para una mejor organización y mantenimiento.
Se aboga por la flexibilidad de las clases CSS, que permiten cambios más sencillos en el futuro.
Se destaca la importancia de mantener el significado semántico de las etiquetas HTML, como las etiquetas de cabecera 'h1'.
Se proporciona información sobre la web w3c.org para obtener recomendaciones y conocer las etiquetas obsoletas.
Se describe cómo colocar la hoja de estilo en un archivo separado y enlazarla con la página web usando la etiqueta 'link'.
Se menciona la ventaja de compartir una hoja de estilo entre múltiples páginas web y la facilidad de realizar cambios.
Se invita a los espectadores a suscribirse al canal de Aula Click en YouTube para seguir aprendiendo HTML.
Transcripts
bienvenidos al curso de html de aula
clic en este vídeo vamos a ver una
primera introducción a las hojas de
estilo aprenderemos su sintaxis y cómo
utilizarlas veremos la diferencia entre
selectores de etiquetas y clases
comenzamos
[Música]
las hojas de estilo sirven para
establecer el diseño o el formato de la
página es decir los colores el tipo de
letra el tamaño cómo se posicionan los
elementos dentro de la página etcétera
antes todo esto se hacía incrustando
propiedades dentro de las propias
etiquetas html ahora con las hojas de
estilo se puede separar el diseño del
contenido con lo cual queda mucho más
limpio y fácil de modificar se suele
utilizar el término css que viene del
inglés hojas de estilo en cascada
más adelante en otros vídeos ya veremos
por qué se llaman en cascada y vamos a
crear ya nuestra primera hoja de estilo
para ello dentro de la cabecera
escribimos la etiqueta está ahí
debemos especificar la propiedad type
como test css
el signo mayor y la etiqueta de cierre
style y a continuación empezamos a
escribir los selectores que definen el
formato
por ejemplo para aplicar un formato a
todas las etiquetas h1 lo escribimos de
esta forma h1 un espacio y entre llaves
escribiremos las propiedades
por ejemplo relativas a la fuente hay
muchas propiedades
vamos a elegir el tamaño
después de la propiedad escribimos dos
puntos y el valor en este caso el valor
es un número seguido de una unidad de
medida 28006 como vamos a escribir otra
propiedad escribimos punto y coma como
separador
para la propiedad color el valor se
puede especificar en varios formatos en
este caso vamos a utilizar un nombre de
color más adelante ya iremos viendo los
otros formatos como es la última
propiedad no hace falta indicar el
separador el punto y coma
y como tenemos activada la vista previa
de nuestro editor brackets aquí en la
derecha vemos el resultado al contenido
de la etiqueta h1 se le han aplicado las
propiedades de la hoja de estilo
un tamaño de letra de 28 pilsen y un
color rojo oscuro
este formato se aplicará a todas las
etiquetas h1 que coloquemos en esta
página
es decir estamos aplicando un estilo de
forma genérica a todas las etiquetas h1
que estén bajo esta hoja de estilo pero
en muchas ocasiones necesitaremos
aplicar un estilo de forma específica o
concreta
y para ello definimos una clase
escribimos un punto y el nombre que
queremos darle a la clase en este caso
resaltado y a continuación ya es igual
que en el caso anterior entre llaves
escribiremos las propiedades
como vemos con la ayuda del editor
brackets es mucho más fácil escribir
propiedades
al empezar a escribir nos va sugiriendo
la propiedad que empieza por esa letra
igual para los valores
vamos a escribir otra propiedad para la
fuente en este caso el peso y como valor
elegimos
bold negrita
ya tenemos definida nuestra clase ahora
sólo nos falta aplicarla a la etiqueta o
elementos que deseemos
por ejemplo si queremos que todo este
párrafo
tome el formato resaltado
detrás de la etiqueta p escribimos class
igual y entre comillas doble el nombre
de la clase resaltado
y vemos como este párrafo ahora está en
negrita y en color azul
si queremos aplicar esta clase solo a
una palabra dentro de un párrafo primero
debemos de limitarla
para ello utilizamos la etiqueta span
y ahora colocamos dentro de las
etiquetas span
el texto que nos interesa en este caso
la palabra básicas
observa que la etiqueta span no produce
ningún efecto podríamos decir que es una
etiqueta neutra sirve para delimitar
una vez tenemos delimitado el texto
dentro de la etiqueta spam sólo nos
queda aplicarle a la etiqueta es pan
la clase resaltado se hace exactamente
igual que habíamos visto antes
por lo tanto copiamos el texto class
igual ha resaltado y lo pegamos a
continuación de spam
y aquí tenemos las palabras básicas con
el formato resaltado
aparte de estas dos que acabamos de ver
existen más formas de definir estilos
pero primero vamos a asimilar estas
básicas y ya iremos viendo las otras
según nos hagan falta
por supuesto las hojas de estilo tienen
muchas más posibilidades de las que
acabamos de ver pero con esto ya nos
podemos dar una idea de la potencia que
tienen y por supuesto es el método que
hay que utilizar para dar formato a la
página web
sin embargo como vimos en el vídeo
anterior existen unas etiquetas de html
para dar formato al texto sin utilizar
hojas de estilo nos referimos a
etiquetas como strong m b etcétera estas
etiquetas provienen de la época en que
no existían hojas de estilo vamos a
aplicar la etiqueta be para ver las
diferencias y dar unas ideas para que
puedas elegir cuándo te interesa aplicar
unas u otras vamos a colocar la palabra
operaciones dentro de la etiqueta be y
con esto obtenemos el formato
correspondiente es decir negrita
pero ya hemos visto que existe una
propiedad css para poner en negrita por
lo tanto si a la clase resaltado le
cambiamos el color a negro
obtenemos el mismo efecto que con la
etiqueta be es decir ahora es
prácticamente lo mismo aplicar la
etiqueta be o la clase resaltado en
ambos casos obtenemos negrita en color
negro
y ahora surge la pregunta cuál conviene
utilizar
no existe una respuesta única depende de
cada caso aunque la tendencia es a
utilizar cada vez más las hojas de
estilo e ir abandonando estas etiquetas
en este caso podríamos pensar que es más
flexible utilizar la clase resaltado que
la etiqueta be ya que en un momento dado
podríamos cambiar el color negro por
otro color
aunque eso también podríamos hacerlo
utilizando la etiqueta b
bastaría crear una regla para la
etiqueta be con el color que deseemos
aunque si lo hacemos así estamos
cambiando los valores por defecto de la
etiqueta p
en este caso creo que sería mejor
utilizar una regla css a la etiqueta be
sin embargo con otras etiquetas no
ocurre lo mismo ya que interviene otro
factor la semántica o significado de la
etiqueta hay etiquetas que llevan
implícito un significado semántico por
ejemplo las etiquetas de cabecera
cuando utilizamos una etiqueta h1 aparte
del formato le estamos indicando a los
buscadores que ese texto es importante
por lo tanto en ese caso es preferible
seguir utilizando la etiqueta h1
cambiándole el formato si lo deseamos
que crear una nueva clase con un formato
equivalente
ya que en ese caso perderíamos el
significado semántico esa nueva clase no
sería reconocida por los buscadores como
algo importante resumiendo salvo algunas
excepciones con carga semántica como las
etiquetas de cabecera en general es
preferible utilizar las hojas de estilo
ya que así tenemos centralizado en un
solo sitio todo el formato de nuestra
página web
también hay que tener en cuenta que si
utilizamos etiquetas antiguas puede que
en futuras versiones sean declaradas
como obsoletas y ello nos obliga a
modificar el código para todas estas
cuestiones siempre podemos acudir a la
web w3c punto o hereje
qué es la web oficial del consorcio que
define el html y suelen tener
recomendaciones de cómo utilizar cada
etiqueta y también de las que van
quedando obsoletas bien vamos a dejar
este tema y vamos a pasar a una cuestión
que está mucho más clara
se trata de donde colocar la definición
de la hoja de estilo se puede colocar
tal como la tenemos aquí dentro del
propio archivo que contiene la página
web dentro del archivo html sin embargo
en la mayoría de los casos es
recomendable colocarla en otro archivo
para ello lo único que tenemos que hacer
es copiar la zona de los electores es
decir toda esta zona en otro archivo y
guardar ese archivo con la extensión css
que es lo que hemos hecho nosotros en
este archivo al que hemos dado el nombre
hoja estilo curso css ahora sólo falta
enlazar este archivo desde la página web
para ello utilizamos la etiqueta link en
la propiedad hr
escribimos el nombre del archivo que
contiene la hoja de estilo css
además debemos colocar estas dos
propiedades indicando que se trata de
una hoja de estilo y de un archivo tipo
texto css
y con esto ya tenemos la hoja de estilo
definida en otro archivo
como vemos el resultado es exactamente
el mismo
pero con este método tenemos la gran
ventaja de que podemos utilizar una hoja
de estilo enlazándola desde muchas
páginas web y solo tendremos que
modificar en un lugar para que los
cambios afecten a todas las páginas web
y con esto acabamos este vídeo en el que
hemos visto una primera introducción a
las hojas de estilo en los próximos
vídeos más temas interesantes
en la web de aula clic tenemos un curso
completo y gratuito para aprender html
si no te quieres perder los nuevos
vídeos suscríbete al canal de aula click
en youtube
si te ha gustado este vídeo no olvides
compartirlo y darle al me gusta
Browse More Related Video
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
Tutorial básico de HTML desde cero - Video 2: Vistazo inicial a las etiquetas.
Cómo hacer una PÁGINA WEB en BLOC de NOTAS
CURSO de CSS 2021 Rapido y Facil # 6 | 💻 ID & CLASES
Las 8 mejores extensiones para potenciar tu experiencia en Visual Studio Code
Curso de HTML y CSS. 2.1. Estructura de una página web. Párrafos de texto
5.0 / 5 (0 votes)