Las hojas de estilo CSS se utilizan para describir la presentación de un documento escrito en HTML. Proporciona propiedades de color, diseño, fondo, fuente y borde al mismo tiempo que permite una mejor accesibilidad al contenido, una mayor flexibilidad y control, así como la especificación de las características de la presentación. Las hojas de estilo CSS se pueden aplicar a un documento HTML de 3 maneras: estilos en línea, hoja de estilo incrustada y hoja de estilo externa.
Hoja de estilo incrustada: le permite definir estilos para un documento HTML en particular como un todo en un solo lugar. Esto se hace incrustando las etiquetas <style></style> que contienen las propiedades CSS en el encabezado de su documento. Las hojas de estilo incrustadas son particularmente útiles para documentos HTML que tienen requisitos de estilo únicos del resto de los documentos de su proyecto. Sin embargo, si es necesario aplicar los estilos en varios documentos, debe vincular a una hoja de estilo externa en lugar de utilizar hojas de estilo incrustadas individuales. El uso de hojas de estilo incrustadas tiene una clara ventaja sobre los estilos en línea que solo le permiten abordar un elemento HTML a la vez.
Sintaxis: la sintaxis de CSS para las hojas de estilo incrustadas es exactamente la misma que para otros códigos CSS, aparte del hecho de que ahora está envuelto dentro de las etiquetas <style></style>. La etiqueta <style> toma el atributo ‘tipo’ que define el tipo de hoja de estilo que se utiliza (es decir, texto/CSS).
Ejemplo 1: a continuación se muestra un documento HTML con el estilo CSS para toda la página web encerrado dentro de las etiquetas <style></style>. Estas propiedades se aplicarían a todos los elementos correspondientes en el documento HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Embedded stylesheet -->
<style>
h2 {
font-size: 1.5rem;
color: #2f8d46;
text-align: center;
}
p {
font-variant: italic;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>This document is using an embedded stylesheet!</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Producción:
Todos los elementos <p> han sido diseñados utilizando el estilo provisto en el CSS incrustado.
Ejemplo 2: cuando la lista de conjuntos de reglas CSS se inserta en el elemento de estilo, aplicará las propiedades asociadas a todos los elementos de la página web. En caso de que desee ser más selectivo y diseñar un elemento o un grupo de elementos de manera distinta, use clases e ID, como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Embedded stylesheet -->
<style>
h2 {
font-size: 1.5rem;
color: #2f8d46;
text-align: center;
}
.p-content {
font-variant: italic;
}
</style>
</head>
<body>
<h2>Welcome To Geeks for Geeks</h2>
<p class="p-content">
This document is using an
embedded stylesheet!
</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Producción:
Los elementos <p> específicos se han diseñado utilizando el atributo de clase.