css - html calling element in header comparison -

i have navigation element in html, can change external css, want compare how call inside html,

so got

<div id="header" class="row">     <div id="logo" class="col_12">and winner is<span>n't...</span></div>      <div id="navigation" class="row">          <ul>             <li><a href="#">why?</a></li>             <li><a href="#">synopsis</a></li>             <li><a href="#">stills/photos</a></li>             <li><a href="#">videos/clips</a></li>             <li><a href="#">quotes</a></li>             <li><a href="#">quiz</a></li>         </ul>     </div>   </div>  

if put on header

<link href="css/custom.css" rel="stylesheet" type="text/css" /> 

i can change list show navigation on css with

#navigation ul li {      display: inline-block; } 

but want compare, , call element inside html

i use in head, , comment css

<style> #ul.navigation{display:inline-block;} </style> 

but dont think im referencing element right

also how call "inline-block" property list inside actual html body? [inine style]

i see css working fine, want compare calling style in head , how call in body,

i have seen examples 3 cases,

http://www.w3schools.com/css/css_howto.asp

i see working paragraph, need more clarification know how work element?

thanks

have tried put :

<style>     #navigation ul li {          display: inline-block;     } </style> 

with #ul.navigation{display:inline-block;} selecting wrong element.

ul.navigation -> ul element classnavigation. # stands id. #ul.navigation isn't valid.

you meant div#navigation or better div#navigation ul li select li elements of ul element child of div id "navigation".

like this:

<style>     div#navigation ul li {          display: inline-block;     } </style> 

jsfiddle.