8.7. Introduction to CSS: selectors, properties and values: Introduction to values ​​in CSS

CSS (Cascading Style Sheets) is a style language used to describe the appearance and formatting of a document written in HTML. It is mainly used to add style to web pages and user interfaces written in HTML and XHTML. In this section, we will focus on selectors, properties, and values ​​in CSS.

CSS Selectors

CSS selectors are the part of CSS that selects the HTML element you want to style. There are several types of selectors in CSS, including type selectors, class selectors, ID selectors, attribute selectors, pseudo-class selectors, and pseudo-element selectors.

Type selectors select elements based on their HTML tag name. For example, the type selector 'p' selects all elements <p> on one page.

Class selectors select elements based on the value of the class attribute. For example, the class selector '.intro' selects all elements that have 'intro' as the value of their class attribute.

ID selectors select an element based on the value of the ID attribute. For example, the ID selector '#name' selects the element that has 'name' as the value of its ID attribute.

CSS Properties

CSS properties are what you want to style in the selected element. These can be things like color, font size, spacing, border, etc. Each property has a name and a value, separated by a colon. For example, 'color: red;' is a CSS property declaration, where 'color' is the property name and 'red' is the value.

There are hundreds of CSS properties, each with its own set of possible values. Some properties are specific to certain element types, while others can be used on any element type.

CSS Values

CSS values ​​are the specific details you want to apply to the property. For example, if you are using the 'color' property, the values ​​could be 'red', 'blue', 'green', etc. If you are using the 'font-size' property, the values ​​could be '12px', '14px', '16px', etc.

Values ​​can be numbers, colors, percentages, URLs, among other things. They can also be relative or absolute values. An absolute value is a fixed value, such as '12px'. A relative value is a value that is relative to something else, like '50%'.

Also, there are some special keywords that can be used as values, such as 'inherit', 'initial' and 'unset'. 'Inherit' causes the element to inherit the value of its parent element. 'Initial' sets the property to its initial value. 'Unset' is a combination of 'inherit' and 'initial'.

In summary, selectors, properties, and values ​​in CSS are powerful tools that allow you to style your HTML documents in very flexible and detailed ways. With a good understanding of how they work, you can create stunning and effective web designs.

Next page of the Free Ebook:

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

3 minutes