No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mis primeros estilos con CSS

9/27
Recursos

Aportes 33

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Ya, pero la explicación de lo que es border-box ✨✨ 🛐

Para ver los cambios en tiempo real y evitar tanto F5 en el navegador instalen Live server para el visual studio code Clic aqui

De esta manera el navegador va a recargar el archivo html cada vez que se guarde.

Que gran profesor

He entendido perfectamente la explicación sobre el border-box!

Me causa gracia que digas “como dice la chaviza”, porque también eres joven.

Para evitar tener que modifcar los estilos siempre para eliminar padding y margin, pueden usar llamar esta hoja de estilos que “normaliza” los estilos para que se acomode con los estándores de hoy, como lo son el resetear el margin a 0 normalize.css

La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como:

  • presentar el documento final en diferentes estilos (pantalla, voz, impresión);
  • tener un sitio web responsivo;
  • evitar hacer archivos demasiado pesados;
  • definir el estilo visual de todo un sitio web. Así, si cambiamos una página, cambiarán todas automáticamente;
  • trabajar con estándares y separar (hasta cierto punto) la estructura de la presentación logrando un trabajo más definido;
  • provee más flexibilidad y control en las especificaciones del sitio web;
  • simplifica la creación de la página.

Gracias a Platzi por darme la oportunidad de aprender a un precio tan accesible, todo comenzó como una simple prueba y ahora se ha convertido en una de las cosas que mas me gustan, llegando al punto de plantearme de vivir de ello cuando me haga mas pro. Gracias profe y platzi.

No podía enlazar la hoja de estilos y tuve que escribir:
<link rel=“stylesheet” type=“text/css” href=“styles/style.css”>
No sé porque, pero solo así funcionó

10 de 10

Excelente, me encanta

excelente explicacion sobre el border-box!

Padding: El padding básicamente lo usamos para crear un espacio entre el contenido y el borde. El padding crea espacio extra entre un elemento y su borde. Es un margen interno.

* CSS \*\*`* { margin: 0; padding: 0; box-sizing: border-box; }`\*\*es una regla de estilo. Esta regla afecta a todos los elementos HTML en la página y establece ciertos valores para las propiedades `margin`, `padding`, y `box-sizing`. 1. `*`: Este selector asterisco `(*****)` se utiliza en CSS para seleccionar todos los elementos HTML en la página. En otras palabras, se aplica a cada elemento, ya sea un encabezado, un párrafo, una imagen, un botón, etc. Es una forma de establecer reglas generales que afectarán a todos los elementos. 2. `margin: 0;`: Esta propiedad establece el margen exterior de todos los elementos en la página en cero píxeles. El margen es el espacio en blanco que rodea un elemento. Al establecerlo en cero, elimina cualquier espacio en blanco adicional alrededor de los elementos, lo que puede ayudar a que tu diseño sea más consistente y predecible. 3. `padding: 0;`: Esta propiedad establece el relleno interno de todos los elementos en la página en cero píxeles. El relleno es el espacio en blanco entre el contenido de un elemento y su borde interno. Al establecerlo en cero, elimina cualquier espacio en blanco interno, lo que evita que los elementos ocupen más espacio del necesario. 4. `box-sizing: border-box;`: Esta propiedad cambia el modelo de caja de los elementos a "border-box". Por defecto, el modelo de caja es "content-box", lo que significa que el ancho y el alto de un elemento se refieren solo al contenido dentro del elemento y no incluyen el relleno y el margen. Al cambiarlo a "border-box", el ancho y el alto se refieren al tamaño total del elemento, incluyendo el contenido, el relleno y el borde. Esto hace que el cálculo del diseño y el dimensionamiento de los elementos sea más predecible y controlable.
Después de pasar del nivel 1 al 32 de reto anterior, puedo decir que lo que más aprendí es que para usar los selectores siempre es bueno tener a san Google o la pagina que sugirieron en clases anteriores para entender como funcionan.

Que crack el profe! Super entendido.

Sino le entiendes a Carlos y a FREDDY. mejor abandona la programacion xd

Aquí de pana

La clase se centra en los estilos básicos de CSS y cómo enlazarlos a un documento HTML. Se explica cómo crear un archivo CSS, enlazarlo en la sección `<head>` del HTML y aplicar estilos como márgenes y padding. Se introduce el concepto de "box-sizing" para controlar cómo se manejan las dimensiones de los elementos, asegurando que el tamaño definido en CSS se mantenga constante, independientemente de los márgenes o paddings agregados. Esta base es crucial para construir sitios web bien estructurados y visualmente atractivos.
Buenas!! Consulta cual puede ser el error cuando una hoja de estilo no se vincula , en css? Creo haber hecho de forma correcta, pero no estaría funcionando. :(
todo super claro!!!!!!!!!!!!!
por que no entiendo nada ??? =(

muy buena explicacion teacher.

Wow, tantos cursos de HTML y CSS en profundidad y la mejor explicacion sobre el padding, box-sizing: border-box; esta aqui. Gracias profe Retaxxxxxxxxx

.

veo que la mayoría tiene problemas a la hora del CSS esto es por el llamado que se esta haciendo en el HTML podemos llamarlo de esta forma

href="./css/styles.css"  //si esta en el mismo nivel de la carpeta o usar 
href=".//css/styles.css"   //si esta en otro nivel

y les recomiendo usar esta extensión en visual “Live Server” para evitar el problema de que abecés no se ven los cambiaos registrados así actualicen la pagina no se ve ningún cambio con esa extensión lo pueden solucionar

Es INCREIBLE lo bien que explica Retax Master!! 🤩🤩🔥

La etiqueta <link> es utilizada para enlazar archivos externos al HTML, como los archivos CSS. El atributo rel es utilizado para indicar el tipo de relación que existe entre el archivo y el documento actual, por ejemplo, para indicar que se trata de un archivo de estilos CSS se utiliza el valor “stylesheet”.

En CSS, el asterisco (*) selecciona todos los elementos HTML, el atributo margin define el espacio alrededor del elemento, el atributo padding define el espacio entre el contenido y el borde, el atributo box-sizing define cómo se calcula el tamaño total de un elemento, el símbolo # se utiliza para seleccionar un elemento por su ID único, los atributos width y height definen el ancho y alto de un elemento, el atributo background define el fondo de un elemento y los estilos generales se refieren a estilos que se aplican a todo el documento.

El modelo de caja es la forma en que se calcula el tamaño total de un elemento, tomando en cuenta su ancho, altura, margen y padding.

Es importante tener en cuenta que los estilos CSS pueden ser aplicados a través de selectores de etiqueta, ID, clase o atributo, y que la especificidad es utilizada para determinar cuál de estos estilos será aplicado en caso de que haya conflictos.

Es común utilizar técnicas de alineación en CSS para posicionar elementos en la página, como el uso de float, position y display.

Interesante lo de “box-sizing: border-box;” la verdad eso no lo sabía pero si suena a que entre tanto código te puede venir de gran ayuda para empezar a descartar cosas que no encajan.

aplicacion padding, en espacio, y modificacion en tiempo real desde la pagina

No logre entender el juego :C

un muy buen curso que estaba esperando apenas llevo un mes y con los cursos de platzi si que estoy aprendiendo

de los mejores maxter para explicar