CSS Selectors and Properties

Define Selectors and Properties

Selectors: Selectors are used when a specific element on the DOM that you would like to style. There are at least 60 selectors and 5 combinators. In most cases, elements that contain texts.

Properties: Properties are elements that you specifically want to style using numerous values. Useful for learning more ways to add more complex design, styles and animations to your webpages.

Selectors

First line Selector: With the first-line selector, you can use this to style the first line of an element. The amount of text targeted all depends on several properties such as line length, viewport width, font-size, letter-spacing and word-spacing.

Link to first-line Resource Page

With the "::backdrop" selector, you can create and activate a background image that can clear your entire screen. This would be considered an event, as the user clicks on a button or link and this allows some dialog and an image to pop up. This selector includes a little bit of javascript but is very cool and sounds like it could be fun to get creative with.

Link to ::backdrop Resource Page

You entered the backdrop window! 😀

Check out the cats wearing a monocle and headphones

Properties

Initial Letter Property: This is used to style the first letter of an element wherever it is applied and will specify how many number of lines the letter will cover. I have definetly seen this used before on other websites, specifically when a webpage has a story or important documentation. This is super cool and look foward to using this at some point.

Link to inital-letter Resource Page

Scrollbar-Color: This property is super cool and fun and allows you to style the thumb color and the track color. With this you can style the scroll bar to match your design without having to redo browser functionality and use vendor prefixes. Of course, I had to try it on this page, super fun!

Link to scrollbar-color Resource Page