CSSはスタイルシートファイル、例えば `style.css` に記述する。HTMLファイルのスタイルシートは、`head`タグ内の`meta`タグでリンクする。例えば
```html
<link rel="stylesheet" href="style.css">
```

CSSのメディアクエリとHTMLの組み合わせの例です：

##### index.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Page Title</title>
  </head>
  <body>
    <p>Example content.</p>
  </body>
</html>
```

##### style.css
```css
p {
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
```

この例では、`style.css`ファイルを`index.html`ファイルにリンクしている。スタイルシートでは、段落（`p`タグ）のデフォルトのフォントサイズとして16pxを指定するためにCSSが使用されている。メディアクエリは、ユーザーデバイスの幅が600px以上でない場合にCSSルールを上書きするために使用される。
You write CSS in a stylesheet file, for example `style.css`. You link a stylesheet in HTML file with `meta` tag within the `head` tags. For example
```html
<link rel="stylesheet" href="style.css">
```

Here is an example of how to combine CSS media queries with HTML:

##### index.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Page Title</title>
  </head>
  <body>
    <p>Example content.</p>
  </body>
</html>
```

##### style.css
```css
p {
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
```

This example links `style.css` file to the `index.html` file. In the stylesheet, CSS is used to specify 16px as the default font size for paragraphs (the `p` tag). A media query is used to override the CSS rule if the user device has no higher than 600px width.