Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 7H : 27M : 56S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Conceptos básicos de CSS

2/42

CSS significa Cascading Style Sheets o su traducción al español Hojas de Estilo en Cascada.

Asignar reglas CSS a un documento HTML se puede hacer de varias formas:

  • Colocando las reglas en un documento *.css y relacionarlo al HTML usando la etiqueta
  • Colocando en el atributo style de cada elemento HTML las reglas para cada etiqueta
  • Colocando los estilos dentro de una etiqueta style dentro del head del documento.

Como su nombre lo dice siempre lee en cascada de arriba hacia abajo sobrescribiendo valores excepto los dados por el atributo style.

Un estilo CSS está formado por: selector, declaración, propiedad y valor.

Empecemos…
.

CSS es muy simple pero no muy facil, me ha costado mas trabajo aprender css que java.

HTML es estructura y CSS son estilos
css.jpg

Curiosidad de CSS
Hay propiedades más pesadas que otras
Hay propiedades CSS que son más caras en su uso frente a otras, más pesadas, y que por ello hay que usarlas con moderación.

border-radius

box-shadow

transform

filter

:nth-child

position: fixed

Tengo que aclarar que no hay que dejar de usar este tipo de propiedades, pero sí tener esto en cuenta y pensar en alternativas, en caso de que las haya.

HTML: Ingeniería civil
CSS: Arquitectura

ya no veo de la misma manera mi casa xd

No entiendo el chiste del porqué un oso polar muere cada vez que usas !important 😮

Que es CSS?


Hojas de estilo en cascada.



es lo que le da el estilo a las paginas, le da el estilo y colores al HTML....
cuando se dice en cascada es por que lee el codigo en forma secuencial

______________________________________________

Se puede agregar en el HEAD del HTML

Se puede usar inline, en las lineas del HTML


La mas recomendable es utulizarlo en un archivo esterno (.CSS) ademas es una regla en la web
Siempre hay que separar el contenido del estilo



_____________________________


Sintaxis:

Selector = es el elemento al cual tu le quieres dar estylo (Etiquetas HTML)

Declaracion = Son las propiedades que llevan el selecotot (Color, tamaño, etc...)
                La declaracion tiene dos partes color:  blue;
                                    Propiedad = Color
                                    Valor     = Blue

Ya he hecho algunos proyectos con CSS, y aunque escribirlo se me hace muy intuitivo, agradezco el repaso por la terminología concreta para no solo decirle “esta parte del código aquí” 😄

Html = esqueleto.
css = musculos, venas, arterias, etc.

Muy buena la clase para repasar lo básico de css incluso muy buena analogía lo de la casa.

CSS te permite aplicar estilos de manera selectiva a elementos en documentos HTML.

Buen ejemplo lo de la casa.

Una muy buena analogia para explicar las diferencias entre el lenguaje html y css

Buen repaso de lo más básico!!!

De los 3 preprocesadores SASS es el que predomina para mi
Eh usado los 3 en diferentes proyectos

Me encontre este post en el blog de platzi y me encanto
https://platzi.com/blog/5-tips-para-aprender-css/

Tenemos tres maneras de agregar CSS a nuestro HTML, la primera es crear una etiqueta style y dentro de ella escribir los estilos. La segunda forma es de manera embebida o directa, esto quiere decir que dentro de la etiqueta usaremos la propiedad style y dentro ponemos los estilos.

<p style="color: blue; font-family: Arial"> Hola Mundo </p>

La tercera forma es la mejor, es una buena práctica, y es tener un archivo CSS aparte. Lo agregamos en el head con la etiqueta link

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Document</title>
</head>

CSS nos permite aplicar estilos de manera selectiva, por eso su sintaxis es selector y declaración

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d1933931-3c43-475d-bc92-0ab9e57eace1/Untitled.png

2. Conceptos básicos de CSS

CSS se refiere a Cascading Style Sheets, y se los puedo simplificar de la siguiente manera:

HTML da la estructura a tu web, CSS aporta los estilos (formas, colores, tamaños, etc), y finalmente JavaScript aporta la funcionalidad, los 3 son parte fundamental para ser un frontend developer, ya luego de aprender bien los 3 pueden irse por un framework o library como: Angular, React, Vue, etc.

Este es el clásico gif que lo explica:

