CSS file inside or outside HTML?

Well I believe that what would help you now would be some good code practice and file organization;

At this link you can see some good practices:

link ( Read response comments too )

I also recommend reading:

link

In general I use the good practices of the 2016 convention, which says to organize the files like this:

- index.html

- mathematics. (pulp)

• matematica.js
• matematica.html
• matematica.css

- Portuguese. (pulp)

• portugues.js
• portugues.html
• portugues.css

- styles. (pulp)

• styles.css

There are three types of CSS stylesheet possible for use in WEB projects: inline, embedded, and external styles Inline style. Inline style is when CSS styles are applied directly inside the opening tag of an HTML element. Embedded style - are placed nested within the Styles tag, included within the html header. External style - are placed in separate files.

Probably the most convenient way to add CSS to your site is to link it to an external .css file. That way, any changes made to an external CSS file will be reflected on your site globally. A reference to an external CSS file is placed in the section of the page.

Inline CSS in thesis provides better performance, maaaass, we can not use only it. CSS allows a separation between the presentation and the content of a site, which makes the sites more accessible to different devices. Keeping information about colors and fonts separate from content will also reduce the complexity of your site, since multiple HTML pages can share the same .css file.

In order to evaluate your site's CSS performance, you need to analyze the First byte Time and the time the browser started rendering the page. Your page will only begin to be displayed to the user after the browser receives the first byte from the server.

That said, browsers need instructions in the form of HTML and CSS. Therefore, full rendering will not exist until all external style sheets have been downloaded and processed. The more journeys between the browser and your server, but time your user will have to wait until they see something.

CSS inlining

One way to ensure fast delivery of CSS is the practice of inlining. Inlining means inserting external CSS resources directly into HTML documents. This technique works best for smaller features, but still makes a remarkable difference as you can render your HTML tags with CSS without waiting for the external CSS to be downloaded.

Importantly, CSS embedded in HTML should only contain what is required for your page to be rendered even on the first fold of your site. There is no point in decreasing requests to the server, and our first html file already contains a monstrous size.

We usually only use structural features such as width, height, margin, among others, along with very specific visual characteristics such as backgrounds, borders, etc. so that we can see something while waiting for the server to return with full external file styles.

External CSS

Using CSS inline we help the browser to render our content faster without waiting for external files. But unfortunately, we were not able to use the cache or reuse code, causing every new page visited, the entire rendering process to be done again.

If your page has a lot of simple CSS, this would be no problem, but if you have multiple style lines, not using the browser cache will become a big problem, which is why many web developers only incorporate CSS on your home page or landing pages while using external CSS for the rest of the site.

Completing

In short, you can use both inline css and external files, it will depend on your problem. My recommendation from experience would be to switch between the two modes so that you arrive at a balance, without putting everything in HTML, but also without being totally dependent on the external style to render something.

If you'd like to delve deeper into some technique to help you write a better code, I recommend you read about OOCSS (Object Oriented CSS) which has as a concept techniques based on two crucial points that are the separation of the structure and the visual and the independence of the container in relation to the content. If you do not understand much English, and want a good article in Portuguese-br recommend this: OOCSS or CSS The Right Way

Or also, I recommend SMACSS which is pretty much based on five categories of CSS rules: base, layout, module, state and soon important theme.