Para agregar estilos CSS a una página web, hay tres formas principales de hacerlo:
- Estilos en línea: Puede agregar estilos en línea utilizando el atributo "style" en un elemento HTML. Esto se aplica solo a ese elemento específico y anula cualquier estilo definido en la hoja de estilos externa o interna.
<p style="color: red; font-size: 18px;">Este texto es de color rojo y tiene un tamaño de fuente de 18px.</p><!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>- Hoja de estilos interna: Puede agregar estilos en una hoja de estilos interna dentro de la sección head del documento HTML. Los estilos definidos aquí se aplican a todos los elementos en la página que coinciden con los selectores.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>- Hoja de estilos externa: Puede agregar estilos en una hoja de estilos externa, que se vincula al documento HTML utilizando la etiqueta link en la sección head. Los estilos definidos en la hoja de estilos externa se aplican a todos los elementos en la página que coinciden con los selectores.
<head>
<link rel="stylesheet" href="styles.css">
</head>El código anterior vincula la hoja de estilos externa llamada "styles.css". A continuación, se muestra un ejemplo de cómo se pueden definir los estilos en el archivo CSS externo:
p {
color: green;
font-size: 24px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Para agregar múltiples hojas de estilos externas, simplemente agregue más etiquetas link en la sección head del documento HTML, cada una con el atributo href que apunta a una hoja de estilos externa diferente. Por ejemplo:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="print.css" media="print">
</head>El ejemplo anterior muestra dos hojas de estilos externas. La primera es "styles.css", que se aplica a todos los dispositivos. La segunda es "print.css", que se aplica solo cuando se imprime la página (debido al atributo media="print").
El orden de cascada sigue las siguientes reglas, de mayor a menor prioridad
1. Estilos importantes: Cualquier estilo marcado como importante con la propiedad "important" tiene la máxima prioridad y anula cualquier otro estilo aplicado al elemento.
p {
color: red !important;
}2. Estilos en línea: Cualquier estilo definido en línea con la propiedad "style" en un elemento HTML tiene prioridad sobre los estilos definidos en hojas de estilos internas o externas.
<p style="color: blue;">Este texto es azul debido al estilo en línea.</p>3. Estilos específicos del elemento: Los estilos definidos para un elemento específico tienen prioridad sobre los estilos definidos para un tipo de elemento o una clase.
#miParrafo {
color: green;
}4. Estilos de clases y atributos: Los estilos definidos para una clase o atributo específico tienen prioridad sobre los estilos definidos para un tipo de elemento.
.miClase {
font-size: 18px;
}5. Estilos de tipo de elemento: Los estilos definidos para un tipo de elemento (p, h1, ul, etc.) tienen la menor prioridad y se aplican solo si no hay estilos más específicos definidos para el elemento.
p {
font-family: Arial, sans-serif;
}Es importante tener en cuenta que los estilos se aplican en orden de cascada, por lo que si hay múltiples estilos definidos para un elemento, el navegador utilizará el estilo con mayor prioridad. También es importante tener en cuenta que las reglas de especificidad y ubicación del estilo pueden interactuar de maneras complicadas, por lo que se recomienda seguir las mejores prácticas de CSS para evitar conflictos y errores.
