La hoja de estilo en cascada (CSS) se utiliza para establecer el estilo en las páginas web que contienen elementos HTML. Establece el color de fondo, el tamaño de fuente, la familia de fuentes, el color, etc., propiedad de los elementos en una página web.
Hay tres tipos de CSS que se dan a continuación:
- CSS en línea
- CSS interno o incrustado
- CSS externo
CSS en línea: el CSS en línea contiene la propiedad CSS en la sección del cuerpo adjunta con el elemento que se conoce como CSS en línea. Este tipo de estilo se especifica dentro de una etiqueta HTML utilizando el atributo de estilo.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;"> GeeksForGeeks </p> </body> </html>
Producción:
CSS interno o incrustado: esto se puede usar cuando un solo documento HTML debe tener un estilo único. El conjunto de reglas CSS debe estar dentro del archivo HTML en la sección principal, es decir, el CSS está incrustado dentro del archivo HTML.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
CSS externo: el CSS externo contiene un archivo CSS separado que contiene solo propiedades de estilo con la ayuda de atributos de etiqueta (por ejemplo, clase, identificación, encabezado, etc.). Propiedad CSS escrita en un archivo separado con extensión .css y debe vincularse al documento HTML mediante la etiqueta de enlace . Esto significa que para cada elemento, el estilo se puede establecer solo una vez y se aplicará a todas las páginas web.
Ejemplo: el archivo que se proporciona a continuación contiene propiedades CSS. Este archivo se guarda con la extensión .css. Por ejemplo: geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
A continuación se muestra el archivo HTML que utiliza la hoja de estilo externa creada
- La etiqueta de enlace se utiliza para vincular la hoja de estilo externa con la página web html.
- El atributo href se utiliza para especificar la ubicación del archivo de hoja de estilo externo.
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="geeks.css"/> </head> <body> <div class = "main"> <div class ="GFG">GeeksForGeeks</div> <div id ="geeks"> A computer science portal for geeks </div> </div> </body> </html>
Producción:
Propiedades de CSS: CSS en línea tiene la prioridad más alta, luego viene Internal/Embedded seguido de External CSS que tiene la menor prioridad. Se pueden definir varias hojas de estilo en una página. Si para una etiqueta HTML, los estilos se definen en varias hojas de estilo, se seguirá el siguiente orden.
- Dado que Inline tiene la prioridad más alta, los estilos Inline anulan cualquier estilo definido en las hojas de estilo internas y externas.
- Interno o incrustado ocupa el segundo lugar en la lista de prioridades y anula los estilos en la hoja de estilo externa.
- Las hojas de estilo externas tienen la menor prioridad. Si no hay estilos definidos en la hoja de estilo en línea o interna, se aplican las reglas de la hoja de estilo externa para las etiquetas HTML.
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .