Mastering Cascading Style Sheet – Structuring Your Code – Specificity and Inheritance

mastering css3

Sharing is caring!

The world we inhabit today, is full of things we never imagine we would see, because of all the technology we enjoy; with the advances, we have seen in technology, we can confidently say, that our society is enjoying things we could only see in the movies.

In today’s article, we are going to talk about CSS3, in particularly about adding specificity in a stylesheet, adding a class or an ID to the body class and inheritance

When writing CSS, specificity allows a front-end web designer, to set general styles, for common elements, and then override them for more specific elements; therefore, making specificity very useful to front-end web designers.

Specificity comes in handy when you have several contact forms on your website, and you want to give each form their own styles

A front-end web designer, can easily target both contact forms, with a class name or an ID, this way #formcontact1 {styles…}, # formcontact2 {styles…}; on this example we are using a class names, to target the form elements.

If another form is created, the same class or ID name can be used, and styles don’t have to be written for the new form, because the styles have been created already, and will follow the same format of the other forms.

As a front-end web developer though, a person must know, that things on a larger website are more complicated.

Therefore, quite a bit of extra code, will be written for sites, that use more than one type of form

When a class or an ID is applied to the body tag, then a front-end web developer can override styles on a page-by-page or site-wide basis, which is also a very interesting way of using specificity.

Often the home page of a website looks different from the rest of the website, this is because a class or ID name has been used, to style the home page differently from the rest of the website.

Alright now let’s shift the conversation to inheritance, which people confuse with cascade, because these two seem to be related.

Inheritance is a much easier concept to understand, and it is different from cascade; therefore, we shouldn’t confuse these two terms with each other.

Inheritance is associated with how the elements in the HTML markup, inherit properties from their parent elements and pass them on to their children, while the cascade has to do with the CSS declarations being applied to a document, and how conflicting rules do or don’t override each other.

Properties such as color and font-size, are inherited by the descendant of elements those styles are applied to

This is the reason why, we see websites, have the same font-size or text color for the same page, because inheritance ensure, that all elements on the same page, inherit certain properties, given to the parent element.

The same style does not need to be added to every style of an element, when inheritance is used.

When an inherited property, is being used, it is best to apply it to the parent element and allow for the children to inherit that property, such as: instead of writing this: p, div, h1, h2, h3, ul, ol, dl, li {color: black;} is better to write body {color: black;}.

Thank you, for reading this article!!!