XHTML と HTML の記法の違いによって，CSS の書き方に影響がある箇所がある。

　HTML では，要素の種類名および属性名は大文字・小文字を区別しないが，XHTML でその区別があり，小文字で書く約束になっている。したがって，セレクタに書く要素の種類名は，小文字で書かないと一致しない。すなわち，

h1 { text-align: center; }
div.extra ul { list-style-type: circle; }

のように書かなくてはならない。同様に，属性名も小文字で書くから，

a.navi:after { content: "[" attr(accesskey) "]"; font-size: 80%; }

のようになる。これは，後に説明する属性セレクタにおいても同様である。

　1.3 では，HTML においては STYLE 要素の内容をコメントとしても，すなわち，

<STYLE TYPE="text/css">
<!--
  H1 { color: maroon; }
  DFN { color: navy; }
-->
</STYLE>

のように記述しても正しく処理されることを述べた。これは，未対応のブラウザからスタイルシートの記述を隠蔽するためであった。

　しかし，XHTML では，上記のようにスタイルシートをコメント内に記述すると，本物のコメントとみなされて無視されてしまう。さらに，スタイルシート中の不等号「<」「>」およびアンパサンド「&」は，それぞれ“<”“>”および“&”とエスケープする必要がある。

　そこで，XHTML ではスタイルシートを CDATA セクションとして記述することで，不等号などのエスケープをしないですむ。

<style type="text/css">
<![CDATA[
  h1 { color: maroon; }
  dfn { color: navy; }
]]>
</style>

ただし，このようにした場合，HTML としては余計な記号が入っているものとみなされる。

　このような事情を考え合わせたとき，HTML と高い互換性を保って XHTML を記述するためには，1.3 で述べたように，スタイルシートは外部のファイルとして用意し，それをリンクして使用するのが無難であるといえる。

　これは，細かい話に属するが，HTML と XHTML の内容モデルの違いが CSS に影響を及ぼす場面がある。

　次のような，行グループが指定されていない表

<table>
<tr><td><td><th>平日</th><th>休日</th></tr>
<tr><th>おとな</th><td>2,000 円</td><td>2,500 円</td></tr>
<tr><th>こども</th><td>1,500 円</td><td>1,800 円</td></tr>
</table>

は，HTML においてはすべての行が tbody 要素に属しているとみなされる。すなわち，

<table>
<tbody>
<tr><td><td><th>平日</th><th>休日</th></tr>
<tr><th>おとな</th><td>2,000 円</td><td>2,500 円</td></tr>
<tr><th>こども</th><td>1,500 円</td><td>1,800 円</td></tr>
</tbody>
</table>

とタグ付けされているものと等価である。しかし，XHTML においては，tbody 要素のタグは補われず，table 要素の直下に tr 要素が存在しているものとして処理される。

　これが，CSS においてどのような差を生むかというと，セレクタにおける一致の場面で，同じソースコードに対して，HTML では一致するが XHTML では一致しない，またはその逆という状況が発生する。

　たとえば，tbody td というセレクタは，上記のような表の場合，HTML では一致するが（行グループの指定を省略しても表全体が 1 つの tbody グループに属しているとみなされる），XHTML では一致しない（行グループの指定を省略すると，行はグループ化されない）。逆に，table > tr > td という子要素セレクタは，HTML において一致することはないが（table > tbody > tr > td ならば一致する），XHTML では，たとえば上記の例の場合，一致する。