Whether you work in web development, hybrid applications, or native applications, knowing CSS Basic is very useful. Cascading style sheets are a complement to HTML which allows you to control different aspects related to how objects are displayed on the screen. It could have some grade of difficulty if you lack knowledge and the necessary skills. Therefore, it is recommended to do some research on these style sheets before starting to use them. Here are some CSS basics that every developer should be familiar with.
If you are a native developer using MCSS to build your apps the most cost-effective and fast way, surely you know the importance of CSS in this kind of project, if you have not started using MCSS we recommend you to start now <link to a related article>
How Cascading Style Sheets Work
The operation of cascading style sheets can be summarized as a set of rules that are listed in a file extension ".css", these are responsible for describing what the different HTML elements displayed on the screen will look like.
Note: MCSS accepts extensions .css, .mcss and .mcss.css
An important feature of CSS style sheets is that they can act as a "pattern philosophy" or template. This way, you don't have to specify a style for all HTML elements or components in an application individually, but instead can create rules that will automatically adapt to a certain group of elements. For example:
All titles 1 and 2 will have a font size of 16 and 14 pixels respectively, and their color will be black.
All paragraphs of the text will be justified, with a dark gray color and it will have a size of 12 pixels.
Those familiar with styles in Microsoft Word will see that there is a resemblance to the way they are handled. However, CSS is much more powerful and offers numerous possibilities.
An example of what was just mentioned above would be:
h1, h2 {
colour: black;
font-size: 16px;
}
h2 {
font-size: 14px;
}
p {
colour: rgb(32,32,32);
text-align: left;
}
Basic concepts in CSS
To work with CSS there are certain basic concepts that every developer must know to correctly apply cascading style sheets. These are:
Rules, selectors, and properties in CSS
Three of the main basic concepts in CSS are rules, selectors, and properties. These three work together to determine what each of the components will look like when displayed on the screen.
Rules
The rules represent each of the styles present in the cascading style sheets. These are made up of several parts, the first of which is known as "Selectors" which will be discussed later. This is followed by an opening brace symbol ({), followed by the "declaration block" (combination of property and value), and ending with a closing brace (}).
Properties
The properties, on the other hand, are the components of the rules that determine the properties of a component. For example, “animation‑name”, a property that determines the name of an animation; or the “background‑color” property that indicates the background color of the elements. Each created rule indicates the properties within the "declaration block" in each created rule.
Selectors
As previously mentioned, the selectors make up the first part of a rule, this fulfills the function of delimiting which components will be submitted to the rule. There is a wide variety of selectors in CSS style sheets, which allows programmers to be very precise when applying modifications to the appearance of an application or website. For example, if you want to set a rule that affects all titles and subtitles, the selectors would be h1 and h2.
Inheritance, overriding and style conflicts, cascading elements
The appearance of the word cascade in the name of this HTML plugin is not just a coincidence. This is because when working with CSS, the styles that are specified in a rule can be lethargically inherited. Which is reflected much like a waterfall in the HTML. These cascades contains three basic concepts in CSS mentioned below:
Inheritance
Among the basic concepts in CSS, inheritance is one of the most important that you should know. This is the process of the properties of an element being inherited by its child elements. One of the most common ways of this process is when the font-family property is applied to the <body> element. When this happens, all tags descending from this first <body> tag will inherit the same font without having to apply it individually to each HTML element.
Overwriting
Editing the appearance of HTML with CSS could overwrite properties. It happens when two or more selectors are pointed to a component, being equally specific by modifying the same property. In this case, the last selector defined will take precedence as long as a previous selector does not have a higher execution priority.
Style conflicts
A style conflict occurs when two or more rules are applied to the same HTML element. To resolve conflicts CSS has a complex process. It determines all declarations applied to an element. Then it sorts them according to their origin and priority (You can alter the importance of a specific one with the ! important keyword). It will often order them according to the specifics of the selector of each rule. If after applying these parameters there are still rules that have the same priority level, the last one indicated will be applied.
MCSS presents the same basic concepts as CSS
MCSS is similar to CSS except that it is geared toward developing native mobile applications. Being very dynamic and cost-effective since it allows modifications to be made simultaneously when working with two of the most used mobile operating systems worldwide, iOS and Android. The basic principles used in mobile are basically the same. So any programmer with knowledge of CSS can use MCSS easily.
The most noticeable difference between CSS and MCSS is that the selectors do not obey HTML components but mobile technologies, an example of this would be button{}, switch{} or textview{}
Bibliographic references
· Uniwebsity. Retrieved 05/31/2022 from https://uniwebsidad.com/libros/css/capitulo-2/colisiones-de-estilos
· Ciudadano2cero, Berto López Consutado 05/30/2022 from https://www.ciudadano2cero.com/aprender-css-basico-desde-cero/
· Developer.mozilla Retrieved 05/30/2022 from https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
