11May 2019 by Junior No Comments
Classification of HTML elements and DOM tree

Classification of HTML elements and DOM tree

Tutorials
Before going into the details of the CSS language, it is necessary to dwell on some key concepts related to HTML. These are preparatory topics for a better understanding of how CSS works. We will start with the classification of HTML elements, and then explain the configuration of the tree structure of a document. Block elements and inline elements We look at an HTML page trying not to think about the content but only about its structure and putting in place a sort of process of abstraction. We can be helped by a simple image: An HTML page rendered on screen by a browser is composed, in fact, of a set of rectangles (boxes). It doesn't matter whether it's paragraphs, titles, tables or images: it's always a rectangular box. Looking…
Read More
07May 2019 by Junior No Comments
CSS in the page

CSS in the page

Tutorials
To style built-in that is, when a certain style reference several elements (tags) of the html the same, in the same page. It would be extremely dispersive, besides laborious, always define the same style multiple times within the same page since it would always for the same purpose. Much better to define it only once, at the beginning of the page. By doing so all the affected items on a page follow the same style. In this case, the instructions should not be included within a specific element, as we have seen in the explanation in line but will be declared at the beginning of the page, using the tags (tags) <style> and </style> inside the section <head> </head> This method does not prevent you from making use of any…
Read More
03May 2019 by Junior No Comments
CSS in-line

CSS in-line

Tutorials
In line when you need to apply the style to only one block or part of the code that we are dealing with, without that this style is going to affect other parts of the same web page. For example a paragraph <p> that should have certain characteristics, but with the certainty that these are not to be extended to all the other paragraphs in <p>content within the same web page. To resume the style of the previous example, we said we want a slight indent with justified text, wishing to apply this choice to a single paragraph, the most convenient and fast is to bind the style to only one element in <p> interested. This practical example will clarify better: <p style=”text-align: justify; text-indent: 12px;”>... </p> Everything that will…
Read More
28Apr 2019 by Junior No Comments
CSS syntax

CSS syntax

Tutorials
The syntax We have said that they have their own element (tag) that is specified in the html, this is the element: a <style> with its closing </style>. This element serves to inform the browser that it is styles that make the appropriate changes to the html elements defined within it. The statement of style should be placed inside of the tags <head> and </head> of the web page, the only exception to the definitions directly in the line just where the solo style as an attribute of the tag used (we'll see later on). It is possible to specify the type of style, usually text/css and the media, which device refers to, usually screen or print , respectively, to the screen or printer. Other possible media are: all, braille,…
Read More
22Apr 2019 by Junior No Comments
Print on paper

Print on paper

Tutorials
We have seen how to define the various styli and these are interpreted by the browser that executes the video, you can also customize a sheet style specific to the one print in order to have the margins, font, page breaks, hide parts that should not be printed and so on. To do this, simply create a second sheet in the style to which you assign as an attribute of the parameter-average print instead of screen <link rel=stylesheet href=”nome_stampa.css” type=”text/css” media=”print”> By doing so, the two sheets of the style (screen and print) shall be autonomous and clearly distinguished between them, If we do not want to create a sheet of style for the print only, you can define the parameters even within the same sheet by use of the…
Read More
17Apr 2019 by Junior No Comments
The box model

The box model

Tutorials
After examining the selectors, the time has come to start analysing the CSS properties. First, however, it is necessary to dwell on a fundamental preliminary topic: the box model. This is the mechanism that governs the presentation of the various elements of a page. Let's go back for a moment to lesson 2. We showed there that an HTML page is nothing more than a set of rectangular boxes, whether they are block elements or inline elements. Let's summarize the peculiar characteristics of these two types of elements: Block-level elementsA block-level element can contain other block-level elements and also inline elements, while an inline element can contain only other inline elements.A block-level element can be given dimensions.An unspecified block level element occupies the entire width of its container box between…
Read More
13Apr 2019 by Junior No Comments
The classes

The classes

Tutorials
Classes Whatever our choice, sheet style external or built-in, it is said that it must necessarily redefine all or some of the elements (tags) of the Html, on the contrary, let them also to stay as they are and we create the variations that we may need by making use of the classes. This to use classes is definitely the most comfortable and practical. If you can create how many and how we like and dislike, by doing so you take advantage of all the potential of CSS (sheet styles). It is possible to define, with extreme simplicity of its style classes associated to the same element of the html, will be then these classes to be accessed from the inside of the various elements (tags) of html. Think of…
Read More
09Apr 2019 by Junior No Comments
The CSS in the external sheet

The CSS in the external sheet

Tutorials
Sheet style the outside We have seen how to define a style in line when we need maybe a fast special features bounded to a single area of our document. We have also seen how to define one style at the beginning of the page to which the whole document was a reference and use. Now let's see what is the absolute most comfortable and practical of systems, the one in which there is a external style sheet separate from the web page, that contains all the statements of style, and that is referred to in all the web pages that make up the site. In this sheet, or sheets since they can be more than one, you're going to write all of the styles that we need, including the…
Read More
05Apr 2019 by Junior No Comments
The Parameters

The Parameters

Tutorials
Are those values that must be specified in the attributes and vary depending on the attribute used. In the table below you can see how they can be expressed, and some of them are equivalent, they produce the same result in this case is up to you to decide which one to use according to your tastes, needs and habits. Unit of measure: I used the attribute font-size: example; with the values and the parameters reported in the result column. Unit of measureDescriptionExampleResultcmCmfont-size: 1cm;ResultmmMmfont-size: 7mm;ResultinInchfont-size: 0,25in;ResultptPointsfont-size: 12pt;ResultpcPica(=12 points)font-size: 2pc;ResultpxPixelsfont-size: 25px;ResultemMon. letter mfont-size: 2,5em;ResultexCharacter height xfont-size: 3ex;Result Absolute values: I used the attribute font-size: value; with the values and the parameters reported in the result column. ValueSyntax descriptionResultxx-smallfont-size: xx-small;Resultx-smallfont-size: x-small;Resultsmallfont-size: small;Resultmediumfont-size: medium;Resultlargefont-size: large;Resultx-largefont-size: x-large;Resultxx-largefont-size: xx-large;Result Values: I used the attribute font-size:…
Read More
01Apr 2019 by Junior No Comments
Values and units of measurement in CSS

Values and units of measurement in CSS

Tutorials
We have learned that a CSS property can be set by assigning specific values. In this lesson we will see which are the types of values and the units of measure with which you can define the properties. First of all, however, it is appropriate to explain two fundamental syntactic rules. 1. The values of a property should never be put in quotes. The only exceptions are values expressed by text strings and font names made up of more than one word. An example: /* Express values for the content property   with a text string */ content: "Long live CSS"; /* Font definition Times New Roman */ "Times New Roman", Georgia, serif. 2. When using numerical values with units of measurement, there must be no space between the number and…
Read More