There are two basic places you can define styles. There are legitimate reasons for both of them, and they should be used accordingly.
In both cases, styles defined first may be overwritten with subsequent style definitions. It will only overwrite a value given to a property, not the whole style. So if you have a problem defining a style, getting it to look the way you need to, it may actually be because of a secondary definition later on in the files.
Within the Style Tag
Within the HTML specification, there is a <style> tag which allows you to write CSS within it. This should be placed within the <head> tag section. While it can be placed within the body, this should be avoided as it will cause the browser to reevaluate the entire HTML DOM and re-render the page – slowing down the process of displaying the page to the viewer.
<style>
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>This style tag has some advantages and disadvantages inherent to it. For example, because it is part of the HTML page it doesn’t require any extra downloaded files. This means one less file to download from the server, one less file to not have to worry about forgetting to upload. All things being equal, to view a single page this way is faster.
However, that is also the drawback to having all of your CSS code within the HTML page. Your HTML page is potentially much larger, and if you have multiple pages, then you will have to download the CSS every time you download a page, making it quite inefficient.
So when and why would you use the style tag? If you have elements that you need to style only on that page or specific to that page, then using the internal style tag is preferable. This way you don’t have unnecessary CSS code on a bunch of pages, which takes longer to parse and thus display for your website.
Also, if you only have a small amount of CSS, and are using a single page website, then you might find some performance benefits to having internal CSS. However, I’d recommend testing this to verify.
External Sheets
The most common way to include CSS into a web page is through an external style sheet. This file, with a .css extension, is included by using a link tag. While it is most commonly found within the head tags of the web page, it can be found inside the body. However, for the same reasons why you wouldn’t want to place the <style> tag inside the body, it would be best to leave it within the head.
<link rel="stylesheet" href="css/styles.css" type="text/css">Within the external file, you do not have to worry about a style tag, just place your selectors and associated declaration blocks within the page.
The advantage to external style sheets is found when you have a multi-page website. Namely, it is much easier to make edits in one place, and have it affected on every page that references the CSS file.
Additionally, by leveraging the ability for the web browser to download files in parallel, and store them locally, the web page will display faster.
While you have can multiple external CSS files l find that for most sites this is unnecessary. Each file can contain as many selectors and associated declaration blocks as is needed, therefore a single file can usually do the needed work.
If you are working with a content management system, or using a CSS framework, you might find multiple CSS files. For example, each optional component for a website might utilize a different CSS file, or with a framework, you might have the basic framework in one file, and your customizations and/or theming in a second file.
Having a couple of files to download usually won’t affect the performance too much. However, too many individual files will, as the browser can only download so many files simultaneously.
Where to Define The CSS Styles was originally found on Access 2 Learn
