CHAPTER 1/2 INTRODUCTION TO CSS BEST SEO PROGRAMMING” Cascading Order In the previous paragraphs, I have explained how to link to a CSS file either internally or externally. If you understood that I am doing a good job. I don’t fret, there is a long way to go before we are finished. Assuming you have caught on already, you are probably asking, well can I do both? The answer is yes. You can have both internal, external, and now wait a minute a third way? Yes, inline styles also.
Inline Styles I have not mentioned them until now because in a way they defeat the purpose of using CSS in the first place. Inline styles are defined right in the (X)HTML file alongside the element you want to style. See the example below. <p style=”color: #ff0000;”>Some red text</p>
CHAPTER 1/2 INTRODUCTION TO CSS BEST SEO PROGRAMMING
Some red text Inline styles will NOT allow the user to change styles of elements or text formatted this way.
So, which is better?
So with all these various ways of inserting CSS into your (X)HTML files, you may now be asking well which is better, and if I use more than one method, in what order do these different ways load into my browser? All the various methods will cascade into a new “pseudo” stylesheet in the following order:
1. Inline Style (inside (X)HTML element)
2. Internal Style Sheet (inside the <head> tag)
3. External Style Sheet.
As far as which way is better, it depends on what you want to do. If you have only one file to style then placing it within the <head></head> tags (internal) will work fine. Though if you are planning on styling multiple files then the external file method is the way to go.
Choosing between the <link related=> & the @import methods are completely up to you. I will mention that the @import method may take a second longer to read the CSS file in Internet Explorer than the <link related=> option. To combat this see Flash of unstyled content
Users with Disabilities:-
The use of external style sheets also can benefit users that suffer from disabilities. For instance, a user can turn off your stylesheet or substitute one of there own to increase text size, change colors and so on. For more information on making your website accessible to all users please read Dive into accessibility.
Swapping stylesheets is beneficial not only for users with disabilities but also for power users who are particular about how they read Web documents.
You will discover as you delve farther into the world of CSS that all browsers are not created equally, to say the least. CSS can and will render differently in various browsers causing numerous headaches.