Para especificar cómo se verá un documento HTML, se usan hojas de estilo CSS. Además, hay tres formas de escribir propiedades de estilo CSS que son CSS en línea, CSS incrustados y hojas de estilo CSS externos. Una hoja de estilo integrada es aquella que integra los datos de la hoja de estilo en un documento HTML utilizando el elemento.

Este artículo discutirá:

• Estructura de página HTML
• Cómo crear una hoja de estilo incrustada CSS?

Estructura de página HTML

Una página HTML tiene principalmente dos secciones, "cabeza" y "cuerpo". La sección principal contiene la meta información sobre la página, mientras que la sección del cuerpo comprende los elementos visibles en la página web, como imágenes, listas, tablas, encabezados y más.

La hoja de estilo CSS está incrustada dentro de la sección de la cabeza, dentro del elemento, como se destaca con la flecha roja:

Cómo crear una hoja de estilo incrustada CSS?

En HTML, primero, cree un elemento Div con el nombre de la clase "contenido". Dentro de este elemento, agregue

elemento y elemento asociados con los atributos:

• SRC: Este atributo se utiliza para especificar la ruta de la imagen.
• alternativo: Este atributo especifica el texto alternativo que aparecerá cuando una imagen no se cargue.
• ancho: Este atributo se utiliza para especificar el ancho de la imagen.

Entonces, agregue el
etiquetas para agregar saltos de línea y

elemento con la identificación "paraca"Para agregar contenido a la página web:

Escuela Linuxhint

Hola Mundo!

Estilo todos los elementos

*
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

El "*"Se utiliza para representar todos los elementos aplicados al"Familia tipográfica" propiedad. Aquí, el valor "Verdana, Ginebra, Tahoma, Sans-Serif"Se proporciona para garantizar que si el primer estilo de fuente no es compatible con el navegador, se aplicará el siguiente.

Estilo "contenido" Div Elemento Div

.contenido
Ancho: 500px;
Altura: 300px;
relleno: 5px;
margen: auto;
ROLED-LAFUERA: 50px;
Color de fondo: #7DB9E4;

El ".contenido"Se especifica para acceder al elemento DIV que tiene el contenido de la clase y aplica las propiedades dadas:

• "ancho"La propiedad establece el ancho del elemento.

• "altura"La propiedad establece/ajusta la altura del elemento.
• "relleno"El atributo incluye espacio alrededor del contenido del elemento o dentro del borde del elemento.
• "margen"La propiedad agrega espacio alrededor del elemento.
• "pesadilla"La propiedad agrega el espacio a la izquierda del contenido del elemento.
• "color de fondo"La propiedad establece el color de fondo del elemento.

Elemento de estilo "img"

img
Transición: todos 0.3s facilidad;

El elemento se aplica transición con el CSS "transición"Propiedad, donde"todo"Es un efecto de transición", "0.3S"Se refiere a la duración de la transición, y"facilidad"Se refiere al efecto de transición con un comienzo lento, luego rápido y termina lentamente.

Elemento de estilo "img" en el flotador

.contenido img: hover
cursor: puntero;
transformación: perspectiva (100px) traduce3D (50px, 20px, 20px);

Las propiedades aplicadas al elemento en el flotador se explican a continuación:

• "cursor"La propiedad especifica el estilo del cursor del mouse en el elemento, donde el valor"puntero"Muestra una mano del cursor con un dedo puntiagudo.
• Como el valor del "transformar"Propiedad, la"perspectiva (100px)"La función se utiliza para especificar la distancia entre el usuario y el objeto, y el"traduce3D (50px, 20px, 20px)"Reubica un elemento en el plano 3D. Estos parámetros muestran el eje x, el eje y y el eje z, respectivamente.

ID de estilo "para" del elemento "P"

#para
tamaño de fuente: 25px;
Font-Weight: Bold;
Color: #3802CE;
relleno: 5px;

El "#paraca"Se utiliza para acceder al elemento con el ID para y aplicar las siguientes propiedades:

• "tamaño de fuente"La propiedad establece el tamaño de fuente del elemento.
• "pescadoLa propiedad establece que el tamaño de fuente es delgado o grueso.
• "colorLa propiedad se utiliza para establecer/aplicar el color de fuente del elemento.

Aquí está la salida del código mencionado anteriormente:

Se puede observar a partir de la salida dada que la hoja de estilo incrustada se ha aplicado con éxito.

Conclusión

Las hojas de estilo embebidas por CSS son adecuadas para documentos que tienen necesidades de diseño específicas. Para crear una hoja de estilo integrado, se requiere declarar propiedades CSS dentro del elemento. Este elemento de estilo se especifica en la etiqueta de cabeza HTML. En esta publicación, demostramos el método para crear hojas de estilo CSS incrustadas con un ejemplo.