Y si quieren dedicarse al backend, también es importante conocer sobre HTML, CSS y JS.
Nota: Ojo que es fundamental que hayan llevado el curso de HTML y CSS de DeGranda antes de llevar este curso, esto debería ser un repaso, mas no su primer encuentro con CSS.

Solo recuerden cuidar a los osos polares 😦

Resumen de la clase

.
CSS (Cascading Style Sheet) es la manera en la cual nosotros le damos estilos a nuestro contenido. Se llama cascading, porque el navegador va a leer nuestros estilos de arriba abajo, por lo que si una propiedad de sobrescribe, se va a aplicar la que este mas abajo.
.
Lo mas recomendable es que separemos las peras de las manzanas, o en este caso, el contenido de los estilos. Existen tres maneras distintas de aplicar estilos a nuestro html:

  1. Con la etiqueta <style> dentro de <head>
  2. Agregando <style> dentro de la etiqueta misma
  3. Linkeando un archivo con extension css (file.css) en una etiqueta <link> dentro del <head>

La ultima es la manera mas recomendable. A continuacion un ejemplo de cada una de las formas:
1.

<head>
	<style>
			Your: styles;
		</style>
</head>
<p style="color: red;">Hola a todos</p>
<head>
	<link href="./css/styles.css">
</head>

Sintaxis de CSS

nunca esta mal tomar un repaso de css

hola
html con variables que clase de humildad es está

se dice que dios creo la sustancia llamada html y de hay salieron sus atributos jajaj

Hola a todos!
Si alguien desea leer mas sobre CSS puede verlo en el MDN, aqui les dejo el link
https://developer.mozilla.org/es/docs/Web/CSS

Resumen de la clase:

Introduccion


CSS significa Cascading Style Sheets o su traducción al español Hojas de Estilo en Cascada.

Asignar reglas CSS a un documento HTML se puede hacer de varias formas:

  • Colocando las reglas en un documento *.css y relacionarlo al HTML usando la etiqueta
  • Colocando en el atributo style de cada elemento HTML las reglas para cada etiqueta
  • Colocando los estilos dentro de una etiqueta style dentro del head del documento.

Como su nombre lo dice siempre lee en cascada de arriba hacia abajo sobrescribiendo valores excepto los dados por el atributo style.

Formas de incluir css

  • Dentro del archivo html usando la etiqueta style.
  • Inline, es decir aplicando estilo en las etiquetas html.
  • External, es decir tener un codigo css separado del html.

Sintaxis

  • Selector: es a quien queremos aplicar los estillos
  • Declaracion:
    • Propiedad
    • Valor

Muy bien, primero con las bases

CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.

Tengo muchas expectativa por este curso, he estudiado SASS pero todavia tengo algunas dudas

Excelente repaso.

A CSS, se le llama hojas de estilo en cascada por que los estilos que se definen para una pagina, se van aplicando de arriba hacia abajo y de los mas general hasta lo más particular, teniendo prioridad lo más particular.

Excelente

Muy buen repaso de css, muchas gracias por esta clase. 🚀

“Siempre hay que separar el contenido de su estilo” esta es una regla web.

Excelente repaso. A seguir aprendiendo.

Excelente, muy emocionado

Buen repaso

Excelente repaso!!

exclente repasoo 😄

listo repaso

Muy buena explicación! 😄

Excelente

Excelente analogía para comparar las diferencias entre HTML y CSS.

Para todo una buena base es muy importante.

que hermoso esto! ❤️

La hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML y derivados.
Fuente: https://www.w3.org/

Nuestros estilos con CSS se componen de:

  • Selector: son la referencia a los elementos HTML que queremos estilizar. Los nombres de estas etiquetas van seguidas de una llave de apertura y otra de cierre ({}). Por ejemplo: h1 {}.
  • Propiedades: son el tipo de estilo que queremos darle a nuestros elementos. Van seguidas de dos puntos (:). Las propiedades deben estar dentro de las llaves del selector que definimos anteriormente. Podemos escribir diferentes propiedades en un mismo selector. Por ejemplo: h1 { color: }.
  • Valores: son el estilo que queremos que tomen nuestros elementos HTML con respecto a una propiedad. Van seguidas de un punto y coma (;). Por ejemplo: h1 { color: red; }.
h1 {
  color: red;
}

Lenguaje de estilos y lenguaje de marcado (etiquetas).

