Working with Selectors, Properties, and Values

Working with Selectors, Properties, and Values
siteground placeholder image

When you style your HTML page, you need to tell CSS where and how to apply those styles. After all, just because you want headers to be blue doesn't mean you also want paragraphs to be blue. You can select which elements you want styled a certain way using selectors.

Selectors

In our previous lesson, you actually already saw the use of two selectors, where we styled our h2 tags to be green and our p tags to be red.

As a quick refresher, it looked something like this:

	
	h2 {
		color: green;
	}

	p {
		color: red;
	}
	

As you might already guess, the selectors in this case are h2 and p. Our selectors targeted the HTML tags themselves, but you can also target elements based on their class and ID.

In general, selectors tell the browser what elements it should be applying the following styles to. Here is how you can target elements with the class name of dog and an ID of fluffy:

	
	.dog {
		color: green;
	}

	#fluffy {
		color: red;
	}
	

You target a class by prepending the name of it with a period, and an ID by prepending the name of it with a hash symbol.

Attribute Selectors

Recall that HTML elements can have attributes on them. Well, CSS provides a way to target those elements too. All you need to do is append the attribute inside square brackets, like so:

	
	a[href] {
		color: purple;
	}
	

This will turn all a tags that contain an href attribute the color purple.

Now what if you want to target elements that contain a specific value for a certain attribute? Simply append the value of the attribute right next to it.

Let's say you want to target all number inputs:

	
	<input type="number">
	

You can make your selector look like this:

	
	input[type="number"] {
		width: 10rem;
	}
	

Also feel free to target multiple attributes, like so:

	
	input[type="number"][type="text"] {
		width: 10rem;
	}
	

Properties and Values

After you've declared what you are going to target via selectors, what follows are the styles themselves.

A single line of CSS consists of two things, a property and a value. So far we have seen how we set the color of text of something:

	
	color: black;
	

The property here is color and the value is black. Simple enough, right?

udemy2 placeholder image

Lengths

For so many CSS properties like font-size, line-height, margin, padding, just to name a few, you will have the option to give a value which represents a length.

A length can be expressed with a number followed by a unit, and you have the option of using absolute or relative units.

Absolute Lengths

Absolute lengths are those that do not change. These are all the absolute length units:

  • px: the unit for pixels
  • pt: the unit for points
  • cm: the unit for centimeters
  • mm: the unit for millimeters
  • in: the unit for inches
  • pc: the unit for picas

Relative Lengths

Relative lengths are lengths that change relative to something else. Here are all the units for relative lengths:

  • %: the unit for percentages
  • em: relative to the current font size
  • rem: relative to the current font size on the html element
  • vw: relative to the width of the viewport divided by 100
  • vh: relative to the height of the viewport divided by 100
  • vmin: relative to the smaller viewport's dimension divided by 100
  • vmax: relative to the larger viewport's dimension divided by 100
  • ch: relative to 0
  • ex: relative to the x-height of font

In reality, you're only going to use a couple of these, like px, rem or %. This is a great tool to help you convert between some of the more popular units.

Recap

Here is a quick refresher on some of the terms covered here:

Selector: telling CSS which elements to style.

Property: telling CSS what you are changing.

Value: telling CSS to how you want that element to change.

Thumbs up to you!
Thumbs up to you!