Selectors and Properties

CSS selectors are used to target elements for styling. Using selectors allows a developer to style specific elements individually. Properties are the components of an element you are styling. Properties are used to chose what part of an element you are styling such as color or size.

Selectors

The selector I most often use is the class selector. The class selector allows you to create custom selectors when you want to target a specific element without styling other elements of the same type. For example, if I want the second h2 on my page to have a different color than the rest, I could use >h1 class=second-heading< to target that h2. I can then set the color in my style sheet by declaring .second-heading {color: white;} One of my favorite selector type is for styling links. These are called pseudo classes which are indicated by a double colon in front of the selector. There are 5 selectors for links: link, visited, hover, focus, and active. My personal favorite to style is the ::hover selector which allows you to style and add effects when hovering over a link or element. When using selector for links it is very important to follow the order to ensure link styling is applied. It is also important to note there are limitations when styling links and that you have to follow the guidelines. It is also a good practice to ensure you follow accessibility guidelines.

Properties

The line-height property is used to set the vertical spacing of lines of text. This is a very useful property to ensure your content is not too compressed or too spaced out. By default line height is set to 1 but you can go up or down in size to adjust spacing to your liking. Unlike many other properties the value for line-height is just a number and not in pixels. Another property that I use often is Box-shadow which allows you to set a shadow behind an element. This is a fun way to create unique, eye-catching designs. Within the box-shadow property you will have to set the values for the horizontal and vertical offsets, the blur radius, optionally the spread radius, and the color. I like this property because of the flexibility of the design, you can create countless variations to highlight elements.

Summary

Selectors and properties are fundamental to CSS styling. They allow you to apply your own customization with as specific or general targets as needed. Class and ID selectors allow a ton of flexibility and specificity to your website styling.