Fundamentos de CSS

¿Qué es CSS?

Cascading Style Sheets

Conjunto de reglas que sirven para crear la presentación de un documento estructurado.

¿Por qué se le dice hoja de estilos en cascada?

Porque las reglas que definimos modifican la presentación del documento de acuerdo la posición de la regla, por elemplo:

¿Cómo se definen las reglas en CSS?

 

  • El elemento que modificamos = selector
  • La instrucción con la que lo modificamos = declaración/ruleset

Selector

Inicio de declaración de reglas

Propiedad

Valor

Fin de declaración de reglas

Todas las reglas de CSS constan de 2 partes:

¿Cualés son los tipos de selectores?

 

  • Universal selector *
  • Type selector elementname
  • Class selector .classname
  • ID selector #idname
  • Attribute selector [arrt=value]

Los selectores básicos son 5:

También tenemos grouping selectors, combinators, pseudo 

Ejemplos de selectores básicos:

Ejemplos de grouping, combinators & pseudo selectors

Document Flow

El flujo de display y position de los elementos dentro de un documento web, tambien conocido como "Box Model"

https://html.spec.whatwg.org/#kinds-of-content

Como toman espacio los elementos

Todos los elementos tienen valores default

Display Inline

Display block

a, abbr, br, cite, code, em, i, img, input, label, select, span, strong, sub, sup, textarea

blockquote, div, dl, fieldset, form, h1 - h6, hr, ol, p, pre, table, ul, dd, dt, li, td, th, thead, tr

Elementos inline

Elementos block

Valores de posición

  • Static - default
  • Relative
  • Absolute
  • Fixed

Incluir CSS en un documento

  • Con la etiqueta link (externo)
  • Con la etiqueta style (dentro del documento)
  • Inline styles (dentro de cada elemento)

Recomendaciones:

  • Enlazar el CSS con la etiqueta link
  • Crear una base donde agrupemos elementos relacionados para evitar problemas de specificity
  • Nombrar clases de forma comprensible
  • Quitar los estilos default que insertan distintos navegadores (normalize.css, resets)
  • Organizar el proyecto en distintos folders para ubicar fácilmente los elementos de la página

Problemas de specificity

https://cssspecificity.com

CSS Base primero

  • Agrupar elementos relacionados para crear una base sólida.
  • Normalize & resets para tener una consistencia visual independiente del navegador.

Ejercicio:

Declarar HTML & CSS baseline con styleguide del proyecto.

Ejemplo: HTML baseline 

Tipografía

<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <title>Título</title>
</head>
<body>
  <h1>Hola mundo</h1>
</body>
</html>

HTML baseline 

CSS link

<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css"
  <title>Título</title>
</head>
<body>
  <!-- Document body -->
</body>
</html>

CSS Reset & base styles

/* CSS Resets */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

/* No discs from ul */
ul {
  list-style: none;
}

input,
textarea,
select,
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

input,
textarea,
button {
  border: 1px solid gray;
}

button {
  border-radius: 0;
  padding: 0.75em 1em;
  background-color: transparent;
}

button * {
  pointer-events: none;
}

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}

table {
  table-layout: fixed;
  width: 100%;
}

[hidden] {
  display: none;
}

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}

/* Variables */

:root {
  /* Containers */
  --small: 768px;
  --medium: 1024px;
  --large: 1440px;
  /* Colors */
  --background: white;
  --primary-color: #0366EE;
  --secondary-color: #FCB42A;
  /* Typography */
  --font-size: 1rem;
  --body-font-size: 1rem;
  --font-style: normal;
  --font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
  /* Components - Heading */
  --heading-font-color: #404040;
  --heading-font-weight: bold;
  --heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
  /* Components -Heading font size */
  --h1: 2.25rem;
  --h2: 2rem;
  --h3: 1.75rem;
  --h4: 1.5rem;
  /* Components - Footer */
  --footer-font-color: #F4F4F4;
  --footer-bg-color: #000000;
  /* Padding */
  --padding: 1rem;
  --margins: 1.5rem;
}

/* Global */
body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}
 
/* Sections */

/* Layouts */

https://slides.com/michcodes/css#/21

Aplicando variables en CSS

/* Global */

body {
  background-color: var(--primary-color);
}

Declarar baseline del CSS con styleguide del proyecto.

Fundamentos de css

By Michel Ventura

Made with Slides.com

Fundamentos de css

Fundamentos de CSS

  • 109

More from Michel Ventura