# CSSTools for Wolfram Language

**URL:** <https://community.wolfram.com/t/csstools-for-wolfram-language/15634>\
**Category:** Staff Picks\
**Tags:** mathematica, wolfram-add-ons, external-interfaces, import-and-export, packages-and-paclets, staff-pick\
**Created:** [March 30, 2020, 11:22pm UTC](https://community.wolfram.com/t/csstools-for-wolfram-language/15634 "2020-03-30T23:22:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevind](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/kevind/32/9585_2.png) [@kevind](https://community.wolfram.com/u/kevind)\
**Post date:** [March 30, 2020, 11:22pm UTC](https://community.wolfram.com/t/csstools-for-wolfram-language/15634/1 "2020-03-30T23:22:30Z")

</div>

# Tools For Importing and Working with CSS in Wolfram Language

[CSSTools-1.2.1 Paclet Direct Download Link](https://github.com/WolframResearch/CSSTools/releases/latest/download/CSSTools-1.2.1.paclet "Paclet Download")

## Brief History

The CSS Tools project started with an earlier community post: [CSS Selectors 3 for Symbolic XML](https://wolfram.discourse.group/t/13467/1) . That work focused on just CSS Selectors, while this project includes importing and using the CSS rules. The goal of this project is to remain faithful to CSS standards, but translate as much as possible to the Wolfram Desktop stylesheet system. I presented the first iteration of the CSS Tools project at the 2019 Wolfram Technology Conference. You can watch [the presentation](https://www.wolfram.com/broadcast/video.php?v=2842) or download [the presentation notebook](https://files.wolframcdn.com/pub/www.wolfram.com/technology-conference/2019/Tuesday/2019KevinDailyCSSImport.nb) directly. The presentation predates the current state of the package and some later examples may not work. Please refer to the included Tutorial documentation in the paclet for updated examples.

I’m pleased to have this work be a part of [Wolfram’s GitHub page](https://github.com/WolframResearch/CSSTools "GitHub Repo Main Page") as an open source project. I expect to continue contributing to the project, but I encourage others to contribute, too.

## Using the Package

This package allows CSS as an import format. CSS is imported as a `Dataset` expression.

 ![3472CSS1.PNG](https://global.discourse-cdn.com/wolfram/original/3X/c/3/c36e92acd0c7097bf25b3bc7e17de1d188e5b192.png)

The CSS data can subsequently be translated into Wolfram Language options at the box, Cell, or Notebook level. The function `CSSCascade` runs the CSS cascade algorithm on the specified CSS rules. For example, translating the above CSS properties to `Cell` options, you can translate all of the properties found in all of the CSS rules:

![CSS2.1.PNG](https://global.discourse-cdn.com/wolfram/original/3X/0/8/08274d2ab2151a9d0d3a60dbf49b129a83d8973a.png)

Or translate specific properties, running the cascade including all of the CSS rules:

![CSS2.2.PNG](https://global.discourse-cdn.com/wolfram/original/3X/b/d/bd698f240312ece160f2d06c03d81a377c52ac5e.png)

Or translate specific properties, only including a subset of the CSS rules:

![CSS2.3.PNG](https://global.discourse-cdn.com/wolfram/original/1X/ffb02ae7de87cb6c131c9c42f3342a1f903599b7.png)

Other functions from this package include:

- `CSSTargets`: apply CSS data on an XML document to return which CSS rules target which XML elements
- `ExtractCSSFromXML`: extract CSS data from XML expressions, including target data
- `CSSInheritance`: run `CSSCascade` on an XML document, including inherited properties
- `CSSSelector`: create a `CSSSelector` expression for use in other CSS functions

The package includes a detailed tutorial comparing CSS and Wolfram Language stylesheets. In an effort to keep this community post brief, I encourage anyone new to the CSS format to start there:

 ![CSSTutorial.PNG](https://global.discourse-cdn.com/wolfram/original/3X/4/d/4de6059f3ad881ba1c8d210b0f4671bb89c157fd.png)

The initial release of CSSTools contains the core [CSS Level 2 Revision 1](https://www.w3.org/TR/CSS2/) specification. The tokenizer follows the [CSS Syntax Module Level 3](https://www.w3.org/TR/css-syntax-3/) specification and the selectors follow [Selectors Level 3](https://www.w3.org/TR/selectors-3/). Some additional modules are included such as [CSS Namespaces Module Level 3](https://www.w3.org/TR/css-namespaces-3/), [CSS Colors Module Level 4](https://www.w3.org/TR/css-color-4/), [CSS Media Queries Level 4](https://www.w3.org/TR/mediaqueries-4/), [CSS Custom Properties for Cascading Variables Module Level 1](https://drafts.csswg.org/css-variables/) and [CSS Values and Units Module Level 3](https://www.w3.org/TR/css-values-3/).

Download the paclet from this [Paclet Download](https://github.com/WolframResearch/CSSTools/releases/latest/download/CSSTools-1.2.1.paclet "Paclet Download") link, or go to the [Main GitHub Page](https://github.com/WolframResearch/CSSTools "GitHub Repo Main Page") for more information.

---

<div class="post-metadata">

**Author:** ![wolframcommunity](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/wolframcommunity/32/8335_2.png) [@wolframcommunity](https://community.wolfram.com/u/wolframcommunity)\
**Post date:** [March 31, 2020, 8:11pm UTC](https://community.wolfram.com/t/csstools-for-wolfram-language/15634/2 "2020-03-31T20:11:09Z")

</div>

![news-congrads-kkluyshnik-02-04-19.jpg](https://global.discourse-cdn.com/wolfram/original/3X/6/a/6a310c2d0904616faf4e6e148260c9f29ab9f4eb.jpeg) – you have earned _ **Featured Contributor Badge** _ ![2015-11-02_10-07-11.png](https://global.discourse-cdn.com/wolfram/original/3X/5/0/50e59c9ead62f729e7130d3ea1482555a75602b6.png)

Your exceptional post has been selected for our editorial column _ **Staff Picks** _ [http://wolfr.am/StaffPicks](http://wolfr.am/StaffPicks) and [Your Profile](http://community.wolfram.com/web/kevind) is now distinguished by a _ **Featured Contributor Badge** _ and is displayed on the [Featured Contributor Board](https://community.wolfram.com/people). Thank you!