Se agradece que estos y demas cursos en platzi se haga un repaso de los conceptos básicos, no ir de lleno porque generalmente existen lagunas las cuales algunos estudiantes olvidan y/o sobre todo los que tienen experiencia. Siempre es buena idea reafirmar los conceptos.

html el nuevo js
html con variables que clase de brujería es esta jajajaja
interesante la metodología BEM la comenzare a utilizar de ahora en adelante

Vengo de JS y en definitiva amo mucho mi CSS 😅❤

Sintaxis
Selector → Elemento de HTML al que deseamos darle un estilo
Declaración → Es el estilo que deseamos darle al Selector. Una propiedad y un valor forman una declaración.
Propiedad → Es un identificador, que define qué característica es considerada. Ejm.:Texto, Color, etc
Valor → Es la característica asignada a una propiedad.

Me gusto el ejemplo de la casa con html y css.

Llevo como 3 años programando, y la parte de CSS siempre copiaba y pegaba. :p
Me interesa el curso para que mi trabajo tenga un mayor valor.

Recuerdo cuando Freddy enseñaba sobre CSS :’)

“El contenido es siempre el rey”, separa siempre el contenido de su estilo, Es lo que me llevo de ésta clase 😄 , Empezemos.

b

En CSS existen tres conceptos básicos para entender el lenguaje, estos son: **herencia, cascada y especificidad **. Esta última es la que tiene más peso sobre que estilos sobrescriben a otros, la especificadad es determinada por el tipo de selector (no siempre) y puede medirse en puntos, entre mayor puntaje de especifidad mayor prioridad tendran sus estilos hacia el elemento que apunta, la espeficidad para los distintas declaraciones de estilos seria la siguiente:

  • Selector global = 0
  • Selector de tipo o etiqueta = 1
  • Selector de clase = 10
  • Selector de ID = 1000
  • Declaración dado por el atributo style = 1000
  • Declaración de !important = infinito

Como podemos observar la implementación de !important en una declaración es capaz de sobrescribir estilos inline, el uso de !important es considerado una mala práctica por lo que no deberíamos usarlo para sobrescribir otros estilos, cabe resaltar que la especifidad se puede sumar y con esto aumentar su valor en dependecia a la cantidad de factores que interactuen con una declaración, si la especificadad es igual en declaraciones que estén en conflicto los estilos que serán aplicados serán determinados por la cascada.

En lo particular me encanta hacer código CSS puro, y considero que es superpoderosa, si se llega a dominar bien se pueden logran cosas maravillosas.

Buen repaso!! Gracias!

Empecemos…
.

CSS es muy simple pero no muy facil, me ha costado mas trabajo aprender css que java.

HTML es estructura y CSS son estilos
css.jpg

Curiosidad de CSS
Hay propiedades más pesadas que otras
Hay propiedades CSS que son más caras en su uso frente a otras, más pesadas, y que por ello hay que usarlas con moderación.

border-radius

box-shadow

transform

filter

:nth-child

position: fixed

Tengo que aclarar que no hay que dejar de usar este tipo de propiedades, pero sí tener esto en cuenta y pensar en alternativas, en caso de que las haya.

HTML: Ingeniería civil
CSS: Arquitectura

ya no veo de la misma manera mi casa xd

No entiendo el chiste del porqué un oso polar muere cada vez que usas !important 😮

Que es CSS?


Hojas de estilo en cascada.



es lo que le da el estilo a las paginas, le da el estilo y colores al HTML....
cuando se dice en cascada es por que lee el codigo en forma secuencial

______________________________________________

Se puede agregar en el HEAD del HTML

Se puede usar inline, en las lineas del HTML


La mas recomendable es utulizarlo en un archivo esterno (.CSS) ademas es una regla en la web
Siempre hay que separar el contenido del estilo



_____________________________


Sintaxis:

Selector = es el elemento al cual tu le quieres dar estylo (Etiquetas HTML)

Declaracion = Son las propiedades que llevan el selecotot (Color, tamaño, etc...)
                La declaracion tiene dos partes color:  blue;
                                    Propiedad = Color
                                    Valor     = Blue

Ya he hecho algunos proyectos con CSS, y aunque escribirlo se me hace muy intuitivo, agradezco el repaso por la terminología concreta para no solo decirle “esta parte del código aquí” 😄

Html = esqueleto.
css = musculos, venas, arterias, etc.

