CSS Selectors, Properties and Values

CSS is a style sheet used to style HTML elements carefully. Besides interacting with HTML elements for styling, CSS controls the feel, topography, box models, screen/device adaptation, and general layout of a web page.

CSS has a basic syntax. It consists of a selector, property, a value, followed by a declaration block.

p { 
  color: blue; 
  text-transform: uppercase; 
}

In the above code snippet, p (paragraph) is a selector pointing to the HTML element that needs to be styled. Color and text-transform are properties. Blue and uppercase are values of the property. The declaration block for p starts at the first curly braces - '{' and ends at the second curly braces '}'. Each declaration must include property and a value and is separated from other declarations by a semi-colon.

CSS SELECTORS

A selector is simply the element to be styled. But as you write more CSS code, you'll discover that selectors aren't just elements. They could be attributes, pseudo-classes, ids, classes, and descendants.
According to W3resource, "CSS selectors select the elements on an HTML page which match patterns described in a selector and style rules adhere to the selector are applied on those selected elements".
This section will look at the different selectors in CSS and how you can implement them.
The syntax for using any of the selectors is the same as CSS basic syntax.

Universal Selector

A universal selector is denoted by the symbol *. It affects every single element on the document tree.

*{ 
  color: purple; 
}

This changes the color of all HTML document elements to purple, be it a paragraph, an h1, h4, or a list. * are also used to target all values of a particular element.

*h1 { 
  text-transform: uppercase; 
}

This will change the value of all h1 elements only to uppercase. No other element will be affected.

Element Selectors

This is the most common selector, and it involves targeting members of a particular element when that element is defined.

p{ 
  font-style: italic; 
}

This code targets all paragraphs in a document and changes them to italics.

Classes and IDs

Classes and IDs are defined in the HTML and earmarked in the CSS using '.' (for classes) and '#' (for IDs). They target HTML elements with specific class or ID names.

<p> This is a paragraph </p> 
<p class="red"> This is a red text </p> 
<h4 id="uppercase"> This is an uppercase text </p> 

.red { 
  color: red; 
} 
 
#uppercase{ 
  text-transform: uppercase; 
}

The <p> tag without a class or id assigned to it will not be affected by the class or id selectors.

Descendant Selectors

A descendant selector is a selector that is a child of another selector.

nav > li { 
  list-style: none; 
}

Pseudo-Classes

These are classes that are based on their state. Their state is also a response to user actions. Pseudo-classes do not stand alone on their own. They are attached to other selectors, followed immediately by a colon, then state. Hover, visited, before and active are common pseudo-classes.

a:hover{ 
  color: green; 
}

CSS PROPERTIES

CSS properties are the styles used on specified selectors. They are written before values in the CSS ruleset and are separated from property values by a colon. Different HTML selectors and elements have different properties. Some properties are universal and can be used on every selector. Others work only on specific selectors and under particular conditions.
An example of that is grid-template-columns, which is used to style the layout of a page. It works mainly with divs with their display property set to the grid (display: grid).
There are many properties and their values for HTML selectors. According to CSS Tricks, there are "520 distinct property names from 66 technical reports and 66 editor's drafts".

Here are four common properties to work with

• List properties
• Font properties
• Border properties
• Text properties

These properties are common because they are frequently used in all CSS documents and can be applied to different selectors. One unique thing about properties is that they have more than one value attached to them. Text-transform, for example, a property that controls a text's capitalization, can be set to uppercase, lowercase, capitalize, or none. But this also poses a restraint. You must specify a value to the right property else nothing happens. If we have 'text-transform: underline;' nothing will change on the text part because underline is a value for text-decoration.
Below are some properties, their descriptions, and the values they accommodate.

Text Properties

Border Properties

Font Properties

List Properties

We cannot cover all the CSS properties here because it is quite broad, but you can find an extensive list covering properties, their values, and CSS versions here at meiert.com. W3schools also has a CSS reference that covers properties, their descriptions, and values here.

CSS VALUES

Values are written immediately after the colon that separates them from CSS properties. CSS values aren't just text; they come in different forms - URLs, units, measurements, integers, strings, inherit, auto, none, etc. We will look at different CSS values and how to implement them.

Text

Text values are prevalent in CSS. They are usually written without quotes, unlike strings. Every valid CSS property has a text as a value. Margin takes units as values, but it also has auto, which in this case, is taken as text.

h1 { 
  color: red; 
  text-align: center; 
}

Red and center are text values of color and text-align.

Integers

Integers are numbers from one to zero or zero to nine. Some CSS properties make allowance for their values to be defined as integers, even negative integers. The values for properties like column-count and z-index are defined using integers.

div { 
  column-count: 4; 
}
div { 
  z-index: -1; 
}

Units/Measurements

Because CSS must be used to position items on a web page, general layout, and media queries, many properties take units and measurements as their value. There are many property-specific units for CSS values, but available units like px, em, fr and percentages are standard.

h3 { 
  font-size: 24px; 
}
div{ 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
}
div { 
  width: 100%; 
  font-size: 2em; 
}

URLs

Properties like background-image take an actual URL as their value. This URL could be absolute or relative. Meaning, you could copy the address of an image online and use it as your background image, or you could get images from the project directory/folder you are working with on your computer.

div{ 
  background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"); 
}
div{ 
  background-image: url("./Images/landscape.jpg"); 
}

Strings

Strings are text within quotes. The content property which you can use to insert generated content allows strings within its parameter.

.div :: after { 
  content: "This is me"; 
}

Colors

The color/background-colors are properties used to set the color of HTML elements. Their values accept either a hexadecimal color combination value, an RGB specification, or a defined color.

h2 { 
  color: red; 
}
div{ 
  background-color: #000000; 
}

Auto, None, Inherit

Auto, None, and Inherit are keywords values in CSS. Auto value allows the property to fill or adjust according to the content of the element.

div { 
  width: auto;
  margin: auto; 
}

None adds no value to the specified property.

div{ 
  border: none; 
}

Inherit keyword allows the property to inherit the same value from the parent element. All CSS properties accept inherit.

<div> 
  <p> this is me </p> 
  <p id="pickme"> this is not me </p> 
</div> 

p{
  color: red; 
} 
#pickme p { 
  color: inherit; 
}

Although all the examples above are of properties with one value, CSS values can have more than one value, and you can manipulate it to write shorthand. Shorthand in CSS is a shorter, more compact way of setting values for similar but multiple properties.

These values,

div{ 
  border-style: solid; 
  border-color: red; 
  border-width: 5px; 
}

can be rewritten in shorthand as

div{ 
  border: 5px solid red; 
}

Other properties with multiple values include, but not limited to

margin: 1px 3px 6px 2px; /* defining the top, left, bottom and left of a margin */
font: italic small-caps bold 12px Georgia, serif; /*defining font-style, font-variant-caps, font-weight, font-size, and font-family. */
box-shadow: 5px 2px 8px #aaaaaa; /* defining the horizontal offset, vertical offset, blur, and color values */

CONCLUSION

The simplicity and consistency of the CSS ruleset make it easier to remember it's syntax and application no matter the used selector. But newbie web developers usually get overwhelmed by the sheer number of properties and values they must remember, often confusing one property's values for another. Having a stylesheet guide or reference handy sure helps. As a developer also keeps coding, it becomes easier to remember the basic properties and values.