Clase 04 - Introducción A CSS
Clase 04 - Introducción A CSS
Clase 04 - Introducción A CSS
Front End
Js
CLASE 4
Clase N° 4: Introducción a CSS
Temario:
Ejemplo:
Esta metodología la utilizaremos cuando queramos aplicar estilos sólo a una página
específica. Colocamos el CSS dentro de la etiqueta <style> en el <head> del documento.
Ejemplo:
<head>
<style>
h1 {
color: blue;
background-color: yellow;
</style>
</head>
2.3 CSS externo
<head>
</head>
3. Selectores básicos
En CSS, los selectores nos
permiten aplicar estilos a los
elementos HTML que
queramos, eligiendo
específicamente a cuáles de
ellos afectaremos con los
estilos especificados. Hay
varias formas de asignar
estilos, a continuación
explicaremos los más básicos.
3.1 Selector universal
Este selector (*) afecta a todos los elementos de la página. Es útil para aplicar reglas
generales.
Ejemplo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
Aplica estilos a todos los elementos de un tipo, por ejemplo, a todos los párrafos <p>.
Ejemplo:
p {
color: black;
font-size: 16px;
}
3.3 Selector de clase
Si querés aplicar un estilo a varios elementos pero no a todos podés usar clases. Definimos
una clase con un punto (.) y la aplicamos a los elementos que queramos.
Ejemplo:
.highlight {
background-color: yellow;
3.4 Selector de ID
Para un estilo único, usamos un ID. Solo puede aplicarse a un elemento específico. Lo
definimos con un numeral (#).
Ejemplo:
#main-title {
font-size: 24px;
color: green;
}
4. Especificidad, herencia, cascada y orden de las reglas en
CSS
A veces, varios estilos pueden estar aplicando al mismo elemento. En esos casos, el CSS
utiliza un sistema de especificidad y cascada para decidir cuál es la indicación de mayor
jerarquía que se aplicará sobre otras reglas que también estén operando.
4.1 Especificidad
Las reglas con mayor especificidad tienen más peso. Un estilo en línea (dentro de una
etiqueta) tendrá mayor prioridad que una clase o un ID.
4.2 Herencia
4.3 Cascada
Cuando varias reglas tienen la misma especificidad, se aplica la que esté más abajo en el
archivo CSS.
p {
color: blue;
p {
El atributo color en CSS permite cambiar el color del texto de los elementos HTML. Hay
varias formas de especificar colores en CSS, y es importante entender cómo funcionan. Las
formas más comunes son:
Nombres de colores: CSS reconoce muchos nombres de colores, como red, blue, black,
white, etc. Este método es útil cuando quieres usar un color estándar.
Ejemplo:
p {
color: red;
h1 {
RGB y RGBA: Con rgb() se pueden definir colores usando valores numéricos de 0 a 255
para los canales rojo, verde y azul. rgba() añade un valor de opacidad que va de 0
(totalmente transparente) a 1 (totalmente opaco).
Ejemplo:
h2 {
.semi-transparente {
5.2 Tamaño
El tamaño de los elementos HTML, como textos o bloques, se define en CSS mediante
diferentes propiedades como font-size (para el texto) o width y height (para el ancho y la
altura de los contenedores).
font-size: Controla el tamaño del texto. El valor puede definirse en px, em, rem, o %.
Ejemplo:
p {
width y height: Definen el ancho y la altura de los elementos. También se pueden usar
diferentes unidades como px, %, vw, y vh.
Ejemplo:
.contenedor {
Las unidades de medida son esenciales para definir tamaños en CSS. Hay varios tipos de
unidades que podemos usar según la situación:
Unidades absolutas: Son fijas y no cambian según el tamaño del viewport. Ejemplos: px
(píxeles), cm (centímetros), mm (milímetros), in (pulgadas), pt (puntos), pc (picas).
Unidades relativas: Dependen del entorno y son más flexibles, adaptándose a diferentes
tamaños de pantalla. Ejemplos:
em: Relativa al tamaño de la fuente del elemento padre. Si el padre tiene font-size: 16px,
1em es 16px.
body {
font-size: 16px;
h1 {
Unidades flexibles (vw y vh): Estas unidades son proporcionales al tamaño del viewport.
Ejemplo:
.full-width {
}
Ejercicio práctico #1:
Incorporar CSS externo
Objetivo: Crear un archivo styles.css, importarlo en tu HTML, y aplicar estilos al
header y footer.
Paso a paso:
<header>
</header>
<footer>
</footer>
Paso a paso:
<ul class="nav-list">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>