CSS Clase 3

CSS
Introducción al Desarrollo Web Full-Stack
Unidad I
Contenidos de la clase 3
- Introducción a CSS
- Selectores
- Reglas
Proxima clase 4
- Propiedades básicas
- Flexbox
- Grid
Repasemos lo visto
Repaso de la clase anterior.

¿Qué quiere decir CSS?🤔
Clase 3
CSS3
Cascading Style Sheets - Hoja de estilo en cascada
CSS es un lenguaje formal que se usa para definir los estilos visuales de
presentación de un documento estructurado escrito en HTML.
Para utilizarlo primero debemos tener creado nuestro documento HTML.
HTML fue desarrollado considerando que el diseño está a cargo de CSS.
Entonces, siempre que trabajemos en desarrollo web, vamos a usar

ambos lenguajes.
Bene cios de CSS
HTML y CSS tienen definida exactamente sus funciones.
- HTML organiza el contenido.

- CSS aplica el estilo de cómo se vera ese contenido.
Esto nos facilita la comprensión de cada uno de los lenguajes.

fi
Bene cios de CSS
Se pueden definir los estilos en un documento .CSS, separado de los
documentos HTML del sitio.
Esto nos permite definir globalmente los estilos del sitio y facilita la
actualización de los mismos.
También, podemos tener distintas hojas de estilo, dependiendo los

requerimientos de nuestro proyecto web.
Ejemplo: para cambiar el diseño de la pagina, para aumentar la accesibilidad

porque el usuario tiene problemas de visión, etc.
fi
Bene cios de CSS
Podemos tener distintas hojas de estilos (varios documentos CSS)
Si tenemos varias hojas de estilos podemos seleccionar cuando usar cada

una. Puede ser:
- Para variar el diseño de la página.
- Para que el usuario cambie los estilos para aumenta la accesibilidad
porque tiene problemas de visión.
- Según el dispositivo que estemos utilizando.
fi
¿Por qué en cascada? 📝
La información de estilos se puede incluir de varias formas:
1. Puede especificarse para cada elemento HTML, mediante el atributo

style.
2. Puede declararse en el <head> de un documento HTML con la etiqueta
<style>
3. En un documento externo, por ejemplo: estilos.css
4. O incluso en varios documentos externos.
Orden de cascada
Cuando definimos estilos de todas las formas, el navegador los interpreta según el orden
de cascada. El último estilo leído es el que va a quedar, sobreescribiendo a los anteriores.
Orden de cascada:
1. Hoja de estilos del navegador (defecto)
2. Hojas de estilo externa (declarada antes de la etiqueta <style>)
3. Estilos definidos en el <head> del documento HTML con la etiqueta <style>
4. Estilos definidos en un tag HTML con el atributo style.
Importante: La etiqueta <style> no es lo mismo que el atributo style.

¿Cómo se escribe en CSS?📝
Sintaxis
Cuando escribimos en código CSS tenemos que respetar la sintaxis, que difiere
a la de HTML, Básicamente son dos lenguajes diferentes. Pero dialogan entre si.
La forma básica de definir un estilo en CSS tiene 3 partes:

selector {propiedad: valor;}
Selector identifica al elemento que va ser modificado por el estilo
Propiedad es el atributo de ese elemento que queremos cambiar
Valor es el valor al que queremos cambiar la propiedad
Sintaxis
Ejemplos:
body { background-color: green; }
Cambiar el color del fondo de toda la página a verde.
p { color: blue; background-color: gray; }
Cambiar el color del texto de todos los párrafos a azul y el color del fondo de todos los
párrafos a gris.
Cuando definimos más d una propiedad es obligatorio separar con punto y coma (;).
Sintaxis
Para leer el código de forma más fácil, lo escribimos así:
p{
color: white;
background-color: black;
font-family: Arial;
}
En este ejemplo estamos definiendo que todos los párrafos tengan el
texto en blanco, el fondo en negro y usen la tipografía Arial.
Comentarios en CSS
Podemos agregar comentarios para dejar mensajes o para comentar parte del cógido y que quede
inhabilitado. Los comentarios en CSS se empiezan con /* y terminan con */.
/* Este es un comentario en CSS */

body{
background-color: beige;
}
/* Este es un comentario que inhabilita una parte del codigo.
p{
color: white;
}
*/
Selectores en CSS 📍
Tipos de selectores
Como pudimos notar, el selector es una de las tres partes de la definición
de un estilo. Si no hay selector, no hay estilo.
Existen tres tipos de selectores simples:
1. Selector de etiquetas HTML (element selector)

