How would I break this code up to use in WordPress?

Im trying to learn, and dont want to rely on plugins.
How would I break this code up to use in WordPress?

Whats contained in <script> below, looks like it also has css included is that correct? If true, what separates to the .css file and what goes into the .js file?

<div id="twtr-search-widget"></div>
<script src="https://widgets.twimg.com/j/1/widget.js"></script>
<link href="https://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<script>
new TWTR.Widget({
  search: 'my search query',
  id: 'twtr-search-widget',
  loop: true,
  title: 'what people say about...',
  subject: 'stuff and things',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#111',
      color: '#000000'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#f59f00'
    }
  }
}).render().start();
</script>

Thanks