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

feature-top

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!!!

feature-top
feature-top

Add a Comment

Hernando Cadet

Hi every one, I obtained a bachelor's degree in Bioinformatics back in 2006, from Claflin University, after I received my bachelor's degree, I gained full time employment as a software engineer at a Video Relay Service company, maintaining databases and developing software for a new developed device called the VPAD.

I worked at that company for two years, then I became a web developer, and worked for a magazine for three years. After that job, I worked as a Drupal web developer, as a subcontractor for the NIH, for a year and then left the job to go back to school.

Hernando Cadet

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.