How and when do I determine whether to style the CSS using the normal method or using the media queries method?

Hello Eugene! Do yourself a favor and start building your website using the normal method. It will save you lots of time, and you will end up with a cleaner code. Many developers start building their website with the "Mobile First" approach in mind. They do it the normal way by writing their css, and then by gradually building their way up using media queries. So after you use have written your css., Make a new media query for mobile devices in the landscape view, then the tablet view, then the desktop view.
The following is a Bootstrap example of the media queries you could use for your css. I usually just do three: landscape, tablet, and desktop.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) 
{ 
... 
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Those are the media queries set that Nick recommends:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

The 2014 Guide to Responsive Web Design

Beginner’s Guide to Responsive Web Design