Selectors and Properties
Selectors and properties are some of the fundamental building blocks of CSS code. All CSS code is broken up into rules, with 2 of them being Selectors and Properties. Selectors are the beginning portion of a css rule, and are effectively the identifier of the rule. They tell the rest of the rule what HTML elements are being affected by specific code. The second part are Properties. Properties are the type of variable that defines how the CSS Code operates. They set exactly what part of the css is being affected.
Selectors
- Class Selectors
- Attribute Selectors
Class selectors are selectors that are newly named in within css code, and then can be added onto the end of an element. For example, you could have a paragraph or section element on a page, and just add within the brackets "Class=[class name]".
source
Attribute selectors are selectors that can either match existing elements in HTML code, or they can be modified to affect only very specific parts of HTML elements. For example, an attribute selector could be for a paragraph element, or it could be something along the lines of "p='value'", which compares all paragraph elements, and only affects the ones that match the value.
source
Properties
- Background Property
- Justify-content Property
The Background property involves the area behind and immediately around the area of a given element. It's known as a shorthand property, meaning you can expand the property name with additions, such as -image, -size, -repeat, etc.
source
Justify-content is actually a sub-property, meaning that another property needs to be present before it can have any effect. The main property, flex, is what changes the positioning of elements that are grouped together, and Justify-content is designed to determine how the flexed elements are aligned. The types are: start, end, center, space-between, and space-around.
source
Summary
In summary, we discussed Selectors and Properties. Selectors identify the specific element to be styled, and Properties define how the element is styled. We talkd about Class and Attribute selectors, which either select a unique class name that can be added onto an element, or select a specific type of element itself. We also talked about Background properties, which affect the background space behind a given element, and Justify-content, which aligns elements being affected by a parent Flex property.