Basically, in HTML there are labels that open and close, some don’t, like images.
This labels when they open, they also accept attributes with values, this will be related normally with the style of the element. Between the open and close labels there can be text or more elements.
Doctype make sure the file it’s read properly in the different browsers, after this html would be the root of the html tree.
Finally, there are a head and a body in this tree, one like the roots are connected to the server while the visible part it’s the body.
In the head there are important labels like meta, related to the server and links, this one normally connects the styles to the html.
It’s important to use the proper labels so the browser can read and understand properly our html file, same as other developers. Also, it has a big impact in the SEO and position of the website on the top. It’s a good practice.
An example it can be the labels “<i>” and “<em>”. It’s showed as the same, but they are different semantically.
HTML is interpreted not compiled, so the errors are ignore frequently or the same browser modify the label to be readied.
To validate the label and see if there is any error, there is a website to do so https://validator.w3.org/
To modify the style of the html file it’s used CSS. This count with selectors that can point to classes, ids or the name of the label from the html. This selectors will contain inside backers “{}” the declarations: properties (colour, position, background-colour, etc) and its values (blue, right, red).
P{
Colour: blue;
Background-colour: red;
}
In case of pseudo-classes, these are styles by default like first-child element that point to the first selector inside other selector, it would be written: selector:first-child{}”.
Pseudo-elements can be seen as elements that are included not by html but CSS. Always with the property “content”. These are commonly used by browsers in lists, sliders, scroll bars etc.
Each element it’s a box, this has content where it seen for example the text and after there is a padding that keep space between the content and the border of the box, the limit.
Finally the space between the box and the rest it’s the margin.
The difference between this kind of sizing it’s the dependency of the unit to another unit. For example, it it’s spoken about percentage “%” this will be relative to the size of the element father.
In the other hand, pixels are independent, it’s not pointing other values. It’s its own.
It points to the behaviour of the element, normally the box that it’s the element can be inline, it means it will extend only the content as maximum. But paragraphs are block elements, this will extend all it can.
Apart, there are other display as flex and gird the most used ones.
There are seven positions you can choose; this will indicate the location in the file. It’s even possible to create layers and put elements above or even keep this on the top of the screen when the user scrolls down.
