8.8. Introduction to CSS: selectors, properties and values: Different types of values ​​in CSS: Colors, Sizes and Units

Página 51

Introduction to CSS: Selectors, Properties and Values

CSS (Cascading Style Sheets) is a style language used to describe the appearance of a document written in HTML. It provides a more efficient and sophisticated way to style web pages, allowing developers to control the layout and appearance of multiple elements on a page simultaneously.

Selectors, Properties and Values ​​in CSS

Selectors are the part of CSS that selects the HTML element you want to style. Once an element is selected, you can apply different properties to it. Properties are the characteristics of the element that you want to change, such as color, size, and position. Values ​​are the specific settings you give to these properties.

Different Types of Values ​​in CSS

There are many different types of values ​​you can use in CSS, including colors, sizes, and units. Let's explore each of them in detail.

Colors

Colors in CSS can be specified in several ways. The most common way is to use predefined color names such as "red", "green" or "blue". However, this limits you to a fixed set of colors. To have more control over the exact color, you can use RGB values, which represent the amount of red, green, and blue in the color. You can also use hexadecimal values, which are a hexadecimal representation of RGB values. Additionally, CSS3 introduced HSL values, which represent hue, saturation, and lightness.

Sizes and Units

Sizes in CSS are generally specified in units of measurement. The most commonly used units of measurement are pixels (px), percentages (%), and ems (em). Pixels are a fixed unit of measurement that does not change based on screen size or user configuration. Percentages are relative to the size of the parent element. Ems are relative to the font size of the parent element.

In addition, there are several other units of measurement available in CSS, including points (pt), pica (pc), ex (ex), rem (rem), viewport width (vw), viewport height (vh), viewport minimum (vmin) and viewport maximum (vmax).

Choosing the right unit of measurement is crucial for creating responsive designs that work well on a variety of screen sizes and devices.

Conclusion

Understanding the concepts of selectors, properties and values ​​in CSS is fundamental to becoming an effective front-end developer. We hope this introduction has given you a good foundation to start exploring the world of CSS. Remember, practice is the key to becoming proficient in any programming language, so keep experimenting and learning.

Next page of the Free Ebook:

528.9. Introduction to CSS: selectors, properties and values: How to apply values ​​to CSS properties