2. Selector de identificado (id selector)
3. Selectores de clase (class selector)
Selector de etiquetas
Los selectores de etiquetas se utilizan escribiendo el nombre de la
etiqueta HTML, a la que queremos aplicar el estilo.
Para definir un selector de etiqueta, usaremos el nombre de la etiqueta

como selector. No hace falta aplicarlo en el HTML. Las etiquetas heredan
automáticamente las propiedades que definimos.
body {
}

Selector de identi cador

Los selectores de identificador se usan para aplicar estilos únicamente a las
etiquetas identificadas con un nombre definido.
Para definir un selector de identificador, usamos el hashtag # antes del nombre de

identificación. Luego debemos aplicarlo en el documento HTML usando el mismo
nombre como valor de un atributo id.
CSS HTML
#texto {
background-color: black; <p id="texto"> Diseñando </p>
}

fi
Selector de clase
Los selectores de clase se usan para aplicar estilos en forma repetitiva, aplicándolos
en todas las etiquetas que los llamen por un nombre previamente definido.
Para definir un selector de clase, usamos el punto . antes del nombre de

identificación. Luego debemos aplicarlo en el documento HTML usando el mismo
nombre como valor de un atributo class.
CSS HTML
.texto { <h1 class="texto"> Diseñando </h1>
background-color: black; <p class="texto"> en CSS </p>
}

Selector universal
Se utiliza para seleccionar todos los elementos de la página. Se escribe
con el símbolo asterisco (•).
* {
color: yellow;
}
Selector agrupados
Podemos agrupar selectores si los separamos usando una coma (,). Esto quiere
decir que vamos a definir las mismas propiedades y valores para varios selectores.
Sin agrupar: Agrupados:

h1 {
background-color: black; h1, h2, h3 {
} background-color: black;
h2 { }
}
h3 {
}
Aplicación de estilos 🖌
Aplicación de estilos
La aplicación de estilos hace referencia a la forma en que HTML y CSS
funcionan juntos para que podamos visualizar los estilos definidos.
Exisen 3 maneras de aplicación (según el orden de cascada):

1. Estilos definidos en una hoja de estilos externa, por ejemplo: estilo.css
(Recomendable).
2. Estilos definidos en el <head> con la etiqueta <style>
3. Estilos definidos en una etiqueta HTML mediante el atributo style.
Práctica: 🔖
Primeros estilos

Práctica:
Elegir un tema de interés (por ejemplo: mi libro favorito, mis mascotas, etc).
1. Crear un documento html.
2. Agregar contenido en la página utilizando las distintas etiquetas para organizarlo.
3. De inir estilos en el head del documento usando la etiqueta <style>
a) Tres estilos usando selectores de etiqueta.
b) Tres estilos usando selectores de identi icador.
c) Tres estilos usando selectores de clase (aplicar cada uno de los estilos de
selectores de clase a varios elementos de la página).

f

Práctica: 📨
Estilos de inidos de forma externa
f

Práctica:
1. Duplicar el documento html, anteriormente creado.
2. Crear un documento .css en la misma carpeta del documento .html
3. Borrar los estilos del head del documento html y colocarlos en el
documento .css
4. Linkear el documento css.
La página se deberá visualizar igual a la practica anterior.

Ahora estarán aplicando los estilos de la manera recomendada.

Consultas 🤚
Pausa ⏳
Consideración
Propiedades CSS 📐
Propiedades CSS
En CSS hay múltiples propiedades para definir:
- Los fondos
- Los bordes
- Los bloques
- El texto y la tipografía
- Las listas
-El posicionamiento
- Etcétera…
Propiedades de fondos
background-color
background-image
background-repeat
background-attachment
background-position
background
Referencia completa: https://www.w3schools.com/css/css_background.asp

Propiedades de texto
color
text-align
text-decoration
text-transform
… entre otras
Referencia completa: https://www.w3schools.com/css/css_text.asp

Propiedades de la tipografía
font-family
font-style
font-weight
font-size
font
Referencia completa:https://www.w3schools.com/css/css_font.asp
Google Font
Para usar tipografías por fuera de las estándar, es conveniente
hacerlo lineando a un repositorio online como Google Fonts:
https://fonts.google.com/
Se debe linear la tipografía elegida en el documento html y

