Created
December 8, 2025 19:59
-
-
Save kevinacuna1/33ccbec371d9d613a24ba2a18be2c102 to your computer and use it in GitHub Desktop.
Starter CSS con buenas prácticas: box-sizing, tipografía base, encabezados, enlaces, imágenes, contenedor y utilidades rápidas. Incluye comentarios para guiar a estudiantes en cada regla.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ============================================================ | |
| Starter CSS – Plantilla base para proyectos web | |
| Incluye buenas prácticas de box-sizing, tipografía y estilos globales | |
| ============================================================ */ | |
| /* 1. Box-sizing global */ | |
| html { | |
| box-sizing: border-box; | |
| font-size: 62.5%; /* 1rem = 10px */ | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| /* 2. Body global */ | |
| body { | |
| font-family: "Raleway", sans-serif; | |
| font-size: 1.6rem; /* 16px */ | |
| line-height: 1.8; /* interlineado cómodo */ | |
| color: #333; | |
| background-color: #fff; | |
| margin: 0; | |
| } | |
| /* 3. Encabezados */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: "Playfair", serif; | |
| margin: 0 0 2rem 0; | |
| font-weight: 700; | |
| } | |
| h1 { font-size: 5rem; } /* 50px */ | |
| h2 { font-size: 4rem; } /* 40px */ | |
| h3 { font-size: 3rem; } /* 30px */ | |
| h4 { font-size: 2.4rem; } | |
| h5 { font-size: 2rem; } | |
| h6 { font-size: 1.6rem; } | |
| /* 4. Enlaces */ | |
| a { | |
| text-decoration: none; | |
| color: #037bc0; | |
| transition: color 0.3s ease; | |
| } | |
| a:hover { | |
| color: #025f8a; | |
| } | |
| /* 5. Imágenes */ | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* 6. Contenedor */ | |
| .contenedor { | |
| max-width: 120rem; /* 1200px */ | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| /* 7. Listas */ | |
| ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| /* 8. Botones */ | |
| button { | |
| font-family: inherit; | |
| font-size: 1.6rem; | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: .5rem; | |
| background-color: #037bc0; | |
| color: #fff; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| button:hover { | |
| background-color: #025f8a; | |
| } | |
| /* 9. Formularios */ | |
| input, textarea { | |
| font-family: inherit; | |
| font-size: 1.6rem; | |
| padding: 1rem; | |
| border: .1rem solid #ccc; | |
| border-radius: .5rem; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* 10. Utilidades rápidas */ | |
| .text-center { text-align: center; } | |
| .mt-2 { margin-top: 2rem; } | |
| .mb-2 { margin-bottom: 2rem; } | |
| .p-2 { padding: 2rem; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment