Basic CSS Properties

Anatomy of a CSS rule

Rules - an individual block of CSS that instructs the browser on how to style the page

• Selector - indicates which HTML element will be styled
• Declaration - a statement that tells the browser what to do with the elements
  • Property - the characteristic of the element that will be changed
  • Value - the new value of the property

Styling by HTML tag

The following CSS rule will make the text of all paragraphs in the page red.

p {
  color: red;
}

Styling by attribute

In the following CSS rule, if an image has an alt text, it will have a red border.

img[alt] {
  border: 3px solid red;
}

We can reverse this by adding the :not() pseudo-class. In this next example, the image with no alt text will have a red border.

img:not([alt]) {
  border: 3px solid red;
}

Styling by class

We can add the class attribute to any HTML tag and add any word we like. We can then use that class to style the element.

<p class="red-text">
  We will grow our capability to upgrade. Is it more important for something to
  be dynamic or to be customer-directed? What does the term 'short-term' really
  mean?
</p>

<p>
  Have you ever needed to maximize your feature set? In one step? What do we
  incubate? Anything and everything, regardless of obscureness! Our feature set
  is unparalleled, but our raw bandwidth and easy operation is invariably
  considered a remarkable achievement.
</p>

.red-text {
  color: red;
}

We can use multiple different classes in a single HTML tag, like in the next example

<h3 class="fg-white bg-purple">White text on purple background</h3>

.fg-white {
  color: white;
}

.bg-purple {
  background-color: purple;
}