Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Web Developer Fundamentals

1

驴Qu茅 aprender谩s sobre HTML y CSS?

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
13 Hrs
5 Min
24 Seg
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Diego De Granda

Diego De Granda

Herencia

26/55
Resources

How does inheritance affect CSS design?

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.

What is CSS inheritance?

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.

  • Common inheriting properties:font-size, text color.
  • Non-inherited properties: margins(margin),position (position),width (width).

How to apply inheritance?

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.

How to control or break inheritance?

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.

Why is it important to understand inheritance?

Understanding inheritance allows you to avoid common mistakes and optimizes CSS code. Some reasons to master inheritance include:

  • Consistency in design: Ensures styles are applied uniformly across the page.
  • Less code repetition: Reduce the need to redefine styles for each element.
  • Flexibility and control: Facilitates precise style adjustment where needed, breaking down inheritance when certain elements require different treatment.

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

Sort by:

Want to see more contributions, questions and answers from the community?