Html and css – Main concepts

media tags
These tags allow us to include elements other than text. Some appear from version 5 of the HTML standard and make it possible to play audio, video and 2D and 3D elements without using additional plugins.

Through the img tag we can include static or animated images in our html document.
With the audio tag we can include audio files in the document and play them directly through the browser or browser. explore
With the video tag we can include videos in the document, with the possibility of showing playback controls, such as pause, forward and view in full screen. explore
The canvas tag allows us to include custom 2D or 3D graphics, it is an area of ​​the document where we can draw through code. explore
format tags
These tags represent text elements with different characteristics.

Headings range from most important (1) to least important (6), with tags from h1 to h6. explore
The paragraphs are framed between the p tag, grouping a text that makes complete sense. explore
We have two types of lists: lists that are automatically numbered with the ol tag and lists with unnumbered items with the ul tag. explore
hypertext tags
These tags are what allow you to navigate from one document to another in the hypertext reading model.

The (a) tag represents the links to other html documents on the web, they are made up of the visible text and the SEO onpage. explore.


CSS – Cascading Style Sheets

CSS is a descriptive language that allows you to define the presentation of an HTML document.

CSS is not a programming language, it is a descriptive language made up of rules that indicate how to present an html document. When a style sheet is associated with an html document, the browser interprets such rules and applies them to the document, modifying its appearance.

A css rule is made up of one or more selectors followed by a declaration consisting of one or more property and value pairs. A css file can contain multiple rules.
Selectors indicate which elements of the document a rule should apply to. A rule can contain one or more selectors, separated by commas.
Properties are visual features that html elements have. A declaration can contain one or more properties, each with its own value and separated by semicolons.
Structure of a CSS rule
Types of selectors
Tag Picker
This selector corresponds to the tag names of the html elements, for example p, a, h1 or div. It means that the rule will be applied to all elements of that type that appear in the client. For example, if we want all the paragraphs to have a certain alignment or that all the links have a certain color.
picker by id
HTML elements can have an attribute called id that must be unique and serves to identify it within the document. The selector must start with the # symbol followed by the element id and the rule will apply only to that element. It is useful to style elements that we want to highlight.

selector by class
HTML elements can have an attribute called class, this is used to group different elements under the same identifier. The selector must start with the symbol ( . ) followed by the class name and the rule will be applied to all elements that have it. In the example below, we have five classes, and each one applies to every vowel in the text.


State Picker

Some html elements may have different states, a button may be disabled, a link may have already been visited or the mouse pointer may be over some text. The state selector allows you to apply different rules depending on the state of the elements. This selector is placed after another selector separated by the symbol : In the example below we change the color of the border when one or another text field is selected. explore
Selector by attribute

The html elements have vrious attributes, it is possible to apply rules to the elements according to the particular value of their attributes. This selector is indicated between the symbols [] specifying the name and value of the attribute. It can go as the only selector in the rule or after another selector. In the example we apply the rule to all images whose file is logo.png.

Selector by relation

In an html document we find many elements, some are inside others, as in the case of the div tag that we saw earlier. Others appear first or later in relation to the others. Relation selectors are used to select elements based on their relationship to one another. Check out the comments in the example below.

Most common properties

The number of properties of the html elements is extensive, you can consult the complete reference in specialized sites, below we mention only a few to give you an idea.