Scribd
Cargar
4 vistas

Presentación - Introducción a CSS (1)

El documento presenta una introducción a CSS, explicando su función para dar estilo a los documentos HTML mediante selectores por etiqueta, clase e id. Se describen las formas de añadir CSS y se detalla la jerarquía de estilos, así como la importancia de la cascada en la aplicación de reglas. Además, se incluyen ejercicios prácticos para aplicar los conceptos aprendidos en la creación de estilos para elementos HTML.

Cargado por

seramar3333
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
4 vistas

Presentación - Introducción a CSS (1)

El documento presenta una introducción a CSS, explicando su función para dar estilo a los documentos HTML mediante selectores por etiqueta, clase e id. Se describen las formas de añadir CSS y se detalla la jerarquía de estilos, así como la importancia de la cascada en la aplicación de reglas. Además, se incluyen ejercicios prácticos para aplicar los conceptos aprendidos en la creación de estilos para elementos HTML.

Cargado por

seramar3333
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 26

HTML y CSS

Introducción a CSS
Estructurar el contenido de ● Unidad 1: HTML y CSS Te encuentras aquí

un documento con HTML y ● Unidad 2: Bootstrap


utilizar componentes CSS
para definir el aspecto visual ● Unidad 3: JavaScript
de la página web.
● Unidad 4: Terminal, Git, GitHub y
GitHub Pages
¿Qué aprenderás en esta sesión?
● Emplear adecuadamente los selectores para definir
reglas por id, clase y/o etiqueta, en los archivos de
estilo CSS.
/* ¿Qué es CSS? */
¿Qué es CSS?

● CSS sirve para darle apariencia al


contenido, colores, fuentes,
tipografías, etc.

● Significa "Cascading Style Sheets",


que traducido es "hojas de estilo en
cascada''.
/* Formas de añadir CSS */
Formas de añadir CSS

1. En línea en el HTML, añadiéndole el atributo style a las etiquetas.

2. Añadiendo la etiqueta <style> en el head.

3. A través de un archivo de tipo CSS, llamado desde el head.

<link rel="stylesheet" href="assets/css/style.css">

La mejor práctica es hacerlo a través de un archivo externo al HTML de tipo .css


/* Introducción a CSS */
Introducción a CSS
Sintaxis

● Selector de etiqueta (body).

● Llaves curvas ({ ... }) .

● Una declaración
(background: red;).

Dentro del bloque de declaración puede haber más de una declaración.


Estas se separan por un punto y coma.
Introducción a CSS
Tipos de selectores

Selector por etiqueta ● Ejemplo:


● Selecciona el elemento según su
nombre de etiqueta. <h1 class="verde">Descubre lo
último en tecnología bebiendo
Selector por clase café</h1>
● Selecciona todos los elementos con el
<h4 class="verde">Rafaela
mismo valor de atributo de clase.
Valdéz</h4>

<h2 class="verde">Eventos
anteriores</h2>.
Introducción a CSS
Ejemplos de selector por etiqueta y clase

● Para seleccionar una clase en ● Las etiquetas pueden tener más de


específico debemos escribir un punto una clase, para esto, solo hay que
(.) seguido por el valor de la clase: separarlas por espacio:

.verde { <h1 class="verde


/* Soy un comentario de CSS, no centrado">Descubre lo último en
confundirse con comentarios de HTML. tecnología bebiendo café</h1>
*/
color: green;
}
Introducción a CSS
Selector por id

● Utiliza el valor del atributo id de una


etiqueta HTML.
<h2 id="subtitulo">Charlas, eventos y
● El valor id de un elemento debe ser simposios sobre tecnología</h2>
único, no puede repetirse en ninguna
otra etiqueta dentro de la página.
Además, cada etiqueta puede tener
como máximo un solo id:

Si quieres aprender más sobre los selectores te


recomendamos el juego CSS Diner.
/* La cascada de CSS */
La cascada de CSS
Reglas

