# Using vanilla CSS in React application
Yet another way to apply CSS styles in JavaScript. It's not using an inline styling though. It's injecting a `
);
}
}
```
To make the code above works you'll need:
* CSSX component (`npm install react-cssx`)
* CSSX transpiler (It's available [here](https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler). Get it as a [webpack loader](https://github.com/krasimir/cssx/blob/master/packages/cssx-loader), [Meteor package](https://github.com/Quadric/meteor-cssx) or [gulp plugin](https://github.com/krasimir/cssx/blob/master/packages/gulp-cssx).)
Demo [here](http://krasimir.github.io/react-cssx/example/1/) and [here](http://krasimir.github.io/react-cssx/example/2/).
### CSSX component
`` component has only one required attribute - `styles`. It should be an array in the following format:
```js
[
['h1', { 'font-size': '32px' }],
['h1 small', { 'font-size': '24px', 'font-weight': 'bold' }]
]
```
Of course writing CSS that way is not really nice. So let's use CSSX and replace it with:
```js
css() {
return (
);
}
```
*Notice that we should use a function that returns a `
);
}
}
```
There are three paragraphs rendered on the screen:
The first one does not have any local styles attached. However, the second and the third one are styled differently. They have their own dedicated CSS. [CSSX library](https://github.com/krasimir/cssx/tree/master/packages/cssx) creates two `