in

Tipos de CSS (hoja de estilo en cascada)

gfg 200x200 min

La hoja de estilo en cascada (CSS) se utiliza 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 propiedad de los elementos de una página web.
Hay tres tipos de CSS que se detallan a continuación:

  • CSS en línea
  • CSS interno o incrustado
  • CSS externo

CSS en línea: 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 mediante 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:

ejemplo de propiedad CSS en línea

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 incrustado

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, id, encabezado,… etc.). Propiedad CSS escrita en un archivo separado con extensión .css y debe estar vinculada al documento HTML usando Enlace etiqueta. Esto significa que para cada elemento, el estilo se puede configurar solo una vez y se aplicará en todas las páginas web.
Ejemplo: El archivo que se muestra a continuación contiene la propiedad 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

  • Enlace La etiqueta se utiliza para vincular la hoja de estilo externa con la página web html.
  • href El atributo 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:

CSS externo

Propiedades de CSS: CSS en línea tiene la prioridad más alta, luego viene Internal / Embedded seguido de CSS externo 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.

  • Como Inline tiene la máxima prioridad, los estilos Inline anulan los estilos definidos en las hojas de estilo internas y externas.
  • Internal o Embedded 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 ni en línea ni en la hoja de estilo 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

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML.

CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web al diseñar sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este Tutorial de CSS y Ejemplos de CSS.

¡Atención lector! No dejes de aprender ahora. Obtenga todos los conceptos HTML importantes con el Diseño web para principiantes | HTML curso.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

apple touch icon@2

servidor web: ¿podemos decir que node.js es un servidor web?

Creacionismo vs Evolución – Diferencia y Comparación