Demo 1: using the * selector to set all margins, padding, border, and box-sizing to a more customizble set
and turning the background black and the font color white by selecting the whole webpage using *
Demo 2: using the .class selector to turn this text green by selecting the div that this contains and using the .class selector
Demo 3: changing the font of this by using font-family on this div via #id or id style selector and class and id are separate things
Demo 4: The first letter of this demo will be 50px big using the ::last-letter selector
Demo 5: When you select any text on this webpage, the text color will change to purple and the background color will be yellowgreen instead
of the normal white text and blue background this is done using the ::selection selector
This is aqua because it is an h2 with a class, and the element.class selector was used which styles an element such as p or h2 if they are in that class
This is not in that class so it stays normal
This is in British english so the color will be red instead via the element:lang style selector
This is in just english so it will be normal
This list has
darkmagenta markers because
The ::marker style selector
Which allows you to style the dots on a unordered list
Or the numbers on a ordered list
The placeholder text is orange because of the ::placeholder style selector which allows for styling of any placeholder
This is normal
This will make the second p purple
This is now purple becuase it is after an h2 and I used the element ~ element and that makes it so an element will be styled after it takes place of another element
Using the :first-child selector this h2 will have a goldenrod background
This h2 is not the first child so it does not get a yellow background