- Lenguaje de hojas de estilo en cascada que permite modificar la presentación en el navegador de un documento escrito en formato HTML.
- La sintaxis principal del lenguaje CSS se basa en el uso de reglas de estilo, las cuales permiten seleccionar un elemento HTML para posteriormente modificar su presentación.
El siguiente es un ejemplo de una regla de estilo aplicada a un elemento HTML tipo <p>.
p {
color: red;
}
- p - Selector.
- color - Propiedad.
- red - Valor
Cada par propiedad-valor se debe separar dentro de la regla de estilo mediante el carácter ;.
CSS y HTML
Existen 3 formas de vincular código CSS con los elementos definidos en la estructura de un documento HTML.
-
Interno - Se incluye la regla de estilo directamente dentro del elemento HTML, haciendo uso del atributo
style.
<p style="color: red;">
-
Embebido - Dentro de las etiquetas
<head></head>del documento HTML, se incluye un elemento<style>cuyo contenido podrá incluir reglas de estilo CSS.
<head>
<style>
p {
color: red;
}
</style>
</head>
- Externo - Es la forma más común y recomendada de vincular código CSS y HTML, ya que permite mediante un documento con extensión .css, el cual contendrá únicamente código CSS, asociarlo a la estructura del sitio web de la siguiente manera.
<head>
<link rel="stylesheet" href="/main.css">
</head>
Selector de clase e id
Los atributos class e id permiten seleccionar un elemento HTML para posteriormente estilizarlo de la siguiente manera:
<h1 class="estilo-1">Encabezado</h1>
<p class="estilo-1">Hola Mundo</p>
.estilo-1 {
color: red;
}
Una misma clase puede ser asociada a multiples elementos HTML, de forma tal como en el ejemplo anterior, al tener ambos elementos el mismo valor de clase, el resultado será la aplicación de la misma regla de estilo.
La selección de elementos mediante id permite únicamente seleccionar un elemento a la vez, con lo cual multiples elementos no deben compartir el mismo valor de id.
<p id="estilo-2">
#estilo-2 {
color: green;
}
Propiedades CSS
Las propiedades CSS son las encargadas de definir que estilo será el aplicado al elemento seleccionado, permitiendo modificar atributos tales como el color, tamaño, posicionamiento, etc.
Estilizar texto
-
font-family- Modifica el tipo de fuente. -
font-size- Modifica el tamaño. -
font-style- Modifica el aspecto. -
font-weight- Modifica el peso de los caracteres. -
color- Modifica el color.
Modelo de caja
La estructura HTML posiciona cada uno de sus elementos como si fueran cajas apiladas una sobre la otra.
Cada elemento contiene una serie de propiedades que pueden ser modificadas haciendo uso de CSS.
-
width- Ancho del elemento. -
height- Altura del elemento. -
padding- Cantidad de espacio existente entre el contenido del elemento y su borde. -
border- Linea que rodea cada uno de los 4 lados del elemento. -
margin- Cantidad de espacio existente entre cada uno de los elementos.
Top comments (0)