Skip to main content

CSS Intro & Specificity

CSS Specificity digest

CSS Intro​

What Happens to CSS when we load up a web page?​

image

Quick Review: CSS Terminology​

image

CSS Specificity​

Cascading Style Sheets and Specificity​

image image image

info

The universal selector * has no specificity value (0, 0, 0, 0);

Text align and Vertical align​

tip

The text-align property in CSS is used to align the inner content of a block element.

  • Content is used here as as term instead of text, because while text-align certainly affects text, it affects all inline or inline-block elements in that container(container will be block element such as paragraphs <p>...</p>, divs <div>...</div>, sections <section>...</section>, articles <article>...</article>, and so on..).

  • This alignment affects the horizontal axis only. So the text-align property is different from the vertical-align property which we use to set the vertical alignment of an element.

tip

You can also use the vertical-align property to center inline, inline-block, or table cell elements vertically.

  • One of the many applications for this approach is to vertically align an image with text or to vertically align the content of a table cell.
.element {
  display: inline-block;
  vertical-align: middle;
}

Box Shadow​

.package {
  box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
  1. box-shadow - CSS-Tricks
  2. Box Shadow - Generator

GitHub Repo​