How to apply CSS to HTML documents
There are three main ways to apply CSS to HTML documents.
These are external style sheets, internal style sheets, and inline style sheets.
Each method has advantages and disadvantages depending on the specific situation, and if you understand them, you can design web pages effectively.
1. External Stylesheet
How to apply: An external style sheet stores style information in a separate file with a .css extension, and you link that style sheet file using a tag within your HTML document.
For example, the code to apply a style sheet file called styles.css to HTML would look like this:
<link rel="stylesheet" type="text/css" href="css/layout.css">
Reusability: One CSS file can be reused in multiple HTML pages.
Maintenance: When you need to change your style, just edit the CSS file and the styles on all linked pages will be updated.
Page load speed: CSS files can be downloaded once and cached by the browser, allowing styles to be applied quickly without additional downloads when loading other pages.
Initial loading delay: The initial loading time of your page may be longer due to the need to load external files.
Dependency Issues: If the location of your CSS file changes or becomes inaccessible, you may run into problems with styles not applying at all.
2. Internal Stylesheet
How to apply: An internal style sheet can be set to <style> within an HTML document. It is written directly inside the tag. Mainly the <head> of the document. It is located in the section. Examples include:
<head>
<style>
h1 {color:#101010;}
</style>
</head>
Document-specific: Applies only to specific HTML documents, so it does not affect other documents.
Centralized management: Manage style and structure all from one HTML file.
Not reusable: You must copy the code to apply the style to another HTML document.
Difficult maintenance: When styles are duplicated across multiple HTML documents, it is difficult to change them in bulk.
3. Inline Stylesheet
Inline styles are a way to apply styles directly to specific HTML elements, using the style attribute. Examples include:
<div style="background-color:#808080"></div>
Instant application: Apply styles right to the elements you need.
Priority: It has a higher priority than other style sheets, so it is easy to override other styles.
Not reusable: It is difficult to reuse styles.
Reduced readability: HTML code becomes complex and difficult to maintain.
Each method of applying styles can be useful in certain situations.
For example, an external style sheet may be effective if you want to enforce a consistent design across your website, while an internal or inline style sheet may be better if you need special styling for a single page or specific element. Therefore, web developers must consider the project's requirements and resources to choose the most appropriate method.
These are external style sheets, internal style sheets, and inline style sheets.
Each method has advantages and disadvantages depending on the specific situation, and if you understand them, you can design web pages effectively.
1. External Stylesheet
How to apply: An external style sheet stores style information in a separate file with a .css extension, and you link that style sheet file using a tag within your HTML document.
For example, the code to apply a style sheet file called styles.css to HTML would look like this:
<link rel="stylesheet" type="text/css" href="css/layout.css">
Reusability: One CSS file can be reused in multiple HTML pages.
Maintenance: When you need to change your style, just edit the CSS file and the styles on all linked pages will be updated.
Page load speed: CSS files can be downloaded once and cached by the browser, allowing styles to be applied quickly without additional downloads when loading other pages.
Initial loading delay: The initial loading time of your page may be longer due to the need to load external files.
Dependency Issues: If the location of your CSS file changes or becomes inaccessible, you may run into problems with styles not applying at all.
2. Internal Stylesheet
How to apply: An internal style sheet can be set to <style> within an HTML document. It is written directly inside the tag. Mainly the <head> of the document. It is located in the section. Examples include:
<head>
<style>
h1 {color:#101010;}
</style>
</head>
Document-specific: Applies only to specific HTML documents, so it does not affect other documents.
Centralized management: Manage style and structure all from one HTML file.
Not reusable: You must copy the code to apply the style to another HTML document.
Difficult maintenance: When styles are duplicated across multiple HTML documents, it is difficult to change them in bulk.
3. Inline Stylesheet
Inline styles are a way to apply styles directly to specific HTML elements, using the style attribute. Examples include:
<div style="background-color:#808080"></div>
Instant application: Apply styles right to the elements you need.
Priority: It has a higher priority than other style sheets, so it is easy to override other styles.
Not reusable: It is difficult to reuse styles.
Reduced readability: HTML code becomes complex and difficult to maintain.
Each method of applying styles can be useful in certain situations.
For example, an external style sheet may be effective if you want to enforce a consistent design across your website, while an internal or inline style sheet may be better if you need special styling for a single page or specific element. Therefore, web developers must consider the project's requirements and resources to choose the most appropriate method.