## Getting Started

`styled-components` utilises tagged template literals to style your components.

It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.

This example creates two simple components, a wrapper and a title, with some styles attached to it:

```react
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
```

This is a live editor, so play around with the code to get a feel for what it's like to work with styled-components!

> The CSS rules are automatically vendor prefixed, styled-components takes care of that for you!
>
> Styled components uses [stylis.js](https://stylis.js.org/) package under the hood for prefixing the css rules.
>
> For additional information about the supported prefixes in stylis.js visit their [repository](https://github.com/thysultan/stylis.js).