La hoja de estilo en cascada (CSS) se usa para establecer el estilo en páginas web que contienen elementos HTML. Establece el color de fondo, el tamaño de la fuente, la familia de la fuente, el color, etc. de los elementos en las páginas web.
Hay tres formas de implementar o tres tipos de CSS:
- CSS en línea
- CSS interno o incrustado
- CSS externo
CSS en línea:
CSS en línea contiene las reglas CSS en la sección del cuerpo del elemento o de la etiqueta. Este tipo de estilo se especifica dentro de una etiqueta HTML usando un atributo de estilo.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
EstradaWebGroup</p>
</body>
</html>
CSS interno o incrustado:
Se usa cuando un único documento HTML debe tener un estilo único. El conjunto de reglas de CSS debe estar dentro del archivo HTML en la sección principal, es decir, el CSS está incrustado dentro del archivo HTML.
<!DOCTYPE html>
<html>
<head>
<title>CSS interno o inrcustado</title>
<style>
.main {
text-align:center;
}
.ewg {
color:#009900;
font-size:50px;
font-weight:bold;
}
.estradawebgroup {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="ewg">Estrada Web Group</div>
<div class ="estradawebgroup">Aprende a programar con Estrada Web Group</p>
</div>
</body>
</html>
CSS externo:
El CSS externo contiene un archivo CSS separado que solo contiene propiedades de estilo con la ayuda de atributos de etiqueta (por ejemplo, clase, id, encabezado, etc.). La propiedad CSS está escrita en un archivo separado con la extensión .css y se debe vincular al documento HTML mediante la etiqueta de enlace (link).
Ejemplo: El archivo siguiente contiene la propiedad CSS. Este archivo se guarda con la extensión .css. Por ejemplo: estradawebgroup.css
body {
background-color:# EE365D;
}
.main {
text-align:center;
}
.ewg {
color:#ffffff;
font-size:50px;
font-weight:bold;
}
#estradawebgroup {
font-style:bold;
font-size:20px;
}
A continuación, se muestra el archivo HTML que utiliza la hoja de estilos externa creada.
- La etiqueta link se utiliza para vincular la hoja de estilo externa con la página web html.
- El atributo href se usa para especificar la ubicación del archivo de la hoja de estilo externa.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=" estradawebgroup.css"/>
</head>
<body>
<div class = "main">
<div class ="ewg">Estrada Web Group</div>
<div id ="estradawebgroup">Aprende a programar con Estrada Web Group</p>
</div>
</body>
</html>
Prioridad CSS:
CSS en línea tiene la prioridad más alta, luego viene interno / incrustado seguido de CSS externo que tiene la menor prioridad. Se pueden definir múltiples hojas de estilo en una página. Si una etiqueta HTML tiene los tres tipos de estilo en línea, incrustado y externo, se seguirá el orden siguiente.
- Como en línea tiene la prioridad más alta, todos los estilos que se definen en las hojas de estilo internas y externas se anulan por los estilos en línea.
- Interno o Incrustado ocupa el segundo lugar en la lista de prioridades y anula los estilos en la hoja de estilos externa.
- Las hojas de estilo externas tienen la menor prioridad. Si no hay estilos definidos en la hoja de estilo interna o en línea, entonces se aplican reglas de hoja de estilo externas a las etiquetas HTML.
