CSS -el hogy lehet egyedi saját nevet adni a stíluslapnak?

CSS -el kisérletezek és sehogy sem akarja megcsinálni amit szeretnék, amit saját magam írok be nevet a stilusnaplak azt nem hajtja végre

külön file-ba szeretném a CSS-t és már minden variációt kipróbáltam amit neten találtam, mi hiányzik ?

ezek működnek:

h1 {style="font-weight: bold;" font-size: 12px;}

P {font-size: 12px;}

ezek már nem:

.code {style="color: rgb(51, 102, 255);" font-size: 10px;}

.szoveg {style="font-family: Arial;" font-size: 10px;}

.cim {style="font-weight: bold;" font-size: 12px;}

P .code {style="color: rgb(51, 102, 255);" font-size: 10px;}

P .szoveg {style="font-family: Arial;" font-size: 10px;}

P .cim {style="font-weight: bold;" font-size: 12px;}

.code {style="color: rgb(51, 102, 255);" font-size: 10px;}

.szoveg {style="font-family: Arial;" font-size: 10px;}

.cim {style="font-weight: bold;" font-size: 12px;}

p #code {style="color: rgb(51, 102, 255);" font-size: 10px;}

p #szoveg {style="font-family: Arial;" font-size: 10px;}

p #cim {style="font-weight: bold;" font-size: 12px;}

#code {style="color: rgb(51, 102, 255);" font-size: 10px;}

#szoveg {style="font-family: Arial;" font-size: 10px;}

#cim {style="font-weight: bold;" font-size: 12px;}

eddig így néz ki:

<h1>főőőoldal</h1>

<h1>ezt formáza rendesen</h1>

<p>ezt is jól írja ki<p>

<br>

de ezeket már nem:

<p id="cim">cím</p>

<br>

<p id="szoveg">szöveg</p>

<br>

<p id="code">forráskód</p>

<br>

<p class="cim">cím</p>

<br>

<p class="szoveg">szöveg</p>

<br>

<p class="code">forráskód</p>

mi nem jó ?