CSS-tricks

CSS-tricks

Selectors + Properties

Selectors and properties each have there own purpose in CSS. Selectors use patterns to select elements in the document object model(DOM) and target certain elements that need attention. Properties basically style the elements within a webpage through various values that are chosen by the developer.


Selectors :first-child / placeholder

The :first-child selector allows you to target the first element immediately inside another element.

The placeholder pseudo-element is a selector that allows you to style the plaeholder text of the form element. Used primarily for input fields to let the user know what they are requesting.


Properties: grid / flex

The grid CSS property is a shorthand that allows you to set all the implicit and the explicit grid properties in a single declaration. Grid is a form of layout in CSS that allows the designer to place elements in specific areas on a webpage. Ultimately allowing unlimited design configurations.

The box-sizing property controls how the box model is operated for the element that it is applied. The property is often used at the beginning of the css declaration style file as a universal declaration to treat all elements on the page(s), psuedo elements as well. This is called "universal box-sizing"...they have a special awareness day for this as well...must be a geek thing! Border-box is an easier, more popular, and common value as height and width are applied to the content, padding, and border to make it easier on all the math involved


SUMMARY

Selectors and properties manipulate and style a webpage using declarations with values to customize a website, so you only pay for what you need! Thank you Liberty Mutual for that! Seriously folks, designing your website using selectors and properties is what gives it 'feeling' and drives emotions experienced by the user.