Multiple CSS styles can apply to the same HTML element, conflicts are resolved through inheritance and cascading.
In most HTML documents, elements such as <h1>, <h2>, <p> and <b> are decendents of the <body>
Also <body> is the parent of <h1>, <h2>, <p> and <b> a parent can have multiple children, but each child can have only one parent.
Due to inheritance all decendants of an element will use the same font style and color as their parent unless that style has been specifically redefined for the child.
This process of inheritance applies to most (but not all) CSS properties.
Multiple CSS stylesheets, and multiple CSS rules can be applied to the same page, cascading is a set of rules that decides which will take precedence.
- Browser style sheet - lowest priority, a fall back if nothing else is specified. Built-in to the web browser.
- User style sheet - medium priority, unless the user creates rules with !important, for accessibility reasons these rules will take precedence.
- Author style sheet - highest priority, written by the designer of the web page.
Most styling will be done via author style sheets, it is possible to apply more than one style sheet to the same page - this is often useful when working on large websites that have some "company standard" CSS and other CSS that is unique to a page or section of the site.
Author stylesheets are linked to the page with a link (or links) in the <head> section of the page of the HTML.:
<link rel="STYLESHEET" href="../corporate.css" type="text/css">
<link rel="STYLESHEET" href="../main.css" type="text/css">
If more than one style sheet is specified and they contain CSS rules that affect the same element, then the precedence is inferred from the order in which they are listed in the <head> section - the last one listed will have the highest precedence.
It is also possible to create rules in an Author style sheet that use !important, these will over-ride other author/browser style sheets, but not any user styles with !important.
“Your future takes precedence over your past. Focus on your future, rather than on the past” ~ Gary Ryan Blair
Related:
The CSS Box Model - Borders, Padding and Margins.