There are four main types of CSS (Cascading Style Sheets) used in HTML documents, allowing you to style the presentation of your web pages. There are external stylesheets, internal styles, inline styles, and the @import rule.
Types of css styles
External Stylesheets:
An external stylesheet involves creating a separate file (with a .css extension) that contains all your CSS rules. Linked to your HTML document using the <link> element within the <head> section. The <link> tag has a rel attribute set to “stylesheet” and an href attribute that specifies the path to the CSS file. Optionally, the type attribute can be set to “text/css”, although in HTML5, this can be absent.
Example:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
Here, mystyle.css is the external stylesheet file.Advantages of external stylesheets:
- Reusability: An external stylesheet can be applied to multiple HTML documents. This allows you to change the look of an entire website by modifying a single file.
- Maintainability: HTML makes your code easier to manage and update. If you want to change link colors across 100 pages, you only need to modify the CSS file once.
- Faster Loading: Browsers can cache external stylesheets, which can lead to faster loading times for subsequent pages that use the same stylesheet.
- Separation of Concerns: This method helps a clear separation between the structure (HTML) and the presentation (CSS) of your website.
You can link to multiple CSS files in your HTML page by using multiple <link> elements. The order in which they are linked matters, as CSS rules are applied based on their order. Styles in a later stylesheet can override styles in an earlier one.
Internal Styles (Embedded Styles):
Internal styles include embedding CSS rules within the HTML document using the <style> element. The <style> tag is placed inside the <head> section of the HTML document. The type attribute should be set to “text/css”, and optionally, the media attribute can specify for which device the styles should be applied.
Example:
<head>
<style type="text/css">
h1 {
color: green;
text-align: center
}
p {
font-size: 16px;
}
</style>
</head>Advantages of internal styles:
- Convenient for single-page websites: Useful when a single document has a unique style that won’t be used elsewhere.
Disadvantages of internal styles:
- Limited Reusability: Styles are only applicable to the specific HTML document in which they are embedded.
- Maintainability Challenges: For larger websites, managing styles within individual HTML files becomes unwieldly.
- Separation of Concerns: Mergers logic with the HTML structure, which is generally not recommended for larger projects.
Inline Styles:
Inline styles involve applying CSS rules directly to individual HTML elements using the style attribute. The style attribute accepts CSS declarations as its value.
Example:
<h1 style="color: blue; text-decoration: underline;">This is a heading</h1>
<p style="font-size: 14px; font-family: Arial;">This is a paragraph.</p>Advantages of inline styles:
- Highest Specificity: Inline styles have the highest priority and will override styles defined in external or internal stylesheets. Useful for making very specific, localized style adjustments.
- Can be useful for testing: Might be used for quick testing of individual styles.
Disadvantages of inline styles:
- Poor Maintainability: Applying the same styles to multiple elements requires repetitive code. Making global changes becomes very difficult.
- Limited Reusability: Styles are specific to individual elements.
- Worst for Separation of Concerns: Making the code harder to read and maintain. Generally discouraged for most styling purposes.
The @import Rule:
The @import rule allows you to import style rules from other stylesheets into your current stylesheet. This rule must precede all other rules (except @charset rules) in a <style> tag or an external CSS file. You can use the @import rule with a url() function or directly with the path to the stylesheet. You can also specify media queries with the @import rule to apply the imported styles only to certain media.
Example (within a <style> tag or CSS file):
@import url("global.css");
@import 'theme.css' print;The first line imports global.css. The second line imports theme.css but only applies its styles when the document is being printed.
Advantages of @import:
- Modularization: Can help organize CSS rules into separate files.
- Conditional Imports: Allows importing stylesheets based on media queries.
Disadvantages of @import:
- Performance Concerns: @import can potentially slow down page loading because browsers load imported stylesheets sequentially. Linking stylesheets using <link> is generally preferred for better performance.
- Browser Compatibility Issues: Older CSS implementations do not fully support @import.
- Potential for FOUC (Flash of Unstyled Content): Some older browsers, like versions of Internet Explorer, might exhibit a flash of unstyled content when using @import.
CSS Rules Dominant and Priority:
When multiple CSS rules target the same HTML element, the browser determines which rule to apply based on specificity and the order of appearance.
how CSS is included:
- Inline styles have the highest precedence.
- Styles defined in internal <style> tags override styles from external stylesheets.
- Styles from external stylesheets have the lowest priority among these three if they are declared before internal styles. However, the order of <link> elements matters; a stylesheet linked later can override rules from an earlier one.
- Styles imported using @import are generally considered to be at the same level as the CSS file in which they are imported.