CSS Inheritance Overide by Selector and Child Element Reference
The following examples illustrate the ability of CSS to cascade a style to an unidentified child element through the use of a parent container using inheritance.
EXAMPLE: Selection using Class Attribute on Child Element
Template Editable Region
This area represents the editable region in the template. The image below contains a class attribute with the value set to ".image-class".
HTML
<img class="image-class" src="https://files.aati-us.com/images/agilent/hero-cell-metabolism-2018-1.jpg">
CSS
.image-class { width: 100%; height: auto; }
EXAMPLE: Selection using Class Attribute on Container Element
Container for Template Editable Region
This area represents a container that surrounds the editable region in the template. The container is outside of the editable region so that it is not available to users implementing the template.
Template Editable Region
This area represent the editable region in the template. The image below doesn't include a class attribute.
HTML
<img src="https://files.aati-us.com/images/agilent/hero-cell-metabolism-2018-1.jpg">
CSS
.ref-class img { width: 100%; height: auto; }
CSS Inheritance Inline Style Overide by usage of !important
The following examples illustrate the ability of CSS to cascade a style to an unidentified child element through the use of a parent container using inheritance.
EXAMPLE: Inline Style Attribute on Anchor Element
This is an example showing an anchor element containing an inline style attribute. The inline style attribute has a value set to the color of the link to red (#ff000).
HTML
<a href="#" style="color: #ff0000;">Inline Style Link Example</a>
EXAMPLE: Inline Style Attribute on Anchor Element with !important Override
This is an example showing an anchor element containing an inline sytle attribute. The inline style attribute value has been overridden with a selector in the header <style> using the !important declaration. The anchor element has been forced to Agilent Blue (#00a9e0) and the underline has been removed.
Inline Style Link Example with Override
HTML
<a href="#" style="color: #ff0000;">Inline Style Link Example</a>
CSS
Note: The .link-ref is only implemented to allow the previous example to function correctly on the same web page.
.link-ref a { color: #00a9e0 !important; text-decoration: none; }
Articles
Web Design
