TYPES OF CSS (for beginners)

there are three types of CSS such as 

• inline style
• external style sheets
• embedded style

Inline styles are styles that are written directly in the tag in the HTML document. Inline styles affect only the specific tag they are applied to. Here is an example of an inline style applied to a standard link, or anchor, tag:

<a href="/index.html" style="text-decoration: none;">

This CSS rule would turn the standard underline text decoration off of this one link. It would not, however, change any other link on the page.  This is one of the limitations of inline styles. Since they only change on specific item, you would need to litter your HTML with these styles to achieve an actual page design. That is not a best practice. In fact, it is one step removed from the days of "font" tags and the mixture of structure and style in web pages.
Inline styles also have very high specificity.

This makes them very hard to overwrite with other, non-inline styles. For example, if you want to make a site responsive and change how an element looks at certain breakpoints by using Media quaries inline styles on an element will make this very hard to do.

Ultimately, inline styles are really only appropriate when used very sparingly.

In fact, I rarely ever use inline styles on my webpages.

Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. Once again, this approach negates one of the strengths of CSS.  Since every page would have styles in the
, if you wanted to make a sitewide change, like changing the color of links from red to green, you would need to make this change on every page, since every page uses an embedded style sheet.  This is better than inline styles, but still problematic in many instances.
Stylesheets that are added to the
of a document also add a significant amount of markup code to that page, which can also make the page harder to manage in the future.
The benefit of embedded style sheets is that the load immediately with the page itself, instead of requiring other external files to be loaded..

External Style Sheets. Most websites today use external style sheets.External styles are styles that are written in a separate document and then attached to various web documents. external style sheet can affect any document they are attached to, which means that if you have a 20-page website where each page uses the same style sheet (this is typically how it is done), you can make a visual change to every one of those pages by simply editing that style sheet.

This makes long term site management much easier.

The downside to external style sheets is that they require pages to fetch and load these external files. Not every page will use every style in the CSS sheet, so many pages will load a much larger CSS page than that actually need.
While it is true that there is a performance hit for external CSS files, it can certainly be minimized. Realistically, CSS files are just text files, so they are generally not very large to begin with. If you entire site uses 1 CSS file, you also get the benefit of that document being cached after it is initially loaded. This means that there could be a slight performance hit on the first page some visits, but subsequent pages will use the cached CSS file, so any hit would be negated.  External CSS files are how I build all my webpages.

Prepared by IBRAHIM MCHUCHURI