Web Developer Fundamentals
驴Qu茅 aprender谩s sobre HTML y CSS?
驴Qu茅 es el Frontend?
驴Qu茅 es Backend?
驴Qu茅 es Full Stack?
P谩ginas Est谩ticas vs. Din谩micas
HTML
HTML: anatom铆a de una p谩gina web
Index y su estructura b谩sica: head
Index y su estructura b谩sica: body
Reto: crea tu lista de compras del supermercado
Anatom铆a de una etiqueta de HTML
Etiquetas multimedia
Tipos de im谩genes
Optimizaci贸n de im谩genes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
驴Qu茅 es CSS?
驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatom铆a de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
M谩s sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desaf铆o: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas pr谩cticas y ejemplos de responsive
Im谩genes responsive
Accesibilidad
Sem谩ntica
Textos
Labels, alt y title
Pr贸ximos pasos
Pr贸ximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
You don't have access to this class
Keep learning! Join and start boosting your career
Inheritance in CSS is a key concept that must be understood in order to master how styles are applied in an HTML document. Fundamentally, it refers to the ability of certain styles to "flow" from a parent element to its children. Understanding this mechanism offers more precise control over the visual presentation of our web pages, avoiding surprises and allowing us to design with intentionality.
Inheritance in CSS refers to the phenomenon whereby some styles set in an HTML element are automatically passed on to its child elements. For example, by defining a font size in the <html>
tag, that size can propagate to tags such as <p>
or <span>
that do not have an explicitly defined font size.
font-size
, text color.
(margin
),position (position
),width (width
).To understand how to apply inheritance, let's explore a practical example through a CSS file that applies styles to an HTML page:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Inheritance</title></head></head><body> <body><main> <h1>I ama title</h1> <p>I ama paragraph</p> </main></body></html></html>
html { font-size: 75%; /* Applies 75% of the default font size */ font-family: Verdana, sans-serif; /* Changes the font to Verdana */}
In the above example, a font size of 75% is set for the <html>
tag. This means that all text elements within the document will inherit this font size, unless a specific size is defined in them.
In CSS, you can explicitly decide when you want an element to inherit properties. By using the inherit
property, you can force an element to take the style of its parent element, even if it does not do so by default.
h1 { font-size: inherit; /* Inherits the font size of the closest parent with defined size */}
In this code, h1
will have the same font size as its parent, as long as the parent element has an explicit font size.
Understanding inheritance allows you to avoid common mistakes and optimizes CSS code. Some reasons to master inheritance include:
This knowledge not only improves efficiency in style sheet development, but also enables the creation of complex designs with less effort. I invite you to delve deeper into these concepts and experiment with different techniques to hone your CSS skills and continue exploring the fascinating world of web design!
Contributions 145
Questions 30
Want to see more contributions, questions and answers from the community?