Muy buena la clase para repasar lo básico de css incluso muy buena analogía lo de la casa.

CSS te permite aplicar estilos de manera selectiva a elementos en documentos HTML.

Buen ejemplo lo de la casa.

Una muy buena analogia para explicar las diferencias entre el lenguaje html y css

Buen repaso de lo más básico!!!

De los 3 preprocesadores SASS es el que predomina para mi
Eh usado los 3 en diferentes proyectos

Me encontre este post en el blog de platzi y me encanto
https://platzi.com/blog/5-tips-para-aprender-css/

Tenemos tres maneras de agregar CSS a nuestro HTML, la primera es crear una etiqueta style y dentro de ella escribir los estilos. La segunda forma es de manera embebida o directa, esto quiere decir que dentro de la etiqueta usaremos la propiedad style y dentro ponemos los estilos.

<p style="color: blue; font-family: Arial"> Hola Mundo </p>

La tercera forma es la mejor, es una buena práctica, y es tener un archivo CSS aparte. Lo agregamos en el head con la etiqueta link

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Document</title>
</head>

CSS nos permite aplicar estilos de manera selectiva, por eso su sintaxis es selector y declaración

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d1933931-3c43-475d-bc92-0ab9e57eace1/Untitled.png

2. Conceptos básicos de CSS

CSS se refiere a Cascading Style Sheets, y se los puedo simplificar de la siguiente manera:

HTML da la estructura a tu web, CSS aporta los estilos (formas, colores, tamaños, etc), y finalmente JavaScript aporta la funcionalidad, los 3 son parte fundamental para ser un frontend developer, ya luego de aprender bien los 3 pueden irse por un framework o library como: Angular, React, Vue, etc.

Este es el clásico gif que lo explica:

Y si quieren dedicarse al backend, también es importante conocer sobre HTML, CSS y JS.
Nota: Ojo que es fundamental que hayan llevado el curso de HTML y CSS de DeGranda antes de llevar este curso, esto debería ser un repaso, mas no su primer encuentro con CSS.

Solo recuerden cuidar a los osos polares 😦

Resumen de la clase

.
CSS (Cascading Style Sheet) es la manera en la cual nosotros le damos estilos a nuestro contenido. Se llama cascading, porque el navegador va a leer nuestros estilos de arriba abajo, por lo que si una propiedad de sobrescribe, se va a aplicar la que este mas abajo.
.
Lo mas recomendable es que separemos las peras de las manzanas, o en este caso, el contenido de los estilos. Existen tres maneras distintas de aplicar estilos a nuestro html:

  1. Con la etiqueta <style> dentro de <head>
  2. Agregando <style> dentro de la etiqueta misma
  3. Linkeando un archivo con extension css (file.css) en una etiqueta <link> dentro del <head>

La ultima es la manera mas recomendable. A continuacion un ejemplo de cada una de las formas:
1.

<head>
	<style>
			Your: styles;
		</style>
</head>
<p style="color: red;">Hola a todos</p>
<head>
	<link href="./css/styles.css">
</head>

Sintaxis de CSS

nunca esta mal tomar un repaso de css

hola
html con variables que clase de humildad es está

se dice que dios creo la sustancia llamada html y de hay salieron sus atributos jajaj

Hola a todos!
Si alguien desea leer mas sobre CSS puede verlo en el MDN, aqui les dejo el link
https://developer.mozilla.org/es/docs/Web/CSS

Resumen de la clase:

Introduccion


CSS significa Cascading Style Sheets o su traducción al español Hojas de Estilo en Cascada.

Asignar reglas CSS a un documento HTML se puede hacer de varias formas:

  • Colocando las reglas en un documento *.css y relacionarlo al HTML usando la etiqueta
  • Colocando en el atributo style de cada elemento HTML las reglas para cada etiqueta
  • Colocando los estilos dentro de una etiqueta style dentro del head del documento.

Como su nombre lo dice siempre lee en cascada de arriba hacia abajo sobrescribiendo valores excepto los dados por el atributo style.

Formas de incluir css

  • Dentro del archivo html usando la etiqueta style.
  • Inline, es decir aplicando estilo en las etiquetas html.
  • External, es decir tener un codigo css separado del html.

Sintaxis

  • Selector: es a quien queremos aplicar los estillos
  • Declaracion:
    • Propiedad
    • Valor

