8. Introduction to CSS: selectors, properties and values

Chapter 8: Introduction to CSS: selectors, properties and values

For a website to be visually attractive and functional, it requires more than just HTML. This is where CSS (Cascading Style Sheets) comes into play. CSS is a styling language used to describe the appearance and formatting of a document written in HTML. It is fundamental to web development and is used to define colors, fonts, layout and more.

CSS Selectors

CSS selectors are the part of CSS that selects the HTML element you want to style. There are several types of selectors, but we will focus on the most common: element, class and ID selectors.

• Element Selectors: They select elements based on the name of the HTML element. For example, if we want to style all paragraphs (<p>) in our document, we will use the element selector. Example: p {color: red;}
• Class Selectors: They select elements based on the class attribute of the HTML element. Classes are useful when you want to create CSS styling that can be reused. Example: .myClass {font-size: 20px;}
• ID Selectors: They select elements based on the ID attribute of the HTML element. IDs are unique and should be used when you want to style a single element. Example: #myID {background-color: blue;}

CSS Properties

CSS properties are what you want to style in the selected element. For example, you may want to change the background color, font, font color, spacing, margin, border, and more. Each property has a name and is followed by a colon and a value. For example: p {color: red;} - 'color' is the property and 'red' is the value.

CSS Values

CSS values ​​are the adjustments you make to the chosen property. In the previous example, 'red' is the value we assigned to the 'color' property. Values ​​can be keywords such as 'red', 'blue', 'green', numbers, percentages, and a wide range of other options depending on the property you are styling.

Conclusion

Understanding CSS selectors, properties, and values ​​is critical to becoming an effective front-end developer. They are the foundation for creating visually appealing and functional websites. In the next chapter, we'll explore CSS deeper, learning about the CSS box model, positioning, animations, and more.

Next page of the Free Ebook:

44Introduction to CSS: selectors, properties and values: Introduction to CSS

3 minutes