css - worknrby

Not everyone is familiar with CSS like a designer, developer or SEO. Even after CSS is one of the most important languages, only a few people have sufficient knowledge of it.

It doesn’t matter if you are a human resource manager or an expert in mathematical languages, knowledge of this simple language can always work in your favor. Without spending further time on how important it is for you to know this language, let’s begin with some terms you should be familiar with:

1. Style Rules:

This is used for determining the styles used in a particular document. Each style rule has a selector and declaration.

Selectors

The selector is used for defining the elements to which a set of rules is applied. There are different types of selectors: simple, compound, complex selector.

Simple Selector: A single condition on an element

**image

Following are some types of the simple selector with their examples:

  • Type selector: E.g. <div>
  • Universal selector: E.g. *
  • Attribute selector: E.g. [target=”_blank”]
  • Class selector: E.g. .buttons
  • ID selector: E.g. #firstbutton
  • Pseudo-class: E.g. div:hover

Compound Selector: The condition which has more than one simple selector without being separated by a combinator.

**image

Complex Selector: The condition under which more than one simple selector is used and separated by a combinator.

**image

Following are some types of the simple selector with their examples:

  • Descendant Combinator (a.k.a whitespace): E.g. div .background
  • Child Combinator: E.g. div > p
  • Next Sibling Combinator: E.g. p + img
  • Subsequent Sibling Combinator: E.g. ul ~ .myclass

Selector List: This is a comma-separated list of the simple, compound or complex selectors

**image

An element is said to match a selector list only if it matches up at least one of the selectors in that selector list. It eases our work responsibility by applying the same style on different selectors without repetition.

Declaration:

Better known as another half of style rule; Declaration.

These commands are written inside curly brackets. It’s 3 main attributes are:

  • Property
  • Value: list of all the component values
  • Important Flag: This is unset at first.

Declarations are supposed to end with a semi-colon or “; “.

**image

Declarations can hold more than one property.

**image

Conflicting Style Rules:

This is the condition when conflicting style rules are applied to the same element. Here, Order and Specificity are used to determine which style rule takes preference.

Last Rule: This term implies that when there is a condition of identical selectors then the style which is placed later in the stylesheet will take the preference.

**image

In the example above, the background color for <div> will be blue.

Specificity:

This determiner says that whichever selector has higher specificity will take precedence on all the selectors. ID selectors take precedence over class selectors, attributes and pseudo-classes. In general, the latter takes precedence over type selectors and pseudo-elements.

**image

In the given example, the background color of the <div>, the class of mydiv and the ID firstdiv will be green. The placement of selectors won’t matter because the ID selector is present it will take precedence.

Here are some ways to feed your curiosity on how to calculate a selector’s specificity:

  • To count the number of ID selectors in a particular selector: (=a)
  • To count the number of class and attributes selector and pseudo-classes in a selector: (=b)
  • To count the number of type of selectors and pseudo-elements: (=c)

When you link all the three into a chain a-b-c, you will be shown the specificity.

**image

Important Flag:

As understood by the term; the purpose is clear that it is used when a declaration needs to be highlighted to given extra attention.

But the use of this declaration should be least to zero because it breaks natural cascading in the stylesheet which leads to difficulties in the debugging process.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.