Una hoja de estilo es un archivo que contiene un fragmento de código que se utiliza para dar estilo a nuestra página web. Se usa para cambiar varias propiedades de una página, como el tamaño de página, los márgenes, las fuentes, el tamaño de fuente, etc., lo que no es posible usando solo HTML normal. En el desarrollo web, el diseño y la estructuración de las páginas web se realizan mediante HTML (que define el contenido de elementos como titulares y párrafos, y permite agregar imágenes, videos y otros medios en nuestra página web), y la parte de decoración se realiza mediante Hojas de estilo en cascada (CSS). CSS es una forma bien conocida de hojas de estilo que se utilizan para diseñar páginas web. CSS se utiliza para diseñar nuestras páginas web haciéndolas interactuar con los elementos HTML.
¿Por qué necesitamos CSS?
Es posible crear una página web completa usando solo HTML, que será renderizado por todos los navegadores web, pero no será visualmente atractivo en absoluto. Pero al mismo tiempo, no podemos usar CSS sin un documento HTML, así que uno completa al otro. HTML define la estructura de nuestra página y ayuda en la inserción de datos. Sin CSS, una página web sería simplemente una página blanca normal con texto sin formato. CSS ayuda a dar una mejor apariencia a los elementos de nuestra página web sin traer ningún cambio a su funcionalidad.
¿Qué se puede lograr usando CSS?
- Con la ayuda de las hojas de estilo, podemos cambiar varias propiedades como margen, relleno, borde, etc. de cualquier elemento de nuestra página web. Podemos hacer que nuestro sitio web sea más atractivo mediante el uso de hojas de estilo.
- Podemos controlar y cambiar los valores de espaciado, borde y margen de la mayoría de los elementos HTML con la ayuda de las hojas de estilo. Cualquier elemento puede tener su propio color de fondo o una imagen como fondo en lugar de solo el elemento <body> .
- Se puede aplicar una amplia variedad de animaciones y transiciones, como efectos de desplazamiento, retrasos de animación, duración de la transición, etc., a casi todos los elementos con la ayuda de CSS sin utilizar JavaScript o Flash.
- Los bordes se pueden aplicar a cualquier elemento Elemento HTML en lugar de solo a las tablas. CSS ofrece una gama más amplia de posibilidades en comparación con lo que ofrecen las extensiones de navegador HTML existentes. También podemos crear botones personalizados para nuestros formularios HTML con la ayuda de CSS.
En conclusión, es seguro decir que HTML es huesos, venas, sangre que da estructura al cuerpo, mientras que CSS actúa como uñas, cabello, piel y, por lo tanto, ayuda a definir el aspecto externo del cuerpo.
Con la ayuda de las hojas de estilo podemos usar y modificar los valores de los siguientes atributos:
- Color (fondo, texto).
- Estilo de fuente/Tamaño de fuente.
- Decoración (negrita, subrayado).
- Animaciones/Transiciones.
- Justificación del contenido (margen, relleno, borde).
El enfoque principal de este artículo es dar una mirada rápida a lo que se puede lograr usando CSS y se solicita al lector que haga un seguimiento con los enlaces incrustados de texto proporcionados para obtener más información sobre cada concepto en detalle.
Color: con la ayuda de las hojas de estilo, podemos dar color a cualquier elemento HTML y también al texto que contiene y darle un color de fondo único. Las imágenes también se pueden utilizar como fondo para casi todos los elementos.
HTML
<!DOCTYPE html> <html> <head> <title>GFG</title> </head> <body> <p style="color: rgb(4, 194, 4);"> GeeksforGeeks </p> </body> </html>
Producción:
Estilo de fuente: la fuente se puede cambiar con la ayuda de propiedades como «font-family», «font-style», etc. que ofrece CSS. Ofrece una variedad de fuentes y estilos diferentes como Times New Roman, Times, serif, cursiva, negrita, cursiva, etc.
HTML
<!DOCTYPE html> <html> <head> <title>GFG</title> </head> <body> <p style="color: rgb(4, 194, 4); font-family:fantasy; font-size: 25px;"> GeeksforGeeks </p> <p style="font-style: italic; font-weight: bold;"> Best Platform for Learners. </p> </body> </html>
Producción:
Decoración de texto: esta propiedad se utiliza para agregar o eliminar una variedad diferente de decoraciones de línea de nuestros textos HTML simples. En el siguiente ejemplo, la decoración se aplica al contenido de la etiqueta <u> subrayada y se le da un aspecto ondulado con color rojo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<style>
u {
text-decoration-style: wavy;
text-decoration-color: red;
}
</style>
</head>
<body>
<p style="color: rgb(4, 194, 4);
font-family:fantasy;
font-size: 25px;
text-decoration: underline;">
GeeksforGeeks
</p>
<p>
There's a <u>spelling</u> error.
</p>
</body>
</html>
Producción:
Animaciones/Transiciones: esta función ayuda a proporcionar animaciones y transiciones a elementos HTML simples. Las hojas de estilo proporcionan una gran variedad de transiciones y animaciones que se pueden implementar y utilizar para dar un aspecto diferente o una propiedad de movimiento diferente a un texto normal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<style>
h3 {
width: 100px;
height: 50px;
background: rgb(14, 216, 7);
transition: 1s;
}
h3:hover {
width: 120px;
height: 70px;
}
p {
width: 100px;
height: 50px;
background-color: rgb(228, 228, 228);
animation-name: example;
animation-duration: 6s;
}
@keyframes example {
from {
background-color: rgb(228, 228, 228);
}
to {
background-color: rgb(6, 175, 20);
}
}
</style>
</head>
<body>
<h3>
Geeks For Geeks
</h3>
<p>
This has Animation.
</p>
</body>
</html>
Justificación de contenido: es una de las características más útiles proporcionadas por CSS, ya que ayuda a colocar nuestros datos de una manera más estructurada. Podemos hacer espacio alrededor de los elementos mediante el uso de márgenes y rellenos y, por otro lado , la justificación del contenido ayuda si queremos colocar nuestro texto o contenido en el centro o en cualquier otra posición con numerosas propiedades.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<style>
h3 {
color: rgb(25, 146, 25);
border: 2px solid black;
border-radius: 20px;
font-size: 40px;
width: 400px;
display: flex;
justify-content: center;
}
span {
color: rgb(24, 78, 28);
font-family: cursive;
font-size: 20px;
border: 2px solid black;
margin-left: 70px;
}
p {
color: rgb(25, 146, 25);
border: 2px solid black;
border-radius: 20px;
font-size: 40px;
width: 400px;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body>
<h3>
GeeksforGeeks
</h3>
<span>
Best Platform for Learners.
</span>
<p>
This has flex-end.
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sjasandeep7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA