Programming

What is CSS in HTML – What is CSS? Main function of this tool

What is CSS ? Come and find out in this interesting article. CSS was born to forever change the concept of design and functionality of web pages. what is css in html

What is CSS ? what is css in html

What is CSS in HTML
What is CSS in HTML

It is a style language designed to define the visual aspects of electronic elements created using HTML and XHTML, such as: color, size, appearance, etc. Basically, it tries to compensate for the design limitations and complexity of HTML.

Not always the styles incorporated in each of the parts of a web page satisfy the designer’s requirements. However, CSS is the best way to change the way elements are viewed on screen, since it separates the content and the presentation.

On the other hand, CSS allows the creation of well-defined documents, with complete meaning, but less complex, easily accessible and easy to maintain. In addition, it allows these documents to be viewed from any medium or device.

Ways to include CSS in HTML

Due to the flexibility of CSS, the designer can choose how they want to include style sheets in HTML documents. These are:

  • In the same HTML document: It is ideal when you have few styles defined or when you want to include complementary styles in a specific HTML page. It is achieved by using the <style> tag and can only be placed in the header of the document. what is css in html
  • In an external file: Through the <link> tag, through a simple CSS file, styles are linked to the HTML pages. The CSS file contains all the styles that are going to be included and the page allows the link of all the files that are needed. The same file can be included in several pages at the same time, which guarantees the homogeneity of the content in all of them. It is the most widely used form today.
  • In HTML elements: It requires defining the style of each element separately, which makes it the least used method by HTML designers. It is used only to include a very specific style corresponding to a single element within the document.

Evolution what is css in html

What is CSS in HTML
What is CSS in HTML

Its birth is due to the rise of the internet and the expansion of the HTML language for the development of electronic documents. In principle, there were no standards for editing this type of document, which made it necessary to create a sheet language that would allow different styles to be applied consistently.

CSS made its formal appearance in 1995, product of the union of the CHSS and the SSP, proposals presented to the World Wide Web Consortium (W3C), in its quest to achieve the standardization of a language of stylesheets for languages HTML.

A year later, the W3C released its first official recommendation, called CSS level 1. However, in 1997 it decided to separate the CSS work from the DOM and HTML work. So in 1998, the CSS working group released its first separate suggestion, which it called CSS level 2. what is css in html

Almost ten years later, in 2007, the last known update to CSS level 2 was made, called CSS 2.1. In fact, this version is the one that continues to be used in browsers today.

It is known that in parallel, the W3C has been developing what would be the CSS level 3 recommendation. However, although some elements have been incorporated into the browsers, there is still nothing official about it. what is css in html

It is also known that the adaptation by the browsers, who are in charge of interpreting the HTML and CSS code so that the images are displayed through their engine, has not been easy. So much so that the first version of full support for CSS was published in 2000. It referred to CSS level 1 and belonged to the Internet Explorer 5 browser for Mac. To date, no browser provides advanced support for CSS 2.1.

In this regard, it appears that at present, the Safari and Opera browsers are the ones that come closest to the desired support for CSS, as they include some aspects belonging to the unfinished CSS 3 revision, and provide almost perfect support for version 2.1. They are followed by Firefox and Google Chrome, but their support for version 3 is still less advanced. what is css in html

For its part, Internet Explorer up to version 6 presented marked deficiencies in the support required by CSS 2.1. what is css in html

How does CSS work?

Basically, when developing a web page using the HTML and HTML languages, the contents and functions of each element within the page are defined. Subsequently, through the CSS language the visual aspect of each element is established, for example: type and font size of the text, separation between paragraphs, position of the elements, etc.

features

CSS is a language whose use has exploded among web designers. This thanks to its incredible benefits, among them are:

  • It is flexible, offering various alternatives to perform the same task. This generates three ways to include CSS in an electronic HTML document: in the document itself, in an external file, and within HTML elements.
  • Different styles can be defined for various media, including: projectors, screens, monitors, and mobile devices, etc.
  • Defines specific properties for certain media, allowing you to modify the style of a page depending on the functionality of the device. This causes the existence of four rules to establish the media to which the CSS styles will be applied: @media, @import, <Link> tag, and the one referring to the mixture of various media. what is css in html
  • When the value of a property is set on an element, all descendants of that element inherit the same value.

Elements

CSS sheet styles are made up of the following basic elements:

  • Rule: It constitutes each of the styles belonging to a CSS style sheet. In turn, it is made up of selectors and declarations.
  • Selector: Refers to the HTML element on which the style will be applied. what is css in html
  • Declaration: This is the specification of styles applied to the elements. It can contain one or more properties. Through the statements, it is made clear what needs to be done.
  • Property: It makes it possible to modify the appearance of one or more elements.
  • Value: It is the result of the modification of the characteristics of the elements. what is css in html

Generally, a CSS file contains several styles, each of which can contain a large number of elements. Similarly, a style specification can contain various property / value combinations.

Selectors

The selectors are necessary for the creation of web pages, since they are the ones who indicate to which element the CSS style must be applied. They guarantee the correct way to do it, allowing the exact selection of the elements within a web page.

Despite the existence of several types of selectors, the five main ones will be named below: what is css in html

  • Universal: It is identified by an asterisk. It selects all the elements of a page, which makes it a selector of little use, since it is not frequent that the same style needs to be applied to all the elements of the page.
  • Of type or tag: It is used when the HTML tag of the elements of the page matches the value of the selector. For its use, it is only required to indicate the name of the label associated with the element that is being selected. Generally, it is applied in paragraph type elements. what is css in html
  • Descending: Refers to the selection of elements that are between the opening and closing tags of other elements. That is, it selects elements that are inside other elements, to which different CSS styles can be applied, as long as they are of the same type. Ensures the accuracy of type or label selectors.
  • Class: Solve the selection limitations of the three previous types of selectors, since it allows applying styles to a single element of the page, by directly identifying the rule. They are very useful in complex page design, since the same value of the class attribute can be included in several elements of the same page.
  • From ID: Improves the efficiency of the class selector in applying styles to a single element on a page. It works when you want to select an element through its id attribute. The value of this attribute cannot be repeated in more than one element on the same page. what is css in html

It is important to note that CSS allows the use of various combinations, starting from these basic selectors.

Properties

As already mentioned, properties allow you to design the appearance of HTML pages. Among the main techniques are:

  • Shortland: It is used by all web designers. It allows you to create more concise and easy-to-read style sheets, because through it you can set the value of different properties at the same time. what is css in html
  • HasLayout for Internet Explorer: It is basically a CSS-related bug fixer, which relies on both browser features and other existing bugs. what is css in html
  • Clean float: It allows correcting the problems caused by floating elements, forcing the height of the container elements. what is css in html
  • Elements of the same height: It tries that all the columns of a page are of the same height. It is based on the use of the display property of CSS.
  • Typography: These are techniques that guarantee that users see correctly the typeface used in the design of the page, regardless of the font used. what is css in html

Definition of means what is css in html

The main devices considered for the application of CSS style sheets are: printers, screens, projectors, televisions, mobile devices, among others. For each of them there is a specific description that allows the definition of the style. The most used are screen, to establish the appearance of the document on the screen; print, referring to the appearance of the document in terms of printing; and handheld, oriented towards viewing documents on mobile devices. what is css in html

Now, as we mentioned earlier, CSS allows modifying the style of a document depending on the functionality of the medium, or device, used to display it. In this way, there are the following media definition rules: what is css in html

  • @Media style: Allows you to quickly and directly identify the medium to which the style that makes up the rule will be applied. The name of this is written immediately after @media. If there are several media for the same style, the names of all are written, separated by commas. An example of this type of definition is: @media screen {body {font – size: 13px}}, which means that the display size of the font on the screen must be 13 pixels. what is css in html
  • @import: Used when linking external files to HTML documents. To do this, after typing @import, the URL of the CSS file is defined, followed by the name of the medium to which the style is going to be applied. For example: @import url (“printer_styles.css”) print. This means that when the document is printed, the styles included in the external CSS file must be loaded. For multiple media, their names must be separated by commas. If the media is not specified in the rule, the browser understands that the style must be applied to all media equally. what is css in html
  • <link>: It is also used when you want to include styles linked through various external CSS files. Its structure is a bit more complicated, as it requires the inclusion of the media attribute for each of the styles in each file. Its basic form is as follows: <link rel = “stylesheet” type = “text / css” media = “screen” href = “basic.css” />. Which indicates that when the document is viewed through a screen, the styles included in the CSS file should be considered. what is css in html
  • Mixing of methods: Basically, it allows the definition of means through the combination of any of the three previous ways. <actual link = ”stylesheet” type = ”text / css” media = ”screen” href = ”basic.css” /> @import url (“styles_section.css”) screen; @media print {/ * Printer specific styles * /}. This means that the styles that are displayed on the screen come from a file linked with the <link> tag and included in the @import rule. Additionally, the print style is defined by the @media rule.what is css in html 

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button