● En CSS existen dos reglas básicas, las cuales conoceremos a continuación:

Regla N°2
Regla N°1
● Lo específico manda por sobre lo
● La última regla manda.
general.
body { div {
background-color: color: red;
grey; }
padding: 0;
margin: 0; div h2 {
background-color: color: green;
black; }
}
La cascada de CSS
Jerarquía
p {
1. Etiqueta color: red
● CSS decreta una jerarquía cuando a un
}
mismo elemento se le asigna la
misma propiedad en declaraciones
diferentes. .text-red {
2. Selector por clase color: red
}
● En la lista de acontinuación se
muestra esta jerarquía según sus
pesos de forma ascendente: #titulo {
3. Selector por id color: red
}
La cascada de CSS
Jerarquía

4. Estilo en línea

<h1 style="color: red">Desafío Latam</h1>

5. Sentencia !important

Al momento de definir el valor de una propiedad es posible agregarle la sentencia !important


al final, logrando con eso que la declaración de ese estilo predomine sobre cualquiera de los
niveles jerárquicos anteriores.
Demostración
“Chi chi chi, le le le”
Ejercicio guiado
Chi chi chi, le le le

● A continuación, vamos a poner en práctica lo aprendido aplicando estilos a los


siguientes elementos HTML.

<div>
<h5>Chi chi chi</h5>
<h4>Le le le</h4>
<h3>¡Viva Chile!</h3>
</div>
Ejercicio guiado
Paso 1

● Asignemos un id “wrapper” al div que envuelve los encabezados, posteriormente con


CSS definamos un fondo gris oscuro.

<div id="wrapper"> ● Abre tu navegador y renderiza tu HTML, deberás


<h5>Chi chi chi</h5> observar lo que se muestra en la siguiente
<h4>Le le le</h4>
imagen.
<h3>¡Viva Chile!</h3>
</div>

#wrapper {
background: darkgray;
}
Ejercicio guiado
Paso 2

● Ahora asignamos una clase text-blue al h5 que aplique una propiedad color con el
siguiente hexadecimal: #0037a1.

<div id="wrapper">
<h5 class="text-blue">Chi chi chi</h5>
<h4>Le le le</h4>
<h3>¡Viva Chile!</h3>
</div>

.text-blue {
color: #0037a1;
}
Ejercicio guiado
Paso 3

● Ahora asignamos una clase text-red al h4 que aplique una propiedad color con el
siguiente hexadecimal: #d02a1e

<div id="wrapper">
<h5 class="text-blue">Chi chi chi</h5>
<h4 class="text-red">Le le le</h4>
<h3>¡Viva Chile!</h3>
</div>

.text-red {
color: #d02a1e;
}
Ejercicio guiado
Paso 4

● Finalmente asignamos una clase text-white al h3 que aplique una propiedad color con
el valor white.
● Para este punto, tu página web
<div id="wrapper"> deberá verse como se aprecia en la
<h5 class="text-blue">Chi chi chi</h5>
<h4 class="text-red">Le le le</h4> siguiente imagen.
<h3 class="text-white">¡Viva Chile!</h3>
</div>

.text-white {
color: white;
}
¿Para qué sirven los
selectores por etiqueta, por
clase y por id?
Resumen

● CSS sirve para darle apariencia al contenido, es decir, todo el estilo y apariencia visual
de la página; colores, fuentes, tipografías, etc.

● El selector por etiqueta selecciona el elemento según su nombre de etiqueta.

● El selector por clase selecciona todos los elementos con el mismo valor del atributo de
clase.

● El selector por id utiliza el valor del atributo id de una etiqueta HTML, para seleccionar
un elemento específico.
Próxima sesión…
● Implementar estilos CSS: texto, color, fondo,
alineación, imágenes y el modelo de cajas, para la
definición de aspectos visuales de una interfaz web.

También podría gustarte