Saltar la navegación

Hojas de estilo CSS

Alex y CSS

Estilos en un documento HTML

Es un lenguaje utilizado para mejorar la presentación de un documento HTML.

Está compuesto por un selector, una propiedad: un valor.

Regla CSS

  • Selector: h1

  • Declaración: { color: black; }

    • Propiedad: color

    • Valor: black

Estructura general:

Selector { Propiedad: Valor; }

Ejemplo concreto:

h1 { color: black; }

¿Cómo uso CSS?

Existen tres formas distintas de poder dar estilo a un documento HTML, lo que la primera de ella que veremos no es recomendada.


Opción 1: Añadiendo estilo a la etiqueta propiamente dicha

<p style=”font-family: tahoma; color:#0000ff;”>

Opción 2: Añadiendo los estilos en el encabezado.

<head>
<title> ...... </title>
<style type = “text/css”>
body{background:#112233;}
h1{color:#556677;text-align:center;}
p{font-family: arial;color:#00ff00;font-size:24px}
</style>
</head>

Opción 3: Añadiendo los estilos en un archivo de estilos (.css)

  • Varios documentos HTML, pueden compartir una misma hoja de
    estilo, reduciendo así la generación y complejidad del código.
  • El archivo debe ser guardado con la extensión .CSS

Entonces

  1. Cuando quieras hacer a una etiqueta en general, en el selector pondrás el nombre de esa etiqueta.
  2. Cuando quieras hacer el cambio en las etiquetas con la misma clase, usarás un punto antes del selector.
  3. Pero cuando quieras usar solo una etiqueta, usarás su id y pondrás un numeral antes del selector en CSS.


Tomando como ejemplo las siguientes etiquetas:

  1. <p> Hola </p>
  2. <p class="parrafos"> ¿como estás? </p>
  3. <p class="parrafos" id="miParrafo"> Adiós </p>

Serán afectadas por el siguiente codigo CSS


p {

color : red;

}

.parrafos {

background-color: green; 

}

#miParrafo {

text-decoration: underline;

}

Con esto:

  • la etiqueta 1, tendrá el texto rojo,
  • la 2, tendrá texto rojo y fondo verde y
  • la 3, texto rojo, fondo verde y subrayado.

Creado con eXeLearning (Ventana nueva)