Cascading Style Sheets (CSS) is a powerful tool that can transform the look and feel of your HTML documents. In this unit, we will delve into the core components of CSS: selectors, properties, and values.
Selectors are the part of CSS that allows you to target specific HTML elements and apply styles to them. There are three main types of selectors:
Element Selectors: These target HTML elements based on their element type. For example, p would select all paragraph elements in your HTML document.
Class Selectors: These target HTML elements based on their class attribute. Class selectors are denoted by a period (.) followed by the class name. For example, .intro would select all elements with the class "intro".
ID Selectors: These target a specific HTML element based on its id attribute. ID selectors are denoted by a hash (#) followed by the id name. For example, #header would select the element with the id "header".
Properties are what you use to define the styles in CSS. They are used after the selector to specify how you want to style the selected elements. There are many properties available, each serving a different purpose. Some common properties include:
color: This property sets the text color.font-size: This property sets the size of the text.width and height: These properties set the width and height of an element.background-color: This property sets the background color of an element.Values are assigned to properties to define exactly how the elements should be styled. The type of value you can use depends on the property. For example, the color property can take named colors, hexadecimal colors, RGB colors, and more as its value.
The "C" in CSS stands for "Cascading," which refers to the order of precedence in which styles are applied. If there are two conflicting styles, the browser will use the one that is most specific or comes last in the stylesheet.
Inheritance, on the other hand, is a principle that some CSS property values set on parent elements are inherited by their child elements. For example, if you set the color property on a body element, all text inside the body will be that color unless a different color is specified.
By understanding CSS selectors, properties, and values, you can start to create more complex and visually appealing web pages. Remember to practice using these concepts in your own projects to solidify your understanding.