CSSOM and Computed Styles

CSSOM and Computed Styles

The CSS object model turns stylesheet text into live objects that participate in a real cascade. CSSStyleSheet holds rules, CSSStyleDeclaration holds property declarations, and Element.get_computed_style() reports the resolved outcome.

Parsing and Attaching Stylesheets

CSSStyleSheet.replace_sync() parses stylesheet text; Document.attach_style_sheet() registers the sheet so its rules apply. Rules can also be managed individually with insert_rule(), add_rule(), and remove_rule():

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)

The Rule Family

Parsed sheets contain typed rules: CSSStyleRule for ordinary selectors plus CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule, and page/layer/namespace variants, collected in a CSSRuleList. parse_stylesheet() and parse_rule_text() expose the parsing layer directly.

Declarations and Inline Styles

Each element’s style property is a live CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority(), and item() read and write declarations. Inline declarations outrank author rules of any selector specificity:

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Resolving the Cascade

Element.get_computed_style() returns a ComputedStyleDeclaration reflecting specificity, importance, and inheritance. An author rule marked !important beats a non-important inline declaration:

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red !important }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Tips and Best Practices

• Attach sheets before reading computed styles — resolution reflects currently attached sheets
• Use get_property_priority() to check for !important when debugging surprising winners
• Keep one CSSStyleSheet per logical stylesheet; CSSRuleList preserves rule order, which matters for equal-specificity ties
• For inheritance checks, read the parent’s computed value first, then the child’s

Common Issues

FAQ

How do I parse CSS text into objects?

CSSStyleSheet.replace_sync() for whole sheets, or parse_rule_text() for a single rule.

What does get_computed_style return?

A ComputedStyleDeclaration — read values with get_property_value().

Do inline styles always win?

They beat author rules of any specificity, but lose to author rules marked !important.

API Reference Summary

See Also

• Aspose.HTML — Enterprise Documentation