luego podremos utilizarla en nuestros estilos css.
Propiedades de dimensiones
heigh
width
max-height
max-width
min-height
min-width
Referencia completa:https://www.w3schools.com/css/css_dimension.asp
Propiedades de márgenes
margin-top
margin-right
margin-bottom
margin-left
margin
Los márgenes determinan el espacio alrededor de los eventos.
Referencia completa:https://www.w3schools.com/css/css_margin.asp
Propiedades de padding
padding-top
padding-right
padding-bottom
padding-left
padding
El padding determina el espacio al interior de los bordes de un elemento. Por ejemplo para
que el texto no se pegue al borde de un recuadro agregamos padding.
Referencia completa:https://www.w3schools.com/css/css_padding.asp
Propiedades de bordes
border-width
border-style
border-color
border
Los bordes también pueden definir de manera independiente para cada costado
de un recuadro (top, right, bottom, left)
Referencia completa:https://www.w3schools.com/css/css_border.asp
Colores
Los colores en CSS se pueden indicar de formas diferentes:
- palabras clave (color name)
- valores RGB
- valor HEX (hexadecimal)
- valores HSL
- valores RGBA
- valores HSLA
Colores - Nombres
En CSS hay definidos 140 nombres de colores, la lista
completa en:
https://www.w3schools.com/colors/colors_names.asp
Colores - RGB y RGBA
El color se escribe especificando los valores de rojo, verde y azul entre 0 y 255.
rgb(255, 80, 50)
En la versión RGBA se agrega el valor alpha (opacidad o transparencia del

color) entre 0.0 y 10. Por ejemplo:
rgba(255, 80, 50, 0.5 )
https://www.w3schools.com/css/css_colors_rgb.asp
Colores - HEX
El color se escribe especificando los valores de rojo, verde y
azul en formato hexadecimal, con el símbolo # adelante, por
ejemplo:
#FF8C00
https://www.w3schools.com/css/css_colors_hex.asp
Actividad 3: 😎
Un mini sitio web

Actividad 3:
En esta actividad desarrollaremos un sitio web para una serie que les guste.
1. Desarrollar un mini sitio web de cuatro páginas. Una página principal con información general de la
serie y tres páginas con información acerca de la serie. Por ejemplo: Elenco, curiosidades, temporadas,
guiones, etc.
2. El documento principal debe llamarse índex.html
3. Todas las páginas tienen que tener un encabezado (usar <header>) , un menú de navegación para ir a
cada página (usar <nav>), una sección de contenido (usar <main>, <article> o <section> según
corresponda), un pie de página (usar <footer>) y, al menos, una imagen y/o video.
4. De inir un único documento .css donde están de inidos todos los estilos y lincearlo a las cuatro
páginas .html.
f

Consultas 🤚
Fin de la clase. 👋

CSS Clase 3

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Clase 3

Cargado por

Copyright:

Formatos disponibles

CSS

Introducción al Desarrollo Web Full-Stack

Repaso de la clase anterior.

Para utilizarlo primero debemos tener creado nuestro documento HTML.

HTML fue desarrollado considerando que el diseño está a cargo de CSS.

Entonces, siempre que trabajemos en desarrollo web, vamos a usar

- HTML organiza el contenido.

Esto nos facilita la comprensión de cada uno de los lenguajes.

También, podemos tener distintas hojas de estilo, dependiendo los

Ejemplo: para cambiar el diseño de la pagina, para aumentar la accesibilidad

Si tenemos varias hojas de estilos podemos seleccionar cuando usar cada

La información de estilos se puede incluir de varias formas:

1. Puede especificarse para cada elemento HTML, mediante el atributo

Importante: La etiqueta <style> no es lo mismo que el atributo style.

La forma básica de definir un estilo en CSS tiene 3 partes:

body { background-color: green; }

Cambiar el color del fondo de toda la página a verde.

p { color: blue; background-color: gray; }

/* Este es un comentario en CSS */

/* Este es un comentario que inhabilita una parte del codigo.

Existen tres tipos de selectores simples:

1. Selector de etiquetas HTML (element selector)

Para definir un selector de etiqueta, usaremos el nombre de la etiqueta

Selector de identi cador

Para definir un selector de identificador, usamos el hashtag # antes del nombre de

Para definir un selector de clase, usamos el punto . antes del nombre de

Sin agrupar: Agrupados:

Exisen 3 maneras de aplicación (según el orden de cascada):

1. Crear un documento html.

2. Agregar contenido en la página utilizando las distintas etiquetas para organizarlo.

3. De inir estilos en el head del documento usando la etiqueta <style>

a) Tres estilos usando selectores de etiqueta.

b) Tres estilos usando selectores de identi icador.

selectores de clase a varios elementos de la página).

La página se deberá visualizar igual a la practica anterior.

Referencia completa: https://www.w3schools.com/css/css_background.asp

Referencia completa: https://www.w3schools.com/css/css_text.asp

Se debe linear la tipografía elegida en el documento html y

Los márgenes determinan el espacio alrededor de los eventos.

rgb(255, 80, 50)

En la versión RGBA se agrega el valor alpha (opacidad o transparencia del

rgba(255, 80, 50, 0.5 )

También podría gustarte