04-Agregar estilos CSS

Elementos Semánticos en HTML

CSS Externo
CSS Interno
CSS en Línea
Hojas de Estilo Múltiples
Orden de Cascading

CSS Externo

El CSS Externo se refiere a una hoja de estilo que se almacena en un archivo separado con extensión .css. Este archivo se enlaza al documento HTML mediante una referencia en el <head> de la página. Usar un archivo CSS externo permite centralizar y reutilizar el código de estilos en múltiples páginas, facilitando la consistencia y el mantenimiento del diseño en un sitio web.

Ejemplos Visuales

Para enlazar una hoja de estilo externa, agrega el siguiente código en el <head> del HTML:

<link rel="stylesheet" href="styles.css">

...

CSS Interno

El CSS Interno se utiliza para definir estilos directamente dentro de un documento HTML. Se coloca dentro de una etiqueta <style> en la sección <head> de la página. Este método es útil cuando se quiere aplicar estilos específicos a un solo documento sin afectar a otros.

Ejemplos Visuales

Para agregar CSS Interno, utiliza el siguiente código en el <head> del HTML:

<head>
    <style>
        body {
            background-color: #f0f0f0;
            color: #333;
        }
        h1 {
            font-size: 2rem;
        }
    </style>
</head>

CSS en Línea

El CSS en Línea se aplica directamente a un elemento HTML mediante el atributo style. Este método permite definir estilos específicos para un único elemento sin necesidad de una hoja de estilo o una sección de estilos en el encabezado. Sin embargo, su uso excesivo puede dificultar el mantenimiento del código.

Ejemplos Visuales

Para aplicar CSS en Línea, utiliza el siguiente código en un elemento HTML:

<p style="color: red; font-size: 20px;">Este texto es rojo y de 20px de tamaño.</p>

Hojas de Estilo Múltiples

Las Hojas de Estilo Múltiples permiten utilizar más de una hoja de estilo en un mismo documento HTML. Esto es útil cuando se desea aplicar diferentes estilos para distintas secciones o temas dentro de un sitio web. Al enlazar varias hojas de estilo, el orden en que se incluyen determina qué estilos se aplican, dado que los estilos posteriores pueden sobrescribir los anteriores.

Ejemplos Visuales

Para usar Hojas de Estilo Múltiples, puedes agregar el siguiente código en el <head> del HTML:

<link rel="stylesheet" href="estilo1.css">
<link rel="stylesheet" href="estilo2.css">

Orden de Cascading

El Orden de Cascading se refiere a cómo los navegadores determinan qué estilos aplicar a un elemento HTML cuando hay múltiples reglas CSS. Los estilos se aplican según un sistema de prioridades que sigue este orden:

Estilo en línea: Estilos definidos directamente en el elemento HTML (por ejemplo, en el atributo style).
Hojas de estilo internas y externas: Estilos definidos en la sección <head> de un documento o en archivos CSS vinculados.
Navegador por defecto: Estilos que el navegador aplica automáticamente si no hay otras reglas especificadas.

Esto significa que un estilo en línea tiene la máxima prioridad y anulará cualquier estilo de las hojas de estilo internas, externas o del navegador por defecto.

Ejemplos Visuales

Un ejemplo de cómo funciona el Orden de Cascading es el siguiente:

<style>
    p {
        color: blue; /* Regla 1 */
    }
    .highlight {
        color: red; /* Regla 2 */
    }
    #unique {
        color: green !important; /* Regla 3 - más específica */
    }
</style>

<p class="highlight" id="unique">Este texto será verde por el !important.</p>

Ir al índice

Tags:

CSS Curso CSS

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

04-Agregar estilos CSS

Elementos Semánticos en HTML

CSS Externo

Ejemplos Visuales

CSS Interno

Ejemplos Visuales

CSS en Línea

Ejemplos Visuales

Hojas de Estilo Múltiples

Ejemplos Visuales

Orden de Cascading

Ejemplos Visuales

Posted by: Jorge Catalao

Publicar un comentario

0 Comentarios

Translate

Subscribe Us

Ad Space

Popular Posts

Formulario Inicio de session (como hacerlo)

Diagrama del CO2

Formulario login Inicio de session en html y bootstrap

Labels

Tags

Popular Posts

Formulario Inicio de session (como hacerlo)

Diagrama del CO2

Formulario login Inicio de session en html y bootstrap

Labels

Menu Footer Widget

04-Agregar estilos CSS

Elementos Semánticos en HTML

CSS Externo

Ejemplos Visuales

CSS Interno

Ejemplos Visuales

CSS en Línea

Ejemplos Visuales

Hojas de Estilo Múltiples

Ejemplos Visuales

Orden de Cascading

Ejemplos Visuales

Posted by: Jorge Catalao

Entradas que pueden interesarte

Publicar un comentario

0 Comentarios

Translate

Social Plugin

Subscribe Us

Ad Space

Popular Posts

Formulario Inicio de session (como hacerlo)

Diagrama del CO2

Formulario login Inicio de session en html y bootstrap

Labels

Tags

Popular Posts

Formulario Inicio de session (como hacerlo)

Diagrama del CO2

Formulario login Inicio de session en html y bootstrap

Labels

Menu Footer Widget