Muy bien, primero con las bases

CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.

Tengo muchas expectativa por este curso, he estudiado SASS pero todavia tengo algunas dudas

Excelente repaso.

A CSS, se le llama hojas de estilo en cascada por que los estilos que se definen para una pagina, se van aplicando de arriba hacia abajo y de los mas general hasta lo más particular, teniendo prioridad lo más particular.

Excelente

Muy buen repaso de css, muchas gracias por esta clase. 🚀

“Siempre hay que separar el contenido de su estilo” esta es una regla web.

Excelente repaso. A seguir aprendiendo.

Excelente, muy emocionado

Buen repaso

Excelente repaso!!

exclente repasoo 😄

listo repaso

Muy buena explicación! 😄

Excelente

Excelente analogía para comparar las diferencias entre HTML y CSS.

Para todo una buena base es muy importante.

que hermoso esto! ❤️

La hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML y derivados.
Fuente: https://www.w3.org/

Nuestros estilos con CSS se componen de:

  • Selector: son la referencia a los elementos HTML que queremos estilizar. Los nombres de estas etiquetas van seguidas de una llave de apertura y otra de cierre ({}). Por ejemplo: h1 {}.
  • Propiedades: son el tipo de estilo que queremos darle a nuestros elementos. Van seguidas de dos puntos (:). Las propiedades deben estar dentro de las llaves del selector que definimos anteriormente. Podemos escribir diferentes propiedades en un mismo selector. Por ejemplo: h1 { color: }.
  • Valores: son el estilo que queremos que tomen nuestros elementos HTML con respecto a una propiedad. Van seguidas de un punto y coma (;). Por ejemplo: h1 { color: red; }.
h1 {
  color: red;
}

Lenguaje de estilos y lenguaje de marcado (etiquetas).

Se agradece que estos y demas cursos en platzi se haga un repaso de los conceptos básicos, no ir de lleno porque generalmente existen lagunas las cuales algunos estudiantes olvidan y/o sobre todo los que tienen experiencia. Siempre es buena idea reafirmar los conceptos.

html el nuevo js
html con variables que clase de brujería es esta jajajaja
interesante la metodología BEM la comenzare a utilizar de ahora en adelante

Vengo de JS y en definitiva amo mucho mi CSS 😅❤

Sintaxis
Selector → Elemento de HTML al que deseamos darle un estilo
Declaración → Es el estilo que deseamos darle al Selector. Una propiedad y un valor forman una declaración.
Propiedad → Es un identificador, que define qué característica es considerada. Ejm.:Texto, Color, etc
Valor → Es la característica asignada a una propiedad.

Me gusto el ejemplo de la casa con html y css.

Llevo como 3 años programando, y la parte de CSS siempre copiaba y pegaba. :p
Me interesa el curso para que mi trabajo tenga un mayor valor.

Recuerdo cuando Freddy enseñaba sobre CSS :’)

“El contenido es siempre el rey”, separa siempre el contenido de su estilo, Es lo que me llevo de ésta clase 😄 , Empezemos.

b

En CSS existen tres conceptos básicos para entender el lenguaje, estos son: **herencia, cascada y especificidad **. Esta última es la que tiene más peso sobre que estilos sobrescriben a otros, la especificadad es determinada por el tipo de selector (no siempre) y puede medirse en puntos, entre mayor puntaje de especifidad mayor prioridad tendran sus estilos hacia el elemento que apunta, la espeficidad para los distintas declaraciones de estilos seria la siguiente:

  • Selector global = 0
  • Selector de tipo o etiqueta = 1
  • Selector de clase = 10
  • Selector de ID = 1000
  • Declaración dado por el atributo style = 1000
  • Declaración de !important = infinito

Como podemos observar la implementación de !important en una declaración es capaz de sobrescribir estilos inline, el uso de !important es considerado una mala práctica por lo que no deberíamos usarlo para sobrescribir otros estilos, cabe resaltar que la especifidad se puede sumar y con esto aumentar su valor en dependecia a la cantidad de factores que interactuen con una declaración, si la especificadad es igual en declaraciones que estén en conflicto los estilos que serán aplicados serán determinados por la cascada.

En lo particular me encanta hacer código CSS puro, y considero que es superpoderosa, si se llega a dominar bien se pueden logran cosas maravillosas.

Buen repaso!! Gracias!