Written by - Saksham Jain

CSS in React

There are two ways to style react applications using CSS those are :

External CSS: This is the same as we used in HTML except for two changes those are :
- We cannot use the class as it’s a reserved keyword in react So, we have to use className instead of class.
- Instead of linking the CSS file using a style tag, we have to import the CSS file.
Inline CSS: This is mostly used in react applications. To apply inline CSS first we have to give style attributes to the element the passes all the styling in a js object format in JSX like: { key: ‘value’, key: ‘value’} and convert all the CSS property names from kebab-case to camelCase.
Now we can pass this object as it is to the style attribute or we can create an object and pass that to the style attribute.
```
function MyComponent(){
 
return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>
 
}
```
OR
```
const mystyle = {
    color: 'blue',
    lineHeight : 10, 
    padding: 20
  };
function MyComponent(){
 
return <div style={mystyle}> Inline Styled Component</div>
 
}
```