Are .css files always needed? Or may I have a .css "basic" file and store other style items inside the HTML page?
Does padding, borders and so on always have to be defined into a .css file stored separately, or may I use them normally into an HTML page?
You can use anywhere, css files are not a requirement. using css files however is recommended as it makes the site easier to maintain and change in the future
Have to? No. You can do it however you prefer.
Generally it's better stype to keep your CSS out of your html whenever possible though.
That's what i usually do.
At least at the begining. When a page design gets close to final, I move most things to the 'main' style.css
You can define CSS at three levels, externally, embedded in the document (inside a <style> tag), or inline on the element.
Depending on your needs, you might use all three, as a rule of thumb external sheets are good for overall styles as you can apply them globally. If you have specific cases that you must handle you can then use the other levels.
I prefer to keep styling in CSS as it separates view from presentation, allowing me to swap between presentations fairly easily. Plus it keeps all the information in one place instead of split between two places.
You can do either. However, by shifting your CSS out to a separate file, it can be cached. This reduces the amount of data that you need to transmit for each page, cutting down on bandwidth costs, and increasing speed.
It is technically possible to use inline CSS formatting exclusively and have no external stylesheet. You can also embed the stylesheet within the HTML document. The best practice in web design is to separate out the CSS into a separate stylesheet. The reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document. And perhaps you may have JavaScript files which exist to add additional behavior to the document.
Keeping the presentation, markup, and behavior separate creates a cleaner design.
From a practical perspective, if you have a single external CSS stylesheet the browser can cache it. If multiple pages on your site have the same look and feel, they can use the same external stylesheet which only needs to be downloaded once by the web browser. This will make your network bandwidth bills lower as well as creating a faster end user experience.
You don't have to keep your CSS in an external file, no. What you're asking about is "inline" css: including style directives directly within the page itself via <style> blocks.
There are times where that may makes sense, in moderation, but in general it's not the way you want to go. Keep your CSS isolated in an external stylesheet makes it much easier to maintain both your HTML and your styling, especially as a project scales and changes hands.
You can include CSS inside an HTML page. It goes within the <style> tag, which goes within the <head> tag:
<head>
<style type="text/css">
body{ background-color: blue; }
</style>
</head>
Note, however, that it is best practice to use .css files.
One big advantage of having CSS in an external file is that one rule can apply to many different pages. Here is a contrast of three CSS approaches:
Inline Styles - to change the color to blue, you have to find each place that the red style exists - maybe on many pages.
<span style="color: red;">This is a warning.</span>
Page Styles - this allows you to label what something is - in this case, a warning - rather than what it looks like. You could change all the "warnings" on the page to instead have a yellow background by changing one line of code at the top of the page.
<head>
<style type="text/css">
.warning {color: red;}
</style>
<body>
<span class="warning">This is a warning.</span*>
External File - same code as above, but the fact that the style info is in a separate file means that you can use the "warning" class on many pages.
Css can improve performance, because they are cached from browser, and pages are smaller!
Putting rules into the HTML page gives them greater "specificity," and therefore priority, over external rules. If several CSS rules conflict, ID wins over class, and inline styles win over ID.
<head>
<style type="text/css">
span.reminder {color: blue;}
span#themostimportant {color: red;}
</style>
</head>
<body>
<span class="reminder" id="themostimportant">
This text will be red.
</span>
<span class="reminder" id="themostimportant" style="color: green;">
This text will be green.
</span>
</body>
Use an external file for all styles that are used sitewide, document stylesheet for styles that are only used on that page and use inline styles when the style only affects that single element.
External stylesheets do not always lower bandwidth. If you put every style for every page in your site into one giant css file, your users incur a large initial download even if they only visit your homepage once ever.
Thoughtful division of your styles into a main.css with the most common styles and then into additional stylesheets as users drill down deeper can help to make the downloads smaller for some paths through the site.